The New Era of Color on the Web: Understanding OKLCH

The way we define and use color on the web is evolving. While older models like sRGB have been the standard, a new, more intuitive system is gaining traction: OKLCH. This article will explore what OKLCH is, its benefits, and how you can start using it today.

---

What is OKLCH?
OKLCH is a modern color model that is perceptually uniform. This means it's designed to align more accurately with how the human eye perceives color. Unlike sRGB, which can behave unpredictably, OKLCH gives you a more reliable way to work with colors. It's composed of three key values:

• L (Lightness): How light or dark a color is.
• C (Chroma): The intensity or vividness of a color.
• H (Hue): The shade of the color (e.g., red, blue, green).

This structure makes it incredibly simple to create harmonious color palettes and gradients. For example, by keeping the "L" and "C" values consistent, you can generate a series of shades that maintain the same perceived brightness, avoiding the "hue drift" that can happen with other models.

The Impact on Visualization and Compatibility
The move to OKLCH is part of a larger shift in the web's visualization era, where modern displays support a wider range of colors, or "gamut," than the traditional sRGB standard. OKLCH can access these wider color spaces, allowing designers to create more vibrant and vivid designs.

A crucial aspect of this transition is ensuring compatibility. While most modern browsers support OKLCH, older browsers do not. This is where CSS's @supports rule comes in. It allows you to provide a fallback for older browsers, ensuring your design looks good everywhere.

Here is an example of how to implement this using a simple gray color palette, as you requested:

@layer base {
  :root {
    /* sRGB hex */
    --color-gray-100: #fcfcfc;
    --color-gray-200: #fafafa;
    --color-gray-300: #f4f4f4;

    @supports (color: oklch(0 0 0)) {
      /* OKLCH */
      --color-gray-100: oklch(0.991 0 0);
      --color-gray-200: oklch(0.982 0 0);
      --color-gray-300: oklch(0.955 0 0);
    }
  }
}

This code snippet first defines the gray colors using the standard sRGB hex codes. Then, within the @supports block, it redefines those colors using the OKLCH values. Browsers that understand oklch will use the new values, while older ones will fall back to the hex codes, ensuring a consistent user experience.

You can learn more about this topic and see a practical tool for generating color palettes at the original source: jakub.kr