Color Converter
Convert colors between HEX, RGB, HSL, OKLCH and CMYK, check WCAG contrast, and generate a tint ramp. Everything runs in your browser.
Contrast
Formats
- HEX
- RGB
- HSL
- OKLCH
- CMYK
Tints and shades — even steps in OKLCH
Related tools
All Colour tools →This tool runs entirely in your browser. Nothing you enter is sent to our servers, so there is nothing for us to store or see.
About the Color Converter
Convert a colour between HEX, RGB, HSL, OKLCH and CMYK at once — type it in any of those notations, or pick it visually, and every other representation updates immediately. Named colours like red and shorthand hex like #f00 are understood too, as is an alpha channel in any of the forms that support one.
OKLCH is the one worth knowing about if you have not met it. HSL has a long-standing flaw: two colours with identical lightness values can look dramatically different in brightness, which is why a palette built by stepping through HSL lightness comes out visually uneven. OKLCH is built on a perceptual model, so equal numeric steps look like equal steps. Every current browser supports it in CSS.
The contrast panel gives you the WCAG 2.1 ratio against white and black with the grade each one earns — 4.5:1 for normal text at AA, 3:1 for large text and for non-text elements like form borders and icons. The tint ramp below walks lightness in OKLCH and tapers chroma at both ends, because a fully saturated near-white is outside sRGB and would clip to something unrelated.
How to use the Color Converter
-
Enter a colour
Type a hex code, an rgb() or hsl() value, or a colour name. The picker beside the field is there when you would rather choose visually.
-
Read every format
HEX, RGB, HSL, OKLCH and CMYK all update as you type. Each has its own copy button, so you can take just the one you need.
-
Check the contrast
The ratio against white and black is shown with the WCAG grade it earns, so you know immediately whether text in this colour will be readable.
-
Take a tint or shade
The eleven-step ramp gives you a full lightness scale built from your colour. Click any swatch to copy its hex code.
Frequently asked questions
What is OKLCH and why would I use it over HSL?
OKLCH describes a colour by perceptual lightness, chroma and hue. Unlike HSL, its lightness value tracks how bright a colour actually looks, so two colours with the same L genuinely appear equally bright. That makes it far better for building palettes where the steps need to look evenly spaced. Every current browser supports oklch() in CSS.
What contrast ratio do I need to pass WCAG?
For normal body text, 4.5:1 passes AA and 7:1 passes AAA. Large text — 18.66px bold or 24px regular and above — needs 3:1 for AA and 4.5:1 for AAA. Non-text elements such as form control borders, icons and focus indicators need 3:1 under success criterion 1.4.11.
Why does the CMYK value not match my print software?
This uses the standard arithmetic conversion, which assumes no particular ink, paper or press. Real print workflows apply an ICC profile that accounts for all three, so the numbers will differ. Treat the CMYK figure here as a starting point, not as press-ready output.
Which colour notations can I paste in?
Hex in three, four, six or eight digits with or without the hash; rgb() and rgba() in both the modern space-separated and legacy comma-separated forms, with numeric or percentage channels; hsl() and hsla() likewise; and common colour names such as red, teal and navy.
Is anything I enter sent to a server?
No. Every conversion, the contrast maths and the ramp all run in your browser, and nothing is transmitted or stored. The page works with no network connection once it has loaded.