Color scale
A color scale is a mapping from data values or categories to colors, often arranged as a continuous gradient or discrete set for visual representation.
CSS in Depth, Second Edition
A CSS-generated image in which colors transition across a region according to specified directions and color stops.
- How it is used
- Uses generated color transitions for backgrounds, depth effects, masks, and text-wrapping shapes.
- How deep it goes
- Works through gradient directions, stops, repetition, interpolation, and conic controls, including visual consequences and a browser-support fallback.
- Examples
- Builds a blue button, striped bar, fading mask, and diagonal image edge with aligned text flow.
- What you can do after
- Build it from scratch to create fades and stripes, then reuse gradients for depth, masking, or aligned text wrapping.
Read how CSS in Depth, Second Edition explains color scale →
D3.js in Action, Third Edition
A color gradient is a gradual transition between colors across a graphical region or element.
- How it is used
- Maps categorical or numerical data to colors in charts, hierarchical diagrams, and geographic visualizations.
- How deep it goes
- Explains ordinal and sequential domains, implementation, outlier handling, and application to SVG marks.
- Examples
- Uses donut charts, language-family circle packs, and Nobel-laureate choropleth maps with tooltips.
- What you can do after
- Build it from scratch with D3 by declaring domains, choosing ranges or interpolators, and applying colors to marks.
Read how D3.js in Action, Third Edition explains color scale →
Web Components in Action
A gradient is a visual transition in color or opacity across a spatial region.
- How it is used
- Builds a coordinate picker that maps pointer position onto saturation and brightness variations.
- How deep it goes
- Explains layered CSS gradients and pointer positioning, without descending into color-model theory.
- Examples
- Uses white and black overlay gradients above a red base in a draggable coordinate-picker demo.
- What you can do after
- Apply it via CSS linear-gradient and implement it in a draggable coordinate-picker component.
Web Design Playground
A smooth transition between two or more colors across a visual area, including linear and radial forms in CSS.
- How it is used
- Adds visual interest to element backgrounds with browser-generated transitions between colors.
- How deep it goes
- Explains linear directions and color stops, then introduces radial-rule parts and legacy fallbacks without deeper rendering internals.
- Examples
- Uses yellow-to-blue, red-white-blue, and corner-to-corner color exercises, plus an interactive Gradient Construction Kit.
- What you can do after
- Build it from scratch with linear-gradient() or radial-gradient(), custom directions and stops, and a fallback background color.
Everyday Data Visualization
A color palette that assigns colors along a continuous progression to represent ordered values in continuous data.
- How it is used
- Maps continuous data values to color so viewers perceive both their order and relative magnitude.
- How deep it goes
- Defines color scales through paths in color space and explains sequential design, but does not detail implementation beyond generated palettes.
- Examples
- Shows HSL ramps, single- and two-hue gradients, alternate color spaces, and sequential-versus-diverging legends.
- What you can do after
- Apply it via D3 to map continuous values with sequential or diverging palettes while checking contrast and accessibility.
Related concepts
- rotationconfigured by · A rotation is a geometric transformation that turns points or objects about a fixed center, origin, or axis through an angle while preserving distances and angles.
- radial-gradient functionincludes · The CSS radial-gradient() function creates an image whose colors transition outward from a central point or shape according to specified color stops.
- color spaceuses · A color space is a defined coordinate system for representing colors using specified components, dimensions, or numerical values.
- conic gradientincludes · A CSS gradient image whose colors transition around a center point according to specified color stops and angles.
- choropleth mapused by · A choropleth map is a map visualization that represents data values for geographic regions using varying colors or shades.
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.