Chroma
Chroma is a color attribute representing perceived colorfulness or intensity relative to a similarly illuminated neutral gray.
CSS in Depth, Second Edition
Chroma is a color-space component representing the perceived colorfulness or distance from a neutral axis.
- How it is used
- Uses chroma to adjust color vividness and find related CSS palette colors.
- How deep it goes
- Defines zero chroma, gives practical OKLCH and LCH ranges, and stops short of color-space mathematics.
- Examples
- Shows an OKLCH color, a lighter green candidate, and palette grays with zero or slight chroma.
- What you can do after
- Apply it via CSS `oklch()` and browser DevTools to tune vividness in a related color palette.
Math for Web Design
Chroma is a color attribute representing the perceived intensity or saturation relative to a similarly illuminated gray.
- How it is used
- Controls color vividness when building OKLCH scales and transforming light palettes for dark mode.
- How deep it goes
- Defines chroma perceptually, demonstrates CSS adjustments, and derives RGB chroma as a max-minus-min calculation.
- Examples
- Demonstrates fixed-hue CSS scales at chroma 0.05, 0.2, and 0.4, plus RGB-to-HSL conversion logic.
- What you can do after
- Apply it via CSS oklch() to tune vividness and build related palette colors.
Related concepts
- saturationmeasures · Saturation is the intensity or purity of a color relative to a neutral gray, commonly expressed as a percentage.
- OKLCHpart of · OKLCH is a perceptually uniform cylindrical color space representing color by lightness, chroma, and hue.
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.