Primary references
These sources support the standards and technical explanations in this guide. Color Pick recommendations and product-specific limitations are identified separately in the article.
Web and UI
CSS color-mix(): OKLCH vs sRGB and Other Interpolation Spaces
Compare how CSS color-mix() behaves in sRGB, linear sRGB, Oklab, OKLCH, Lab, LCH, HSL, and Display P3, including hue routes and fallback planning.
Direct answer
The interpolation space controls the path between source colors. sRGB mixes encoded RGB channels and can create dark or dull midpoints. Linear sRGB changes the light behavior. Oklab and OKLCH are designed for perceptual uniformity, while polar spaces also require a hue route. Compare the resolved output rather than choosing a space by name alone.
At a glance
Why the interpolation space matters
The same endpoints can create different midpoints.
A color mix is not merely an average of labels. The browser converts colors into the selected interpolation space, blends the channels, then resolves the result for display. Encoded sRGB, linear-light RGB, rectangular perceptual spaces, and polar spaces follow different paths.
Compare the major spaces
Each space is useful for a different relationship.
| Space | Strength | Review |
|---|---|---|
| sRGB | Familiar and widely used | Can produce darker or muddier midpoints |
| linear sRGB | Light-energy interpolation | May look brighter than expected |
| Oklab | Perceptual rectangular interpolation | Good default for many UI relationships |
| OKLCH | Perceptual lightness, chroma, and hue | Review hue route and gamut |
| HSL | Familiar hue control | Not perceptually uniform |
| Display P3 | Wide-gamut RGB interpolation | Keep an sRGB fallback |
Choose the hue interpolation route
Polar spaces can travel around the hue circle in more than one direction.
- shorter hue uses the shorter route
- longer hue intentionally takes the longer route
- increasing hue moves in the positive direction
- decreasing hue moves in the negative direction
- neutral or powerless hues still require visual review
Use a measured comparison workflow
Choose the result based on rendered evidence.
- 1
Use the same source colors and percentage.
- 2
Resolve the mix in several spaces.
- 3
Compare lightness, saturation, hue path, and gamut.
- 4
Check contrast on the real surface.
- 5
Keep a deterministic fallback before the dynamic expression.
Generate a progressive enhancement
The fallback remains usable when color-mix() is unavailable.
.button {
background: #315fbe;
}
@supports (color: color-mix(in oklch, black, white)) {
.button {
background: color-mix(in oklch, var(--brand) 72%, var(--accent));
}
}Do not infer accessibility from the color space
Perceptual interpolation does not automatically create sufficient contrast.
Put the guide into practice
Open color-mix comparisonCompare interpolation spaces
Resolve the same mix across modern CSS color spaces.
Frequently asked questions
Is OKLCH always better than Oklab?
No. OKLCH exposes chroma and hue directly, which is useful for design recipes. Oklab can avoid hue-route decisions for some blends. Compare the output.
Why does sRGB sometimes look dark?
sRGB channels are gamma encoded. Averaging encoded channels does not produce the same light behavior as linear-light interpolation.
Can color-mix() mix more than two colors?
Current CSS syntax can accept multiple colors, but browser support for every variation should be tested. The Lab focuses its production compiler on two-source relationships.