liveBook · Manning

Saturation

As explained in CSS in Depth, Second Edition

Saturation is a color attribute describing the intensity or amount of chromatic color relative to gray.

Saturation is the intensity of a color. In CSS HSL notation, it is the second value and is written as a percentage: 100% gives a vivid color, while 0% removes the color and produces a shade of gray. section 11.2.2

Reading an HSL color

The color hsl(198deg 73% 46%) has a cyan-blue hue, fairly high saturation, and lightness near 50%. It appears as a rich blue, a little darker than sky blue, and is equivalent to #2097c9. Unlike the hex value, the HSL value makes its intensity easier to identify. section 11.2.2

Read saturation alongside hue and lightness: hue identifies the position on the color circle, while lightness controls how light or dark the result is. HSL colors are limited to the sRGB gamut. section 11.2.2

How CSS in Depth, Second Edition covers it

How deep it goes
Defines the percentage endpoints and interprets one color example; stops short of a saturation calculation.
Examples
Interprets hsl(198deg 73% 46%) and compares it with the equivalent hex value #2097c9.
What you can do after
Apply it via CSS HSL notation to read a color’s intensity and distinguish vivid color from gray.
How it connects
Relates saturation to hue, lightness, hex color notation, and the sRGB gamut.

Also explained in

Compare how 7 books explain saturation →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.