A Practical Guide to Modern CSS Color
Newer CSS color features, such as the oklch() color space and color-mix() function, that make it easier to build consistent palettes and themes.
Marcus Adeyemi
The key figures
- oklch()
- defines colors by lightness, chroma and hue in a perceptual space
- color-mix()
- mixes two colors in a chosen color space
- Wide gamut
- CSS can express colors beyond sRGB
- Contrast
- WCAG contrast still has to be checked
Why this is worth getting right
Perceptual color spaces make lightness and contrast more predictable, which helps generate accessible palettes and variants.
Do this, not that
Do
- Use OKLCH for generating tints and shades
- Mix colors with color-mix() for states
- Provide sRGB fallbacks where needed
- Check contrast for every pairing
- Define palettes as custom properties
Don’t
- Assuming perceptual spaces guarantee accessible contrast
- Wide-gamut colors without fallbacks
- Hand-picking every tint
- Mixing color spaces inconsistently
When to bring in help
Our advice Bring in help when building theming systems or dark modes.
Where this comes from
- MDN Web Docs — oklch()
- MDN Web Docs — color-mix()
The figures and practices above come from the sources listed.
Working on something like this?
We take on Web Design & Development work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
