OKLCH
OKLCH is a perceptually uniform cylindrical color space representing color by lightness, chroma, and hue.
CSS in Depth, Second Edition
OKLCH is a perceptual cylindrical color model whose coordinates represent lightness, chroma, and hue.
- How it is used
- Uses OKLCH to inspect, refine, and extend a CSS palette translated from a page mockup.
- How deep it goes
- Works through DevTools conversion and palette adjustments, but does not develop color-space mathematics.
- Examples
- Shows converted green and gray custom properties, a derived active-link color, and DevTools color-picker adjustments.
- What you can do after
- Apply it via Chrome DevTools and CSS `oklch()` to convert existing colors and test additions to a palette.
Math for Web Design
OKLCH is a perceptually uniform color space that represents color using lightness, chroma, and hue.
- How it is used
- Builds visually even CSS color scales and supports perceptually consistent dark-mode palette transformations.
- How deep it goes
- Defines all three coordinates, their practical ranges, CSS syntax, scale variations, and lightness inversion without deriving color-space conversion algorithms.
- Examples
- Uses heading colors, fixed-hue lightness and chroma scales, and inverted-lightness dark-mode colors.
- What you can do after
- Apply it via CSS oklch() to create controlled color scales and derive perceptually consistent dark-mode variants.
Related concepts
- HSL methodalternative to · The HSL method represents colors using hue, saturation, and lightness within a color model or notation system.
- color paletteused by · A selected set of colors intended for coordinated use in visual design or representation.
- sRGBcontrasts with · sRGB is a standardized RGB color space with defined primaries, white point, and transfer characteristics for consistent digital color representation.
- polar coordinatekind of · A polar coordinate specifies a point in two-dimensional space by its distance from an origin and its angle relative to a reference direction.
- LAB color spaceuses · The CIELAB color space is a device-independent, approximately perceptually uniform model representing color by lightness and opponent-color coordinates.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.