CSS lch() Function

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

Introduced in CSS Color Module Level 4, lch() shares the exact same perceptually uniform color space as the lab() function, but represents colors using a familiar wheel-based model (similar to HSL) that is far more intuitive for developers and designers to pick and manipulate.

Syntax

The lch() 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 100 or a percentage from 0% to 100%. 0% represents black, and 100% represents diffuse white.
C (Chroma): A number or percentage representing the saturation or color purity. The minimum value is 0 (completely neutral gray). In theory, chroma is unbounded; in practice for display screens, it typically ranges from 0 to around 150 (or 0% to 100%, where 100% corresponds to 150).
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 pinkish-red, 90deg toward yellow, 180deg toward bluish-green, and 270deg 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 lch():

Using `lch()` in Style Sheets

The CSS specifications state that you can use lch() wherever a CSS <color> value is accepted. For example, you can use lch() 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:

`lch()` vs `hsl()`

While lch() and hsl() look similar because they both use Lightness and Hue, lch() solves major flaws found in hsl():

Feature	`hsl()`	`lch()`
Perceptual Lightness	Flawed: Yellow and blue both have 50% lightness, but yellow looks far brighter.	Uniform: 50% lightness in LCH has the exact same perceived brightness across every hue.
Color Gamut	Restricted to the 1990s sRGB color gamut.	Wide-gamut: Can display high-saturation colors on modern P3 displays.
Color Saturation/Chroma	Saturation is a percentage of sRGB gamut edge (varies wildly in intensity per hue).	Chroma is an absolute measure of perceived color purity.

`lch()` vs `lab()`

lch() and lab() use the exact same underlying CIELAB color space. The only difference is how the color coordinates are described:

lab() uses Cartesian coordinates: You specify the color's position on two opposing color axes: a (green-red) and b (blue-yellow).
lch() uses Polar coordinates: It converts those axes into a distance from the center (Chroma) and an angle on the circle (Hue).

Related Color Functions

lab(): The rectangular/Cartesian counterpart to lch(), using L (Lightness), a (green-to-red), and b (blue-to-yellow).
oklch(): A modern alternative to lch() based on Oklab. It improves upon lch() by fixing hue shifts in the blue spectrum.
oklab(): The Cartesian counterpart to oklch().