HSL Color System

HSL with Variables

Store hue, saturation, and lightness separately to generate color families from one hue.

Example

:root { --h: 220; --s: 90%;
  --primary: hsl(var(--h), var(--s), 50%);
  --light:   hsl(var(--h), var(--s), 85%);
  --dark:    hsl(var(--h), var(--s), 30%); }
.green { --h: 140; }

CSS

Full Editor

Pro Tip

Change --h to re-theme the entire site with a harmonious palette.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned