---
title: "Modern CSS colors: oklch() and color-mix()"
url: https://daily.dev/posts/modern-css-colors-oklch-and-color-mix--elb1blipu
source_url: https://flaviocopes.com/css-oklch-color-mix
type: article
source: "Flavio Copes"
published: 2026-08-23T09:23:28.243Z
updated: 2026-08-23T09:23:49.964Z
tags: ["css", "accessibility", "design-systems"]
reading_time: 10
upvotes: 14
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Modern CSS colors: oklch() and color-mix()

**[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 10 min read · 14 upvotes · 0 comments

## Summary

Modern CSS offers oklch() for defining perceptually uniform colors with lightness, chroma, and hue channels, and color-mix() for blending colors at runtime to derive hover states, tints, and theme variants. The guide covers reading oklch values, building lightness scales, converting existing hex colors, mixing toward a surface rather than plain white/black, handling gamut mapping issues, building dark themes, adding fallbacks with @supports, and avoiding common mistakes like assuming perceptual lightness guarantees contrast.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://flaviocopes.com/css-oklch-color-mix>

## Questions this post answers

### What do the three values in an oklch() CSS color mean?

An oklch() color has three channels: lightness, chroma, and hue. Lightness runs from 0% (black) to 100% (white); chroma controls colorfulness, with 0 producing gray and higher values (commonly up to about 0.4) producing more vivid colors; hue is an angle from 0 to 360 degrees that wraps around. Alpha can be added optionally after a slash, e.g. oklch(20% 0.04 255 / 70%).

_daily.dev surfaces practical CSS breakdowns like this for developers building color systems._

### How does color-mix() calculate percentages when only one color has a value specified?

When only one percentage is given, the browser calculates the remainder for the other color automatically, so color-mix(in oklch, var(--brand) 85%, white) is identical to writing white 15% explicitly. If neither color has a percentage, each contributes 50%. If the two percentages add up to less than 100%, the missing amount reduces the alpha of the result, introducing unexpected transparency.

_Developers tuning theme tokens can track CSS color function details like this on daily.dev._

### Why does increasing chroma in oklch() sometimes stop making a color look more vivid?

Because the browser must map every requested color into the gamut of the current display, and once a chroma value exceeds what the display can reproduce, the browser clips it to the nearest displayable color, so further increases produce no visible difference. This means a palette should use the lowest chroma that achieves the intended look across supported screens rather than maximizing chroma values.

_daily.dev helps developers keep up with rendering quirks like gamut mapping in CSS colors._

## Similar posts on daily.dev

- [A pragmatic guide to modern CSS colours - part two](https://daily.dev/posts/a-pragmatic-guide-to-modern-css-colours---part-two-xlpotvmhm) · Piccalilli · 20 upvotes · 1 comments
- [oklch\(\) in CSS: A Modern Approach to Color](https://daily.dev/posts/oklch-in-css-a-modern-approach-to-color-p60ewgyer) · Atomic Spin · 27 upvotes · 6 comments

---

Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility), [#design-systems](https://daily.dev/tags/design-systems)

[View this post on daily.dev](https://daily.dev/posts/modern-css-colors-oklch-and-color-mix--elb1blipu)