HEX, RGB and HSL Color Converter
One colour in every notation, with its contrast.
HEX with or without #, 3, 4, 6 or 8 digits; rgb() or rgba(); hsl() or hsla(); or a CSS name like teal.
Fill in the fields and the answer appears here.
How this was worked out
Fill in the fields and the answer appears here.
Guide: One colour, five notations2 min read
One colour, five notations
HEX, RGB and HSL are three ways of writing the same three numbers. HEX is what CSS and design tools use; RGB says how much red, green and blue, from 0 to 255; HSL describes the colour as hue, saturation and lightness, which makes lighter and darker variations easy to build. Paste any of them and the page shows the rest, plus HSB — the model behind the pickers in Figma and Photoshop — and CMYK.
Contrast you can read
A beautiful colour can be illegible behind text. The page computes the WCAG contrast against white and against black: 4.5:1 is the minimum for body text, 3:1 for large text, and 7:1 is AAA. It also says which of the two reads better on the colour, with a sample beside it. Grey 777777 on white is 4.48:1 and just fails; 767676, one step darker, passes.
CMYK and print
The CMYK shown is the straight mathematical conversion that design tools display. The colour a printer produces depends on the paper and the shop's colour profile, so for print work ask them for the values. Nothing you type leaves this tab.
Frequently asked questions
How do I convert HEX to RGB?
Each pair of hex digits is one channel from 00 to FF, which is 0 to 255: hex 336699 is 33 red, 66 green and 99 blue, which in decimal is 51, 102 and 153. Type or paste the colour in any notation and every other one appears.
What do the contrast grades mean?
They are WCAG 2's. Normal text needs a ratio of at least 4.5:1 with its background (AA), large or bold text 3:1, and 7:1 reaches AAA. The page checks the colour against white and black and says which of the two reads better on it.
What is the difference between HSL and HSB?
Both describe hue and saturation; they disagree about brightness. In HSL, 100% lightness is always white. In HSB (also called HSV), 100% brightness is the purest version of the colour. Photoshop and Figma's pickers use HSB; CSS uses HSL.
Is the CMYK value right for printing?
It is the straight mathematical conversion, the same figure most design tools show. What a printer actually lays down depends on the paper and its colour profile, so for print work ask the print shop for their values.
Which formats can I paste?
HEX with or without #, in 3, 4, 6 or 8 digits; the rgb and rgba functions, with commas or the newer space syntax; hsl and hsla; and common CSS colour names such as teal or tomato.