Color
Color is a visual property or representation characterized by attributes such as hue, lightness, saturation, or component values.
Everyday Data Visualization
Color is a visual encoding that communicates distinctions or values through differences in hue, lightness, or saturation.
- How it is used
- Directs attention to important values and distinguishes qualitative categories in visualizations.
- How deep it goes
- Explains perceptual use, palette types, accessibility, typography, and crowded-category trade-offs without detailing color-space mechanics.
- Examples
- Uses a red-highlighted London bike-rental crosstab, a monochromatic dashboard, and an accent-colored focus series among many categories.
- What you can do after
- Apply it by choosing purposeful palettes, emphasizing focal values, and pairing color with redundant accessible cues.
Design for Developers
Color is the visual attribute of elements defined by their perceived hue, lightness, and saturation.
- How it is used
- Guides palette choices that create visual hierarchy, mood, attention, and usable web interfaces.
- How deep it goes
- Explains color-wheel relationships, palette construction, contrast, and accessible application without implementation-level detail.
- Examples
- Uses a checker-shadow illusion, interface palette reconstruction, airport wayfinding, elevator buttons, and warning messages.
- What you can do after
- Apply it to build balanced palettes, select color relationships, test readable contrast, and add non-color status cues.
Data Storytelling with Altair and AI
Color is a visual attribute describing the hues or tonal properties represented in an image or visualization.
- How it is used
- Uses color to establish visual context, guide attention, distinguish data relationships, and shape emotional tone in data stories.
- How deep it goes
- Defines hue, saturation, brightness, palette types, and narrative emphasis, but defers detailed color theory to specialist references.
- Examples
- Uses population-growth charts, sequential/diverging/qualitative palettes, and a salmon chart with dark red emphasis and a focused overlay.
- What you can do after
- Apply it via Altair by selecting palettes, setting local chart colors, and emphasizing filtered data with layered marks.
Read how Data Storytelling with Altair and AI explains color →
Tiny CSS Projects
Color is a visual presentation property that defines the hues and related color values displayed in a web page.
- How it is used
- Shapes readable interfaces and visual hierarchy across cards, profiles, forms, images, links, labels, and buttons.
- How deep it goes
- Demonstrates color declarations incrementally in complete UI rules, including named, custom-property, rgb(), rgba(), and hexadecimal values.
- Examples
- Uses profile cards, virtual credit cards, image summary cards, form labels, legends, links, and submit buttons.
- What you can do after
- Apply it via CSS to style text, backgrounds, controls, overlays, calls to action, and focus states while checking contrast.
Related concepts
- color paletteused by · A selected set of colors intended for coordinated use in visual design or representation.
- CSSused by · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
- warm colorincludes · A warm color is a color commonly associated with visual warmth or energy, typically including reds, oranges, and yellows.
- hexadecimal color notationused by · Hexadecimal color notation is a textual representation of color components using hexadecimal digits, typically encoding red, green, blue, and optionally alpha.
- tintincludes · A tint is a color produced by lightening a hue, typically by adding white or increasing its lightness.
- cool colorincludes · A cool color is a color perceived as cool or calming, typically associated with blues, greens, and purples.
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.