Chroma controls how vivid a color is in CSS `lch()` and `oklch()`. These functions take lightness, chroma, and hue, in that order: `oklch(64% 0.12 233deg)` has 64% lightness and 0.12 chroma. At chroma 0, the color is gray. Chroma is similar to HSL saturation, but its numbers use a different scale. section 11.2.2
Chroma is theoretically unbounded, but an OKLCH value does not exceed 0.5 in practical use, or 0.33 within the sRGB gamut. LCH uses a different range, from 0 to 230; do not carry a chroma number from one notation to the other unchanged. section 11.2.2
Adjust a related color
Suppose a palette already has several greens with nearly the same hue. To try a lighter one, start with `oklch(85% 0.12 165deg)`, then adjust lightness and chroma in browser DevTools until it looks right. A gray can also have a little chroma: `oklch(64% 0.02 248deg)` is not a pure gray, while `oklch(98% 0 0deg)` is. section 11.3.1
Listing 11.6 Converting hex colors to OKLCH
@layer theme {
:root {
--brand-green: oklch(45% 0.09 165.4deg); #1
--dark-green: oklch(59% 0.12 164.1deg); #1
--medium-green: oklch(74% 0.15 166.4deg); #1
--text-color: oklch(26% 0.01 0deg); #2
--gray: oklch(64% 0.02 248deg); #2
--light-gray: oklch(96% 0.003 248deg); #2
--extra-light-gray: oklch(98% 0 0deg);
--white: oklch(100% 0 0deg);
}
}
The converted palette makes chroma values visible alongside lightness and hue: its greens vary in chroma, and several grays retain a small amount. section 11.3.1
