Advancing Color Coding with OKLCH: A Leap Beyond RGBA

3 min readOct 22, 2023

The digital world is vivid with colors, and how we code and manipulate these colors impact the visuals on our screen. Traditionally, colors have been encoded using systems like RGB (Red, Green, Blue), RGBA (Red, Green, Blue, Alpha for opacity), Hex, and HSL (Hue, Saturation, Lightness), among others. However, a new color coding system, OKLCH, is gaining traction for its advantages over these traditional systems, particularly RGBA. This article explores the OKLCH color code, its benefits, and provides an illustrative example showcasing its ease of use.

Understanding OKLCH

OKLCH is a novel method to encode colors, akin to hex, RGBA, or HSL, but with its unique set of parameters that grant it a distinctive edge. The oklch() color function comprises three required parameters and one optional parameter:

L (Lightness): Ranges from 0% (pure black) to 100% (pure white), indicating how close the color is to white or black.
C (Chroma): Represents the color’s purity, with higher values indicating more saturation.
H (Hue): Defines the color itself, akin to a color wheel, with values ranging from 0 to 360.
alpha (optional): Specifies the color’s opacity, ranging from 0 to 1.

Why Prefer OKLCH Over RGBA?

1. Intuitive Color Identification:

OKLCH’s syntax makes it simpler to deduce colors and understand what values to alter to create lighter or darker variants, providing a more intuitive approach to color identification compared to the RGBA’s red-green-blue-alpha parameters.

2. Automatic Palette Generation:

With OKLCH, designers can define a formula or choose a few colors, and an entire design system palette is automatically generated. This feature significantly reduces the manual labor of selecting every color individually, unlike the process entailed with RGBA.

3. Better Color Reproduction on Modern Screens:

OKLCH enables the specification of wide-gamut P3 colors, a feature invaluable for modern devices like those from Apple, which can display more colors than traditional sRGB monitors. This capability makes OKLCH more suited for modern screens, encoding more colors for a richer visual experience.

4. Predictable Contrast and Accessibility:

Unlike HSL and possibly RGB, OKLCH always retains predictable contrast after color transformation, which is crucial for generating accessible color palettes that comply with modern web accessibility standards.

A Simple Illustration

/* Using OKLCH */
.bg-primary {
  background-color: oklch(66.28% .24 151.4); /* This encodes a specific color in OKLCH */
}

/* Fallback to RGBA */
.bg-primary {
  background-color: rgba(0,176,86); /* The corresponding color in RGBA */
}

In this snippet, the color is initially encoded using OKLCH, and if OKLCH is not supported, it falls back to the RGBA encoding. This illustrates how the browser will use OKLCH when available, otherwise, it’ll fall back to RGBA, ensuring a seamless transition between the two systems.

Conclusion

OKLCH emerges as a powerful color encoding alternative with its intuitive syntax, automatic palette generation, enhanced color reproduction on modern screens, and predictable contrast. By adopting OKLCH, designers and developers can leverage these benefits to create more visually appealing and accessible digital content, making it a worthy successor to the conventional RGBA system.

The transition towards OKLCH is more than a mere change of syntax; it’s about embracing a tool that is attuned to the evolving needs of digital color representation and accessibility.