Introduction to OKLCH

May 13, 2025

OKLCH is a modern color space designed for better accessibility, perceptual uniformity, and flexibility in modern UIs. If you’re working in Tailwind CSS (which now supports OKLCH out of the box) but still designing in Figma (which doesn’t), here’s what you need to know and how to bridge the gap.

What is OKLCH?

Let’s break down the components:

  1. OK is simply for Oklab, the color model it’s based on
    • You can ignore this part when reading the values
  2. L is for Lightness
    • Lightness ranges from 0 to 1
    • 0 is black, 1 is white, and 0.5 is a mid-gray
    • CSS lets you write it as a percentage, like 60%, which is equivalent to 0.6
  3. C is for Chroma (color intensity)
    • Chroma ranges from 0 to ~0.4 in most practical cases, not 0 to 1
    • Chroma is not a fixed upper limit; it depends on the lightness and hue
    • 0 is grayscale (no color), and higher values add color intensity
    • The max chroma depends on the lightness and hue—it’s not a fixed upper limit
  4. H is for Hue (color type)
    • Hue ranges from 0 to 360
    • This part behaves much like you’re used to from HSL
    • 0 is red, 120 is green, 240 is blue
    • Hue is a circular scale representing positions on the color wheel:
      • 0 is red
        oklch(0.35 0.55 0)
      • 60 is yellow
        oklch(0.9 0.2 60)
      • 120 is green
        oklch(0.45 0.1 120)
      • 180 is cyan
        oklch(0.6 0.1 180)
      • 240 is blue
        oklch(0.4 0.2 240)
      • 300 is magenta
        oklch(0.5 0.25 300)
      • 360 is red again (full circle)
        oklch(0.35 0.55 360)

Opacity

Alpha (opacity), an optional value that ranges from 0 to 1, just like HSLA or RGBA. If you use the alpha channel, add a forward slash before the it: oklch(L C H / a).

Unlike traditional RGB or HSL, OKLCH is perceptually uniform, which means that a 10% change in lightness or chroma feels the same across different hues. This makes it perfect for consistent color theming, dynamic color systems (e.g., dark mode), and accessible contrast.

Key benefits of OKLCH

  • OKLCH frees designers from the need to manually choose every color. You can generate palettes from a formula or with a palette generator.
  • OKLCH can be used for wide-gamut P3 colors. Newer devices can display more colors than old sRGB monitors, and we can use OKLCH to specify these new colors.
  • Unlike HSL, OKLCH is better for color modifications and palette generation. It uses perceptual lightness, so there are no unexpected results, unlike those we had with lighten() or darken() in Sass.
  • With its predictable lightness, OKLCH provides easier a11y compliance.
  • Unlike RGB or hex, OKLCH is human-readable. You can quickly know which color an OKLCH value represents simply by looking at the numbers. OKLCH works similarly to HSL, but is more effective at encoding lightness.

Why designers should adopt OKLCH

In addition to the benefits listed above, designers should consider adopting OKLCH because it is gaining support in browsers and tooling quickly. I believe it will become the default color space for the web.

Figma doesn’t support OKLCH (yet)

Figma currently only supports RGB and HSL color models. That means:

  • You can’t enter or export OKLCH values directly
  • You may not get accurate previews for colors that look good in OKLCH space

How to work across Figma and Tailwind

1. Design in RGB but think in OKLCH

When building a palette in Figma, keep these principles in mind:

  • Use consistent lightness steps (e.g., from 0.25, 0.5, 0.75) for neutral grays
  • Adjust saturation and chroma thoughtfully, being mindful that not all values are valid like they are in HSL

2. Use third-party tools

OKLCH colors can be difficult to change manually because it is easy to end up with invalid colors, so it is best to use tools.

If you want to stay in Figma, you can use a plugin to convert your RGB values to OKLCH. I recommend OkColor. Otherwise, there are web tools that are more robust, like oklch.com.

3. Document OKLCH tokens in your Tailwind files

Tailwind supports OKLCH out of the box. Define tokens like:

colors: {
  brand: {
    DEFAULT: 'oklch(.6 .2 240)', // #0089d7
    hover: 'oklch(.55 .2 240)', // #0079c1
    muted: 'oklch(.7 .1 240)', // #60a7d6
  }
}

If you’re like me and prefer not to use Tailwind’s config file (Tailwind v4+), you can use OKLCH in a couple of ways:

Option 1: CSS Variables in tailwind.css

tailwind.css
:root {
  --primary: oklch(0.6 0.2 240); /* #0089d7 */
  --primary-hover: oklch(0.55 0.2 240); /* #0079c1 */
  --primary-muted: oklch(0.7 0.1 240); /* #60a7d6 */
}

@theme inline {
 --color-primary: var(--primary);
 --color-primary-hover: var(--primary-hover);
 --color-primary-muted: var(--primary-muted);
}

Option 2: Arbitrary values in your HTML

<div class="bg-[oklch(0.6_0.2_240)] text-[oklch(0.9_0.05_240)] hover:bg-[oklch(0.55_0.2_240)]">...</div>

Option 3: Custom utilities in tailwind.css

@layer utilities {
  .bg-brand {
    @apply bg-[oklch(0.6_0.2_240)] hover:bg-[oklch(0.55_0.2_240)];
  }
  .text-brand {
    @apply text-[oklch(0.6_0.2_240)];
  }
}

4. Provide Figma-friendly equivalents

There is currently no effective way to track OKLCH in Figma. If you use Figma Styles, you can add the OKLCH in the Description field, but if you use Variables, you will just need to rely on the Variable name and track the OKLCH values in your codebase or other external source.

Build a shared color token table using a Figma design token plugin, Notion, or a design system doc, and include:

  • Variable name
  • RGB hex (or HSL) for Figma
  • OKLCH value for code
  • Usage context (e.g. button-bg, card-border, text-muted)

Looking forward

OKLCH isn’t just a niche utility—it’s part of the official CSS Color Module Level 5 spec. As of March 2025, OKLCH is formally part of the CSS Color Module Level 5, which is in active development by the W3C. While the spec is still in draft, browser support is already strong (with OKLCH shipping in all major engines since early 2023).

This spec introduces:

  • Native support for oklch() and oklab() color functions
  • Powerful tools like color-mix() for dynamic blending
  • Perceptual color adjustments that are more predictable than RGB or HSL

Conclusion

  • OKLCH offers better control and consistency for modern UIs
  • Tailwind supports it natively, Figma doesn’t (yet)
  • Use tools to convert between RGB and OKLCH
  • Build and document your palette in OKLCH, then translate to RGB for use in Figma
  • Until Figma catches up, designers and developers need to create their own sharing process

© 2025 Caleb Durenberger. All rights reserved.