Saturation
Saturation is the intensity or purity of a color relative to a neutral gray, commonly expressed as a percentage.
Everyday Data Visualization
The HSB color coordinate representing the intensity or vividness of a hue, ranging from gray at zero to the fullest color at the maximum.
- How it is used
- Controls color intensity when encoding values and balancing categorical emphasis in data visualizations.
- How deep it goes
- Defines saturation, contrasts it with hue and lightness, and demonstrates its interactions in HSB and HSL palettes.
- Examples
- Demonstrates gray-to-vivid hue changes, single-hue gradients, and a sunset-derived categorical palette adjusted for balance.
- What you can do after
- Apply it via a color picker to reduce accidental emphasis and construct more legible palette gradients.
Web Components in Action
Saturation is the color attribute describing the intensity or purity of a color.
- How it is used
- Uses saturation as the horizontal control in a color-picker interface.
- How deep it goes
- Explains saturation through coordinate mapping, dragging, boundary clamping, attributes, and gradient overlays.
- Examples
- Uses a draggable saturation-and-brightness picker with horizontal and vertical gradients.
- What you can do after
- Builds a draggable saturation control as a coordinate-picker Web Component.
CSS in Depth, Second Edition
Saturation is a color attribute describing the intensity or amount of chromatic color relative to gray.
- How it is used
- Makes color intensity readable and adjustable within CSS HSL color values.
- 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.
Web Design Playground, Second Edition
Saturation is the degree of purity or intensity of a hue, commonly expressed as a percentage.
- How it is used
- Controls a hue’s purity when specifying and choosing CSS colors.
- How deep it goes
- Defines percentage-based purity, relates it to grayscale, and demonstrates its position in hsl() without color-model internals.
- Examples
- Uses a purple h1 styled with hsl(300, 100%, 25%) and a draggable Color Chooser control.
- What you can do after
- Apply it via CSS hsl() or the Color Chooser to make a selected hue more vivid or grayer.
Read how Web Design Playground, Second Edition explains saturation →
Math for Web Design
Saturation is the perceived intensity or purity of a color relative to a neutral gray of similar lightness.
- How it is used
- Controls color vividness in HSL and helps soften accents when constructing light and dark UI palettes.
- How deep it goes
- Defines saturation geometrically, derives it from RGB with a formula, and applies it in bidirectional JavaScript conversion routines.
- Examples
- Uses purple heading and page-background colors, RGB/HSL conversion functions, and automated light-to-dark palette transforms.
- What you can do after
- Build it from scratch by converting RGB and HSL values, then apply saturation reductions in generated dark-mode palettes.
Design for Developers
Saturation is the intensity or vividness of a color, represented in HSL as a percentage from 0% to 100%.
- How it is used
- Guides palette building, visual hierarchy, contrast, and attention management in interface design.
- How deep it goes
- Defines vividness, demonstrates palette adjustments, and gives UI guidance without detailing color-management algorithms.
- Examples
- Uses a saturated-image comparison and a violet-blue travel landing-page palette with 60% and 10% saturation variants.
- What you can do after
- Apply it via HSL/HSLA values or Adobe Illustrator’s HSB slider to create hierarchy and coordinated palette variations.
Web Design Playground
A color attribute that measures the purity of a hue or how much gray is mixed into it.
- How it is used
- Defines color purity within the HSL method and applies it to CSS color declarations.
- How deep it goes
- Explains gray mixing, percentage limits, and grayscale results, then applies saturation through hsl() without deeper color theory.
- Examples
- Uses a color wheel, gray-mixing scale, and purple h1 heading to demonstrate saturation.
- What you can do after
- Apply saturation through CSS hsl() by choosing a percentage between 0 and 100.
Related concepts
- HSL methodpart of · The HSL method represents colors using hue, saturation, and lightness within a color model or notation system.
- dimensionconfigured by · A dimension is an independent coordinate, measurable axis, or descriptive attribute used to represent, locate, or analyze something.
- contrastproduces · Contrast is the perceptual or measurable difference in visual properties, such as luminance or color, that makes elements distinguishable.
- light/dark modeused by · Light/dark mode is a user-interface appearance configuration that presents predominantly light or dark backgrounds with contrasting foreground content.
- coordinate pickerconfigures · A coordinate picker is a two-dimensional user-interface control for selecting values by dragging along horizontal and vertical axes.
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.