OKLCH: Modern Color Science for UX, UI & Product Designers
Discover how OKLCH color space advances beyond traditional RGB, HSL, and HEX — and how AVA Palettes brings perceptual color science into your Figma workflow, free and in beta.
TL;DR for busy designers
- RGB, HEX, and HSL are technical models optimized for hardware and code — not for how humans perceive color differences.
- OKLCH is a perceptually uniform color space designed so that equal numeric changes more closely correspond to equal perceived changes (though this uniformity is not perfect, especially in deep blues and purples).
- AVA Palettes (free and in beta) brings OKLCH color editing to Figma, enabling more predictable ramps, accessible contrast, and scalable color systems.
The Hidden Problem with Digital Color
Most design tools use RGB, HEX, or HSL to define and edit colors. While essential for digital implementation and legacy workflows, these models do not accurately match how our eyes perceive differences between colors, especially when building color ramps or palettes.
Why does this matter?
- Color ramps may look uneven or “jump” unexpectedly.
- Accessibility contrast can be hard to predict and maintain.
- Designers spend time tweaking and manually checking palettes.
Why OKLCH Changes the Game
What is OKLCH?
OKLCH is mathematically constructed as a cylindrical transformation of Oklab, which itself is optimized for perceptual uniformity within the sRGB color gamut.
OKLCH stands for:
- OK — Derived from Oklab, a perceptual Lab space for sRGB developed by Björn Ottosson
- L — Lightness (perceived brightness)
- C — Chroma (color intensity)
- H — Hue (angle on the color wheel)
Perceptual Uniformity: In OKLCH, equal numeric steps in Lightness, Chroma, or Hue generally produce visually even changes for most colors—a major improvement over HSL or RGB. Some non-uniformities remain, especially in high-chroma blues and at the edge of the sRGB gamut.
Why does perceptual uniformity matter?
- Predictable ramps — Adjust lightness without distorting hue or saturation.
- Consistent theming — Build palettes that behave reliably across light/dark modes.
- Easier accessibility — Maintaining contrast is simpler when color changes are visually even.
- Faster workflow — Less manual tweaking means faster, more systematic palette design.
This allows for more predictable color ramps, consistent theming, easier accessibility, and a faster design workflow."
OKLCH vs. Other Perceptual Models
The table below compares color models from technical (RGB/HEX, HSL) to modern perceptual (OKLCH, LAB, LCH, CAM02/16) across key design criteria like uniformity, intuitiveness, accessibility, and browser support.
Perceptual models—especially OKLCH—make it easier to build consistent, accessible palettes because they better reflect human color perception. While HSL is more intuitive than RGB, it still lacks perceptual accuracy. Advanced models like LAB, LCH, and CAM02/16 offer high accuracy but are less practical for web design.
Overall, OKLCH stands out by balancing scientific accuracy, usability, and strong support in modern design tools.
Color Model Comparison
| Attribute | OKLCH | HSL | RGB/HEX | LAB | LCH | CAM02/16 |
|---|---|---|---|---|---|---|
| Type | Perceptual | Technical | Technical | Perceptual | Perceptual | Perceptual |
| Perceptual Uniformity | ✅ Yes | ❌ No | ❌ No | ⚠️ Partial | ⚠️ Partial | ✅ Yes |
| Intuitive for Designers | ✅ Yes | ⚠️ Partial | ❌ No | ⚠️ Partial | ⚠️ Partial | ❌ No |
| Usable for Accessibility | ✅ Yes | ⚠️ Partial | ❌ No | ⚠️ Partial | ⚠️ Partial | ✅ Yes |
| Browser/Tool Support | ✅ Modern Browsers | ✅ Yes | ✅ Yes | ⚠️ Partial | ⚠️ Partial | ❌ No |
| Typical Use | Modern design, CSS | Design, CSS | Implementation | Image processing | Advanced design | Research, imaging |
| Notes | Perceptual, sRGB-optimized | More intuitive than RGB, but flawed | Channel-based, not perceptual; HEX is just a notation for RGB | Not optimized for sRGB | Cylindrical LAB, not sRGB-optimized | Very complex, not in CSS; advanced research models |
Key Takeaway: OKLCH strikes a balance between scientific accuracy and real-world usability. Its structure makes it intuitive for designers while maintaining perceptual fidelity for users. As of 2024, OKLCH is supported in all major browsers (Chrome, Safari, Firefox, Edge), but fallback may be required in legacy environments.
RGB & HEX
RGB and HEX are technical color models that represent colors as combinations of red, green, and blue values. They are precise for computers and necessary for implementation, but are not perceptually uniform. This can make it difficult to create visually even ramps or accessible palettes without manual checking or correction.
HSL & HSV
HSL and HSV were designed to be more intuitive by separating hue, saturation, and lightness/value. However, they are still based on RGB math, so their lightness and saturation are not perceptually uniform, so visually even steps in HSL often do not look even, leading to unpredictable results and accessibility challenges.
CIE LAB & LCH
CIE LAB and LCH are perceptual color models that improve on RGB and HSL by better matching human vision. However, they are not specifically optimized for the sRGB color space used in web design, and their chroma values can produce colors that fall outside the displayable sRGB gamut.
CAM02 & CAM16
CAM02 and CAM16 are advanced color appearance models developed by the CIE to closely match human vision under a variety of lighting conditions. However, their complexity and lack of browser/tool support make them impractical for day-to-day design work.
How Does OKLCH Work in Practice?
Visual Example: HSL Ramp vs. OKLCH Ramp
Note: For a truly accurate comparison, colors should be compared under consistent viewing conditions and with color-managed software.
| HSL Ramp | OKLCH Ramp | |
|---|---|---|
| Lightness steps | Inconsistent, sometimes abrupt | Smoother, more perceptually even transitions |
| Hue shift | Can feel unpredictable | Hue stays more consistent across brightness levels |
| Accessibility | Contrast varies unexpectedly | Contrast is easier to maintain |
Fact: OKLCH isn’t perfect — for some high-chroma blues and purples, perceptual uniformity is still being improved (see Oklab limitations).
Why Not Just Use LAB, LCH, or CAM02?
CIE LAB & LCH: These models, defined by the International Commission on Illumination (CIE), more accurately model human vision than RGB and HSL, but are not specifically optimized for sRGB, and may produce colors outside of sRGB’s displayable range.
CAM02/16: The most perceptually accurate color appearance models — but computationally complex and not supported in CSS or mainstream design tools.
OKLCH was created to provide a perceptual color space that is easy to use, optimized for sRGB, and practical for modern CSS and UI workflows.
Does OKLCH Replace RGB or HEX?
No. RGB and HEX remain essential for technical implementation and browser/device compatibility. Think of OKLCH as a tool for designing, editing, and planning color palettes — then convert to RGB/HEX for export and delivery.
Many modern CSS tools and preprocessors will convert OKLCH to sRGB (RGB/HEX) for you automatically.
AVA Palettes: OKLCH in Figma (Free & in Beta)
AVA Palettes brings the power of OKLCH to your Figma workflow:
- Instantly generate, edit, and preview color ramps using OKLCH.
- Maintain accessible contrast and predictable themes, faster.
- Export palettes in all standard formats for dev handoff.
Try AVA Palettes for free in Figma and see how perceptual color ramps improve your design system.