Colour on screens is three numbers: how much red, green and blue light to mix, each from 0 to 255. Everything else, hex codes, HSL and contrast ratios, is a different way of writing or judging those three numbers.
Hex, RGB and HSL are the same colour
#3366cc is hex for red 0x33 = 51, green 0x66 = 102 and blue 0xCC = 204, so it is also rgb(51, 102, 204). Each channel has 256 levels, giving 256³ = 16,777,216 colours. A three-digit hex such as #36c doubles each digit (#3366cc). Convert between forms with the Color Converter and RGB to HEX Converter.
HSL describes the same colour as hue, saturation and lightness: #3366cc is hsl(220, 60%, 50%). Hue is the position on the colour wheel in degrees (0 red, 120 green, 240 blue), so shifting it by 180° gives the complement: here #cc9933, an orange. HSL is easier for making lighter, darker or less saturated variants.
Contrast: can people read it?
WCAG defines contrast as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 the darker colour's relative luminance, a weighted sum of the linearised channels (0.2126 R + 0.7152 G + 0.0722 B, with green counting most because the eye is most sensitive to it). The ratio runs from 1:1 (identical) to 21:1 (black on white).
| Level | Normal text | Large text and UI parts |
|---|---|---|
| AA | at least 4.5:1 | at least 3:1 |
| AAA | at least 7:1 | at least 4.5:1 |
Large text is about 24px or 19px bold. Some real values: black on white is 21:1; #767676 grey on white is 4.54:1, the lightest neutral grey that passes AA for body text, while #777777 is 4.48:1 and fails; Bootstrap's blue #0d6efd on white is 4.50:1, just at the limit. Test your own pairs with the Color Contrast Checker.
Do not rely on colour alone. Use a second cue (an icon, underline or label) for errors and links, and pick pairs that stay distinguishable for people with colour-blindness. Roughly 1 in 12 men and 1 in 200 women have a red-green deficiency; the Color Blindness Simulator shows how an image looks to them.
Building and finding palettes
- Complementary: hue + 180°. Analogous: hues within about 30° of each other. Triadic: hues 120° apart.
- Pick a base colour from a photo with the Image Color Picker or pull a whole palette from an image with the Image Color Palette Extractor.
- Generate ideas with the Random Color Palette Generator, then check every text and background pair for contrast.
- Gradients blend two colours; build one with the CSS Gradient Generator and keep text contrast high at both ends.
Common mistakes
- Light grey text on white. It looks elegant and fails readability for many people.
- Checking only the background. Text over a photo or gradient needs checking at its worst point.
- Relying on red versus green. Add shapes or labels.
- Forgetting dark mode. Test the palette in both themes.