CSS: HSL Color

By Xah Lee. Date: . Last updated: .

HSL Color Generator


Hue:
Saturation:
Lightness:

HSL Color Syntax

hsl(hue, saturation%, lightness%)

Example:

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

HSL Color Examples

  • hsl(0 , 100%, 50%)
  • hsl(20 , 100%, 50%)
  • hsl(40 , 100%, 50%)
  • hsl(60 , 100%, 50%)
  • hsl(60 , 100%, 50%)
  • hsl(80 , 100%, 50%)
  • hsl(100 , 100%, 50%)
  • hsl(120 , 100%, 50%)
  • hsl(140 , 100%, 50%)
  • hsl(160 , 100%, 50%)
  • hsl(180 , 100%, 50%)
  • hsl(200 , 100%, 50%)
  • hsl(220 , 100%, 50%)
  • hsl(240 , 100%, 50%)
  • hsl(260 , 100%, 50%)
  • hsl(280 , 100%, 50%)
  • hsl(300 , 100%, 50%)
  • hsl(320 , 100%, 50%)
  • hsl(340 , 100%, 50%)
  • hsl(0 , 0%, 50%)
  • hsl(0 , 10%, 50%)
  • hsl(0 , 20%, 50%)
  • hsl(0 , 30%, 50%)
  • hsl(0 , 40%, 50%)
  • hsl(0 , 50%, 50%)
  • hsl(0 , 60%, 50%)
  • hsl(0 , 70%, 50%)
  • hsl(0 , 80%, 50%)
  • hsl(0 , 90%, 50%)
  • hsl(0 , 100%, 50%)
  • hsl(0 , 100%, 0%)
  • hsl(0 , 100%, 10%)
  • hsl(0 , 100%, 20%)
  • hsl(0 , 100%, 30%)
  • hsl(0 , 100%, 40%)
  • hsl(0 , 100%, 50%)
  • hsl(0 , 100%, 60%)
  • hsl(0 , 100%, 70%)
  • hsl(0 , 100%, 80%)
  • hsl(0 , 100%, 90%)
  • hsl(0 , 100%, 100%)

CSS Color