Colour converter & palette
Pick or paste a colour and get its HEX, RGB and HSL values together, a generated ramp of tints and shades, and the contrast ratios that decide whether text on it is readable.
How to use the colour converter & palette
- Use the picker or type a HEX value.
- Read the RGB and HSL equivalents.
- Click any swatch in the ramp to copy that shade.
How it works
HEX and RGB describe the same thing in different notation — three channels from 0 to 255. HSL re-expresses that as hue, saturation and lightness, which is far easier to adjust by hand: change lightness alone and you get a consistent tint or shade rather than a different colour.
Contrast ratios follow the WCAG formula, comparing relative luminance between two colours. Body text needs 4.5:1 to pass AA and 7:1 for AAA; large text can pass at 3:1. The ratios against white and black tell you immediately which text colour your background can carry.
Common questions
What contrast ratio do I need?
4.5:1 for normal body text under WCAG AA, 3:1 for large or bold text, and 7:1 for AAA.
How do I make a lighter version of a colour?
Use the ramp — the swatches to the left mix the colour toward white in even steps, which is more predictable than eyeballing it.