CSS Function
lch()
The lch() function specifies colors using CIE Lightness, Chroma, and Hue, offering a perceptually uniform color space.
Syntax
lch(L C H / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| L | number | percentage | Yes | CIE Lightness, from 0 (black) to 100 (white) |
| C | number | Yes | Chroma (color intensity), typically 0 to 230 |
| H | number | angle | Yes | Hue angle in degrees (0-360) |
| alpha | number | percentage | No | Opacity, from 0 to 1 |
Examples
Vivid blue
A vivid blue at 50% lightness.
css
color: lch(50 100 260);Muted warm tone
A soft warm beige.
css
background: lch(70 30 50);Tailwind arbitrary value
Using lch in a Tailwind arbitrary value.
html
<div class="text-[lch(50_100_260)]">Blue text</div>Browser Support
✓
Chrome
v111++
✓
Firefox
v113++
✓
Safari
v15.4++
✓
Edge
v111++
✓
Opera
v97++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[lch(50_100_260)]Frequently Asked Questions
What is the difference between lch and oklch?▼
Both are perceptually uniform, but OKLCH improves on LCH by fixing hue shifts in blue tones and providing more even chroma distribution.
When should I use lch?▼
Use lch when you need perceptual uniformity and wide gamut colors but want the CIE LAB-based lightness scale (0-100).
Explore CSS Color Tools
Try our free tools to work with lch() and other CSS color functions.
Open Tools