CSS: HSL Color

By Xah Lee. Date: . Last updated: .

HSL Color Generator


Hue:

Saturation:

Lightness:

(Saturation begins at 5. lightness from 5 to 95. So that colors don't become black or white)

HSL Color Syntax

hsl(hue, saturation%, lightness%)

Example:

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

HSL Color Examples

Like it? Help me by telling 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. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog