The colour syntaxes
| Syntax | Example | Notes |
|---|---|---|
| Hex | #1F4FE0, #1F4FE080 | Two hex digits per channel; 8 digits adds alpha. #RGB is shorthand for #RRGGBB. |
| rgb() | rgb(31 79 224 / 50%) | 0–255 per channel. Modern syntax uses spaces and a slash for alpha; the comma form still works. |
| hsl() | hsl(225 76% 50%) | Hue in degrees, saturation and lightness in percent. Easy to tweak by hand, but equal lightness values do not look equally light. |
| hwb() | hwb(225 12% 12%) | Hue, whiteness, blackness: how a painter mixes. |
| oklch() | oklch(0.51 0.22 266) | Perceptual lightness 0–1, chroma, hue. Changing L by the same amount looks like the same change for every hue, which makes it the right space for generating palettes. |
| oklab() | oklab(0.51 0.01 -0.22) | The Cartesian form of OKLCH. |
| Named | rebeccapurple | 148 names from CSS Color Level 4. |
Contrast
WCAG 2 defines contrast as (L₁ + 0.05) / (L₂ + 0.05) using relative luminance, from 1:1 (identical) to 21:1 (black on white). Body text needs 4.5:1 for AA and 7:1 for AAA; large text (18 pt, or 14 pt bold) and UI components such as borders and icons need 3:1. The checker shows all four verdicts and swaps the two colours to show the ratio is symmetric.
Why OKLCH
In HSL, a yellow and a blue with the same “lightness” differ enormously in how bright they look, so palettes built in HSL have uneven steps. OKLCH was designed so that equal numeric differences look equal. It is supported in every current browser, and color-mix() and relative colour syntax work in it. The converter marks OKLCH colours that fall outside the sRGB gamut, since the tool clamps them.
Questions
How do I convert hex to RGB by hand?
Split the six digits into pairs and convert each from hex: #1F4FE0 → 1F = 31, 4F = 79, E0 = 224 → rgb(31, 79, 224). Three-digit hex doubles each digit (#F80 = #FF8800).
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text or UI components to meet WCAG AA; 7:1 and 4.5:1 for AAA. Placeholder text and disabled controls are exempt, but still worth checking.
Why does the same hsl() lightness look different for different hues?
HSL is a geometric transform of RGB with no perceptual model; pure yellow (hsl 60 100% 50%) is far brighter than pure blue (hsl 240 100% 50%) at the same L. Use OKLCH when you need visually even steps.
What is the alpha channel?
Opacity, 0 (transparent) to 1 (opaque), written after a slash in modern syntax or as the fourth value in rgba(). Contrast is computed here on the opaque colour; semi-transparent text over a background needs the blended result.