CSS oklch() Function

The CSS oklch() function defines a color in the Oklab color space using cylindrical coordinates: Lightness, Chroma, and Hue.

Introduced in CSS Color Module Level 4, oklch() is widely considered the most practical and intuitive modern color format for web design. It pairs the familiar wheel-based controls of hsl() with true perceptual uniformity and access to wide-gamut screens (like Display P3), while eliminating the infamous “blue-to-purple shift” problem found in lch().

Syntax

The oklch() function accepts three space-separated values representing Lightness, Chroma, and Hue, plus an optional alpha transparency channel:

Parameters

• L (Lightness): A number from 0 to 1 (e.g. 0.7) or a percentage from 0% to 100%. 0 represents pure black, and 1 (or 100%) represents diffuse white.
• C (Chroma): A number representing the color purity or saturation, starting at 0 (neutral gray). In theory, chroma is unbounded; in practice for modern wide-gamut displays (P3 and sRGB), values typically range between 0 and roughly 0.37 (or percentages where 100% represents 0.4).
• H (Hue): The hue angle on the color circle. Can be written as a unitless number (interpreted as degrees) or with an explicit angle unit such as deg, grad, rad, or turn. 0deg points toward pink/red, 90deg toward yellow, 142deg toward green, and 264deg toward blue.
• A (Alpha, optional): Preceded by a forward slash (/), specifying the transparency as a decimal between 0 and 1 (e.g. 0.5) or a percentage between 0% and 100%.

Basic Examples

Here are some basic color examples specified using oklch():

Using oklch() in Style Sheets

The CSS specifications state that you can use oklch() wherever a CSS <color> value is accepted. For example, you can use oklch() to set the colors of text, backgrounds, and borders:

Specifying Transparency

An alpha channel can be added after a forward slash (/) to create semi-transparent colors:

Why OKLCH is Ideal for Design Systems

OKLCH is rapidly becoming the preferred color format in modern CSS frameworks and design systems for several reasons:

• Predictable Contrast: In HSL, a color with 50% lightness looks blindingly bright in yellow (hsl(60 100% 50%)) but very dark in blue (hsl(240 100% 50%)). In OKLCH, 0.7 lightness has identical perceived brightness regardless of the hue angle chosen, making accessible contrast ratios far easier to maintain.
• No Blue-Shift Distortion: Unlike CIELAB/CIELCH, which inadvertently bends blues toward purple as saturation increases, OKLCH maintains straight hue lines throughout the color space.
• Smooth Color Palettes: You can systematically generate entire harmonic palettes, hover states, and dark mode themes simply by altering lightness or chroma values with math or CSS custom properties.
• Wide Color Gamuts: OKLCH can represent high-chroma colors on modern P3 displays that simply cannot be represented within traditional sRGB/hex color spaces.

You can experiment with interactive OKLCH color selection, palette generation, and wide-gamut comparisons using our OKLCH Color Picker.

oklch() vs hsl() vs lch()

Here is how oklch() compares to traditional hsl() and earlier lch() models:

Related Color Functions

• oklab(): The Cartesian counterpart to oklch() (using Lightness, a-axis, and b-axis).
• lch(): The cylindrical counterpart to CIELAB.
• lab(): The rectangular CIELAB color model.
• hsl(): The traditional cylindrical sRGB model.