user
Why some oklch colors are not displayable?
alphonsio

Some OKLCH colors aren’t displayable because the OKLCH color space is perceptually uniform and device-independent, while actual screens (and many file formats) can only show colors within a device-dependent gamut such as sRGB, Display-P3, or Rec.2020.

Here’s why that causes problems:

1. OKLCH describes colors humans can see, not just what screens can show*

OKLCH is designed to map human vision. The space is much larger than typical display gamuts.

When you specify an OKLCH color (Lightness L, Chroma C, Hue h):

  • If C (chroma) is too high, the color may simply not exist inside sRGB or even Display-P3.
  • Even if the hue is valid, the combination of high lightness + high chroma might be beyond any monitor’s capabilities.

So the color is real, but your screen cannot reproduce it.

2. Displays have limited gamuts (e.g., sRGB is small)

Most devices use one of these gamuts:

  • sRGB → the smallest
  • Display-P3 → ~25% larger than sRGB
  • Rec.2020 → much larger, but not fully supported by real hardware yet

OKLCH colors that fall outside these triangular gamuts in the CIE space simply can’t be shown.

Examples of “not displayable” OKLCH:

  • L: 0.6, C: 0.35, h: 35° is outside sRGB.
  • L: 0.8, C: 0.28, h: 25° is even outside P3.
  • Very saturated greens or oranges are common out-of-gamut problem colors.

3. CSS will clamp or convert them

If you use OKLCH in CSS:

color: oklch(0.8 0.4 200);

The browser will:

  1. Convert OKLCH → display color space (usually sRGB)
  2. If the color is out of gamut, clamp the chroma until it fits

This can produce duller or shifted colors.

4. The problem often appears with high chroma

In OKLCH:

  • Chroma (C) increases saturation.
  • But sRGB only supports limited saturation, especially in blues, reds, and greens.

Usually:

  • OKLCH colors with C > 0.3 are often outside sRGB.
  • Colors with C > 0.4 are outside Display-P3.

5. Lightness also matters

Some high-chroma colors only exist at certain lightness levels.

For example:

  • Deep saturated blues can’t exist at high L values.
  • Bright yellows can’t have high chroma at low L values.

OKLCH is perceptual, so it exposes these limits clearly.

In short

Some OKLCH colors are not displayable because:

  1. OKLCH covers the full range of human vision
  2. Displays support only limited gamuts like sRGB/P3
  3. High chroma values often exceed those gamuts
  4. CSS clamps out-of-gamut colors to fit the device