Your design tool gives you HEX, your CSS variables are authored in HSL, the design-system doc specifies OKLCH, and the print vendor asks for CMYK. Translating one colour between notations is constant work and tedious by hand.
This tool converts between HEX, RGB, HSL, HWB, OKLCH and CMYK while simultaneously computing the WCAG 2.2 contrast ratio, telling you whether body text, large text and UI components each pass AA and AAA. It also generates a 50–950 shade scale from your colour, ready to drop into a design system.
How to use
- Enter a colour — Click the swatch to use the native picker, or type any notation:
#FF5733,rgb(255 87 51),hsl(11 100% 60%),oklch(0.67 0.2 35). CSS colour names such astomatoare recognised too. - Copy the notation you need — Click any row in the results list to copy that value. Colours with alpha are shown as both
#RRGGBBAAand the slash syntaxrgb(r g b / a). - Check contrast — Set a text colour and a background below and the ratio and WCAG verdicts update live, alongside a real text preview so you can judge with your eyes as well as the number.
- Use the shade scale — Click any swatch in the scale to make it the active colour. The copy button emits the whole scale as
--color-500: #...;custom property declarations.
Frequently asked questions
Where does the 4.5:1 threshold come from?
It is the WCAG 2.2 level AA requirement for body-size text against its background.
'Large text' — 18pt (about 24px), or 14pt (about 18.66px) when bold — relaxes to 3:1. Level AAA raises those to 7:1 and 4.5:1. Non-text UI elements such as button borders, icons and input outlines have their own 3:1 requirement.
It passes the check but still looks hard to read.
The WCAG 2.x formula does not perfectly model human perception.
It compares relative luminance only, and is known to diverge from experience with thin fonts, light text on dark backgrounds, and highly saturated pairs. APCA, under discussion for WCAG 3, is an attempt to fix this. Treat the number as a floor, then look at the real screen and adjust font weight as well as colour.
Why bother with OKLCH?
Because its numbers line up with what your eyes actually see.
In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both claim 50% lightness, yet the yellow looks far brighter. OKLCH is built on a perceptual colour model, so equal L values really do look equally bright.
That makes hue-rotated palettes stay visually consistent and stops interpolation between two colours from passing through a muddy grey. Every current browser supports it, so it is a reasonable default notation for a new design system.
Concepts worth knowing
HEX, RGB and HSL are the same colour in different coordinates
HEX and RGB are notation variants of one value: #FF5733 is simply red 255, green 87, blue 51 written in hexadecimal. They map directly to display hardware, which makes them precise but hard to reason about.
HSL splits the same colour into hue (0–360°), saturation and lightness so humans can manipulate it. 'A bit lighter' is just a higher L, which is why HSL is popular for CSS-variable colour scales.
Relative luminance and the contrast formula
Contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05) where L is relative luminance, producing values from 1:1 (identical) to 21:1 (black on white).
Computing luminance gamma-corrects each channel and then weights them 0.2126 red, 0.7152 green, 0.0722 blue. Green dominates because human vision is most sensitive to it — which is why a blue and a green of apparently similar brightness can score very differently.
Shade scales and design systems
The 50–950 scale popularised by Tailwind CSS defines eleven brightness steps for one hue, with 50 lightest, 950 darkest and 500 typically the base.
It simplifies dark mode enormously: light mode using background 50 and text 900 inverts to background 950 and text 100. Some inverted pairs break contrast, though, so verify the important combinations with the checker here before locking the palette in.