How to use
- Type a color in any CSS format (#2440c4, rgb(36 64 196), hsl(229 69% 46%) or a name like teal), or use the picker.
- Copy the format you need from the table.
- Check the contrast ratios to see whether text in this color is readable on white or black, and the reverse.
- Click a swatch in the tints and shades row to switch to it.
WCAG contrast levels
- AA: at least 4.5:1 for normal text.
- AA Large: at least 3:1 for text 24 px and larger, or 19 px bold.
- AAA: at least 7:1 for normal text.
About CMYK
CMYK values here are a simple conversion from RGB. Printed colors depend on the paper, ink and colour profile, so ask your printer for exact values for important brand colours.
Frequently asked questions
What is OKLCH?
A newer CSS color format based on how people perceive lightness and colourfulness. Changing only the L value gives evenly lighter or darker colours, which makes it useful for design systems.
What is the difference between HSL and HSV?
Both describe hue and saturation. HSL’s lightness runs from black through the pure colour to white; HSV’s value runs from black to the pure colour. Design tools such as Photoshop often call HSV “HSB”.
Which formats can I type in?
Any format a browser understands: hex (3 or 6 digits), rgb(), hsl(), hwb(), and the 148 named CSS colours.