Skip to content
Search

OKLCH

lastmod 2025-08-26created 2022-10-284 edits

About

  • OKLCH is a new way to declare colors, added in the CSS Color Module 4 spec
    • oklch(45% 0.26 264 / 50%) : (Lightness Chroma Hue / Opacity)
  • Advantages of OKLCH
    • Easier to read than rgb/hex. Similar to hsl but encodes lightness better
    • Unlike hsl, uses perceptual lightness, so contrast is predictable
    • Can be used for wide-gamut P3 colors (when displaying more colors than an sRGB monitor, as on Apple devices)

What are OKLCH colors

  • What are OKLCH colors | GeekNews
  • OKLCH is a modern color model tuned to human visual perception: a perceptually uniform color model in which changes in lightness, chroma, and hue between colors feel even
  • Its structure consists of Lightness, Chroma, and Hue, and it allows more consistent color palettes than older models
  • Keeping the same lightness and chroma while changing only Hue produces an even palette, which is useful for UI design
  • Offers more predictable lightness changes and even gradients than sRGB/HSL, but can produce unintended colors in some cases
  • Allows a wider range of colors on modern displays such as Display-P3, is supported in modern browsers as CSS Color 4, and offers sRGB fallback handling, so it is gradually becoming a web standard

Introduction to the OKLCH color model

  • OKLCH is a modern color model developed for perceptual uniformity (perceptually uniform)
  • The model behaves close to how people actually perceive color, making color handling much easier in digital design and front-end development

Basic concepts of color models

  • A color model is a system for defining and representing colors mathematically
  • Examples of commonly used models: RGB, HSL, LCH, OKLCH, LAB, XYZ
  • Each model determines how easy it is to represent and manipulate colors

Examples of color notation

  • oklch(0.55 0.18 260)
  • hsl(220 100% 50%)
  • rgb(0, 128, 255)
  • lch(60% 60 260)
  • lab(50 -10 -50)
  • color(xyz 0.18 0.19 0.6)
  • #1E90FF

Gamut (color space range)

  • Gamut means the full range of colors a color model can represent
  • Typical gamuts: sRGB (web default), Display-P3 (supported on modern devices)
  • Besides the gamut range, a color space has various properties such as a white point and transfer function

OKLCH structure

Both OKLCH and LCH consist of three values: Lightness, Chroma, and Hue. OKLCH is based on the OKLab color space.

  • Lightness : expressed as 0~1 or 0%~100%, guarantees even changes in lightness
  • Chroma : the intensity of the color, similar to Saturation in HSL
  • Hue : expresses the color as an angle of 0~360 degrees

Advantages and uses of OKLCH

  • Consistent lightness
    • In OKLCH, if you specify colors with the same lightness and chroma values and only a different hue, all colors are perceived as having similar lightness
    • With conventional sRGB or HSL, lightness or saturation can look inconsistent from color to color
    • So OKLCH makes it easy to build perceptually uniform color palettes
  • Predictable lightness steps
    • In OKLCH, changing lightness lets you create various color steps without changing hue or chroma
    • In HSL and similar models, a drift occurs where the hue changes as lightness changes
    • In OKLCH, adjusting only lightness is enough to create consistent lightness steps
  • How gradients are handled
    • In sRGB, interpolation is between red, green, and blue values, so the midpoint gets muddy or lightness changes sharply
    • OKLCH interpolates along the Lightness, Chroma, and Hue axes, giving more natural gradients
    • However, because Hue is circular, unexpected color shifts can occur
    • To prevent this, you can interpolate linearly in OKLab for more predictable results

Color space support

  • sRGB cannot cover part of the wide color space that modern displays can show
  • Using OKLCH allows more vivid colors on devices that support wide gamuts such as Display-P3
  • On devices that only support sRGB, colors are mapped to the closest possible color

Maximum Chroma value

  • OKLCH can mathematically specify colors outside the range a real screen can display
  • For example, a chroma value that is too large, such as oklch(0.7 0.4 40), cannot actually be displayed and is clipped to a nearby color
  • It is important to understand the concept of maximum chroma and set appropriate values according to hue, lightness, and the chosen color space (sRGB, Display-P3)

Browser support and fallback

  • OKLCH colors were introduced in CSS Color Module Level 4 and are supported by most modern browsers
  • They may not be supported in older browsers, so you can set fallback values with the @supports CSS directive

See also

Favorite site

author Zer0 sitemap