hsl Definition & Usages

Colors can be defined in the Hue Saturation Lightness alpha model (HSLa) using the hsla() functional notation. HSLa extends the HSL color model to include the alpha channel, allowing specification of the opacity of a color.

Hue

Values from 0° to 360° inside a chromatic circle, the color wheel.

  • 0° is Red,
  • 60° is Yellow,
  • 120° is Green,
  • 180° is Cyan,
  • 240° is Blue,
  • 300° is Magenta.
0
60
120
180
240
300
360

A nice pure css color wheel

background-color: hsla(0,100%,50%,1);
  background-color: hsla(60,100%,50%,1);
  background-color: hsla(120,100%,50%,1);
  background-color: hsla(180,100%,50%,1);
  background-color: hsla(240,100%,50%,1);
  background-color: hsla(300,100%,50%,1);
  background-color: hsla(360,100%,50%,1);

Complementary colors

Complementary colors are located directly opposite from each other on the color wheel. The high contrast of complementary colors creates a vibrant look especially when used at full saturation. Complementary colors work fine when you want something to stand out.

To find a complementary color, just add 180° to the hue value of your color.

52
232
/* Color */
background-color: hsl(52, 100%, 50%);

/* Complementary Color */
background-color: hsl(232, 100%, 50%);

Triadic colors

A triadic color scheme uses colors that are evenly spaced around the color wheel. Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.

To use a triadic harmony successfully, the colors should be carefully balanced – let one color dominate and use the two others for accent.

To calculate your triadic colors, just add 120° to the hue value of your color then 240°.

52
172
292
/* Color */
background-color: hsl(52, 100%, 50%);

/* Triadic Color 1*/
background-color: hsl(172, 100%, 50%); 

/* Triadic Color 2*/
background-color: hsl(292, 100%, 50%); 

Analogous colors

Analogous color schemes use colors that are next to each other on the color wheel. They usually match well and create serene and comfortable designs.

Analogous color schemes are often found in nature and are harmonious and pleasing to the eye.

To calculate your analogous colors, just add and substract 30° to the hue value of your dominant color.

52
22
82
/* Color */
background-color: hsl(52, 100%, 50%);

/* Triadic Color 1*/
background-color: hsl(22, 100%, 50%); 

/* Triadic Color 2*/
background-color: hsl(82, 100%, 50%); 

Saturation

Values from 0% to 100%.

The saturation of a color is determined by a combination of light intensity and how much it is distributed across the spectrum of different wavelengths.

0
10
20
30
40
50
60
70
80
90
100
background-color: hsla(0,100%,50%,1);
  background-color: hsla(30,100%,50%,1);
  background-color: hsla(60,100%,50%,1);
  background-color: hsla(90,100%,50%,1);
  background-color: hsla(120,100%,50%,1);
  background-color: hsla(150,100%,50%,1);
  background-color: hsla(180,100%,50%,1);
  background-color: hsla(210,100%,50%,1);
  background-color: hsla(240,100%,50%,1);
  background-color: hsla(270,100%,50%,1);
  background-color: hsla(300,100%,50%,1);
  background-color: hsla(330,100%,50%,1);
  background-color: hsla(360,100%,50%,1);

Monochromatic colors

Monochromatic colors are all the colors (tints, tones, and shades) of a single hue. They allow for a greater range of contrasting tones that can be used to attract attention, create focus and support legibility.

To calculate your monochromatic colors, just modify the saturation value of your dominant color.

20
40
60
80
100
/* Color */
background-color: hsl(52, 100%, 50%);

/* Monochromatic Color 1*/
background-color: hsl(52, 80%, 50%); 

/* Monochromatic Color 2*/
background-color: hsl(52, 60%, 50%);

/* Monochromatic Color 3*/
background-color: hsl(52, 40%, 50%);

/* Monochromatic Color 4*/
background-color: hsl(52, 20%, 50%);

Lightness

Values from 0% to 100%. 50% of lightness is the default tint value.

Lightness, also known as value or tone, is a representation of variation in the perception of a color or color space’s brightness. Lightness measures the relative degree of black or white that’s been mixed with a hue. Adding white makes the color lighter (tints) and adding black makes it darker (shades).

0
10
20
30
40
50
60
70
80
90
100
background-color: hsla(52,100%,0%,1);
  background-color: hsla(52,100%,10%,1);
  background-color: hsla(52,100%,20%,1);
  background-color: hsla(52,100%,30%,1);
  background-color: hsla(52,100%,40%,1);
  background-color: hsla(52,100%,50%,1);
  background-color: hsla(52,100%,60%,1);
  background-color: hsla(52,100%,70%,1);
  background-color: hsla(52,100%,80%,1);
  background-color: hsla(52,100%,90%,1);
  background-color: hsla(52,100%,100%,1);

Alpha

Values from 0 to 1.

1
.75
.5
.25
.05

hsl Pros & Cons

WIP… more to come

Leave a Reply