HSL method

As explained in CSS in Depth, Second Edition

The HSL color space represents colors using hue, saturation, and lightness.

HSL represents color through hue, saturation, and lightness. Its cylindrical arrangement places hue around a circular axis, making color changes easier to anticipate than changing RGB channels directly. section 11.2.1

Use HSL when you need to reason about color changes at a glance:

• Adjust lightness to make a color lighter or darker without thinking in separate red, green, and blue channel changes. section 11.2.1
• Rotate hue to explore related colors through a circular color arrangement. section 11.2.1
• Prefer HSL when browser compatibility is more important than using newer wide-gamut color notations. section 11.3

Convert a color with DevTools

Open DevTools with F12, select the html element in Elements, and find a color in the Styles panel. In Chrome, Shift-click its color swatch and choose HSL from the notation menu; Firefox and Safari cycle notations when you click the swatch. section 11.3

Figure 11.11 HSL polar color space

Inspect the polar model that places hue around a central axis. section 11.2.1

How CSS in Depth, Second Edition covers it

How deep it goes

Defines HSL’s cylindrical model and practical rationale, but stops short of detailed CSS notation or implementation syntax.

Examples

Uses polar-space figures, browser DevTools notation conversion, and an interactive color-picker workflow.

What you can do after

Apply it via browser DevTools to convert existing colors into HSL notation when compatibility matters.

How it connects

Connects HSL with RGB, color gamut, CSS color notation, browser compatibility, and newer OKLCH and OKLAB spaces.

liveBookmanning.com

Read CSS in Depth, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Web Design PlaygroundA color specification method that represents colors by hue, saturation, and luminance values.
• 

  liveBookmanning.com
  Web Design Playground, Second EditionThe hsl() function is a CSS color function that specifies a color using hue, saturation, and lightness components.
• 

  liveBookmanning.com
  Math for Web DesignThe HSL color model represents colors using hue, saturation, and lightness components in a cylindrical coordinate system.

Compare how 4 books explain HSL method →

Related concepts

• brightnesshas part · Brightness is the perceived or measured intensity or lightness of a color, image, visual stimulus, or light source.
• saturationhas part · Saturation is the intensity or purity of a color relative to a neutral gray, commonly expressed as a percentage.
• huehas part · Hue is the perceived color attribute identifying a color family or position on a color spectrum, independently of saturation and lightness.
• OKLCHalternative to · OKLCH is a perceptually uniform cylindrical color space representing color by lightness, chroma, and hue.
• color spacekind of · A color space is a defined coordinate system for representing colors using specified components, dimensions, or numerical values.

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.