Getting Started with OKLCH Colors and Useful Tools

1. What is OKLCH?

“It is called the Oklab color space, because it is an OK Lab color space.”

OKLCH is a color representation built on the OK Lab color space, using three intuitive parameters:

• Lightness (L): Controls the perceived brightness, ranging from 0 (black) to 1 (white).
• Chroma (C): Controls color intensity or vividness, usually from 0 (gray) up to around 0.4 (very saturated).
• Hue (H): Controls color angle, from 0° to 360°, mapping to positions around the color wheel.

In practice, you can express a medium-bright red as oklch(0.5 0.2 0). Compared to traditional HSL or RGB, this model aligns more closely with how designers intuitively think about and manipulate color.

Example:

.palette {
  color: oklch(0.7 0.15 40);    /* soft green */
  color: oklch(0.7 0.15 140);   /* soft red */
  color: oklch(0.7 0.15 280);   /* soft purple */
  color: oklch(0.9 0.07 120);   /* light orange */
  color: oklch(0.3 0.1 200);    /* dark blue */
}

.variations {
  color: oklch(0.5 0.2 100);    /* medium yellow */
  color: oklch(0.5 0.2 225);    /* medium blue */
  color: oklch(0.5 0.2 340);    /* medium pink */
  color: oklch(0.5 0.05 100);   /* medium grayish yellow */
}

.transparency {
  color: oklch(0.8 0.15 40 / 70%);   /* 70% opaque green */
  color: oklch(0.6 0.08 250 / 30%);  /* 30% opaque blue */
  color: oklch(0.4 0.12 340 / 50%);  /* 50% opaque pink */
}

You can easily tweak the L (lightness), C (chroma/saturation), H (hue angle), and alpha (/ xx%) to create vibrant and accessible color palettes.

OKLCH is essentially a polar coordinate version of the OK Lab color space, designed by Björn Ottosson in 2020. As designers, we don’t need to get lost in the math, but it’s helpful to know that OK Lab was created to address perceptual flaws in earlier spaces like CIE Lab, providing color changes that feel much more natural to the human eye.

OKLCH adopts the familiar hue-lightness-chroma model but with calculations grounded in perceptual uniformity. This means we get intuitive controls with more reliable, consistent results.

---

2. Limitations of Color Perception and Why OKLCH Matters

In daily design work, you might notice that smooth gradients in RGB or HSL sometimes look uneven or shift in unexpected ways. This isn’t a bug—it’s because those color models don’t match how our eyes perceive color.

RGB is hardware-oriented, mapping directly to device primaries. HSL is more designer-friendly, but its lightness calculation is overly simplified, leading to mismatches between numerical “lightness” and visual brightness. For example, the same lightness value for yellow and blue looks very different to our eyes.

From practical experience, OKLCH’s breakthrough is that it offers the best of both worlds: you can work with color using familiar parameters (hue, chroma, lightness) and trust that number changes will match what you see. This solves many problems when building color scales and design systems.

---

3. Using OKLCH in Real-World Design

OKLCH makes color adjustment more intuitive:

• Keep hue and chroma fixed, adjust lightness to create tints and shades of the same color.
• Keep lightness and hue fixed, adjust chroma to control vividness.
• Keep lightness and chroma fixed, adjust hue to explore different color families.

This independence of parameters is especially valuable in design system development, allowing for precise palette construction and adjustment.

Working across multiple devices is the norm in modern UI design. OKLCH delivers more consistent color rendering across different screens and lighting conditions—not just in theory, but in real projects.

Of course, OKLCH doesn’t solve every color management challenge (like display calibration or out-of-gamut issues), but it’s a much stronger foundation than legacy models.

Tailwind CSS, as of v4, uses OKLCH as its default color system. My experience is that OKLCH is simply easier to use: it directly describes color properties, so I can get the results I want more quickly and visually.

Browser support for OKLCH is now solid (Chrome 113+, Firefox 113+, Safari 16.4+), but it’s still best practice to offer fallback colors:

.element {
  background-color: #3870e0;
  background-color: oklch(0.55 0.2 250);
}

Or, for progressive enhancement:

.element {
  background-color: #3870e0;
}
@supports (background-color: oklch(0.55 0.2 250)) {
  .element {
    background-color: oklch(0.55 0.2 250);
  }
}

---

Be Aware of OKLCH’s Limitations

While OKLCH offers many advantages for color manipulation and design, there are some caveats:

• Out-of-gamut issues: For some extreme or very saturated colors near the edge of a device’s color capabilities, OKLCH may describe colors that cannot be accurately displayed, especially at high chroma and lightness combinations.
• Browser support is still maturing: Most modern browsers support OKLCH, but older browsers or certain environments may not, so fallback colors are still necessary for compatibility.
• Slightly higher computational cost: OKLCH color calculations are more complex than traditional RGB/HSL. Heavy real-time color manipulations on the frontend could have a performance impact, particularly on low-powered devices.
• Limited support in design tools: Some popular design software doesn’t yet fully support OKLCH natively, so designers may need to use third-party tools for color conversion.

In summary, OKLCH brings a more scientific and designer-friendly approach to modern color management, but it’s important to remain mindful of compatibility, performance, and toolchain support. Using OKLCH in tandem with traditional color models and fallback strategies will yield the best results.

---

Recommended OKLCH Color Tools

• Tailwind CSS Color Palette
• OKLCH Color Picker
• Culori
• Leonardo
• Huetone
• UI Colors Generator
• Tailwind CSS Color Generator