CSS: HSL Color

By Xah Lee. Date: . Last updated: .

Random Color Generator

(click the button to see a random color)

HSL Color Syntax

hsl(hue, saturation%, lightness%)


span.xyz {color:hsl( 0, 100%, 50%)}

HSL Color Examples

Changing Hue

Changing Saturation

Changing Lightness

Lightness goes from black to white.

CSS Color

  1. CSS Color Syntax
  2. CSS Color Names
  3. CSS: HSL Color
  4. CSS: Opacity
  5. CSS: Linear Gradient
  6. CSS: Radial Gradient
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog