Colour code converter: HEX, RGB, HSL, OKLCH and CMYK

How to use this tool

1. Enter your colour Type or paste HEX, RGB, HSL, OKLCH, CMYK or a colour name. You can also use the picker or pick from an image.
2. Copy any format Every format appears at once, each with its own copy button.
3. Check text contrast Set a background colour. See the contrast ratio and whether it passes WCAG AA and AAA.
4. Fix low contrast If it fails, click one of the suggested colours. It keeps the same hue and only changes lightness.
5. Build a palette Get a 50–950 shade scale and colour harmonies, then export as CSS variables, Tailwind or design tokens.

Readable text

• Normal text needs at least 4.5:1 against its background (WCAG AA). Large text (24px, or 18.66px bold) needs 3:1.
• Buttons, icons and form borders need 3:1.
• Do not use colour alone to show meaning (like red for errors). Add an icon or a word.

Choosing formats

• HEX and RGB work everywhere.
• OKLCH is best for building themes: change hue without changing how light it looks.
• For print, give your printer the CMYK values but trust a printed proof, not the screen.

Brand colours

• Keep a main colour and use its 50–950 scale for backgrounds, borders and text.
• Test your brand colour on white and on dark backgrounds.
• Check the colour-blindness preview so key information is still clear.

Questions about this tool

How do I convert HEX to RGB?

Paste the HEX code, like #1A73E8. The RGB value, rgb(26 115 232), appears at once with a copy button, along with HSL, OKLCH and CMYK.

What contrast ratio do I need?

WCAG AA needs 4.5:1 for normal text and 3:1 for large text and icons. AAA needs 7:1 for normal text.

What is OKLCH?

A modern CSS colour format: lightness, chroma and hue. It matches how people see lightness better than HSL, so it is good for palettes.

Is the CMYK value exact?

No. Screen-to-print conversion depends on paper and printer. Use it as a starting point and check a printed proof.

Does it work offline?

Yes. All conversions run in your browser.