Hue
Hue is the perceived color attribute identifying a color family or position on a color spectrum, independently of saturation and lightness.
Math for Web Design
Hue is the perceptual attribute that identifies a color by its position among color families such as red, green, or blue.
- How it is used
- Drives CSS color selection, palette relationships, and scroll-responsive color changes.
- How deep it goes
- Explains hue as a wheel angle, derives it during RGB/HSL conversion, and contrasts perceptual behavior in OKLCH.
- Examples
- Uses purple headings, complementary and analogous palettes, triadic schemes, and a red-to-green reading progress indicator.
- What you can do after
- Apply it via CSS hsl() and oklch() to create related palettes and dynamic interface colors.
Web Design Playground, Second Edition
Hue is the color attribute corresponding to a position on the color spectrum, commonly represented by an angle or numeric range.
- How it is used
- Uses hue to specify CSS colors and assemble harmonious page color schemes.
- How deep it goes
- Defines hue on the color wheel, then applies its numeric values through hsl() and scheme calculations.
- Examples
- Uses wheel landmarks for red, green, and blue; a purple h1 rule; and complementary red and cyan values.
- What you can do after
- Apply it via CSS hsl() or a Color Scheme Calculator to choose a color and generate related hues.
Read how Web Design Playground, Second Edition explains hue →
CSS in Depth, Second Edition
Hue is a color-space component representing a dominant color family, commonly expressed as an angle around a color wheel.
- How it is used
- Uses hue to identify color families and develop related CSS palette colors.
- How deep it goes
- Defines HSL hue as an angle, explains its color-circle positions and wraparound, then applies nearby OKLCH angles to a palette.
- Examples
- Compares hsl(198deg 73% 46%) with #2097c9 and shows related OKLCH greens near 165deg.
- What you can do after
- Apply it via CSS HSL or OKLCH to choose related colors and refine them in browser DevTools.
Everyday Data Visualization
The HSB color coordinate representing a color's position around a circular color spectrum, conventionally measured from 0 to 360 degrees.
- How it is used
- Uses hue to position colors in HSB and HSL coordinates and to construct continuous data palettes.
- How deep it goes
- Defines hue, works through degree-based adjustments, and relates it to saturation, brightness, lightness, and palette contrast.
- Examples
- Demonstrates the HSB wheel and shifts green from hue 120 toward blue at 150 or yellow at 90.
- What you can do after
- Apply it to adjust color temperature predictably and build more distinguishable sequential gradients.
Design for Developers
Hue is the pure color or base-color quality of a color, distinct from the effects of adding white, black, or gray.
- How it is used
- Uses hue as the starting point for palette building, visual hierarchy, interface emphasis, and accessible color decisions.
- How deep it goes
- Defines hue, distinguishes it from saturation and lightness, applies it through palette decisions, and briefly contrasts HSL with LCH.
- Examples
- Uses red as a pure color, a violet-blue landing-page palette, saturated imagery, and visual comparisons of hue, saturation, and lightness.
- What you can do after
- Apply hue via HSL or HSLA, build related palette colors, emphasize primary actions, and check resulting text contrast.
Web Design Playground
A color dimension that identifies the perceived type of color, such as red or blue, independent of saturation or lightness.
- How it is used
- Guides CSS color selection and harmonious page color schemes through color-wheel positions.
- How deep it goes
- Defines hue numerically, relates it to saturation and luminance, and applies 180-degree complementary-color rules.
- Examples
- Uses red at 0, green at 120, blue at 240, red–cyan complements, and purple h1 text.
- What you can do after
- Apply it via CSS hsl() to choose color families and build complementary main-and-accent schemes.
Related concepts
- HSL methodpart of · The HSL method represents colors using hue, saturation, and lightness within a color model or notation system.
- complementary color relationshipused by · A complementary color relationship pairs hues positioned opposite each other on a color wheel or comparable hue model.
- color wheeluses · A color wheel is a circular arrangement of hues that represents relationships such as adjacency, opposition, and harmony.
- colorpart of · Color is a visual property or representation characterized by attributes such as hue, lightness, saturation, or component values.
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.