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

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc