CSS colors: HSL & hex
This course explains how CSS describes color on screens that mix red, green and blue light. It covers hex notation and its shorthand and alpha forms, rgb() with decimal numbers or percentages, and hsl() with hue, saturation and lightness. It separates alpha transparency inside a color from the opacity property on a whole element. It also covers named color keywords and currentColor, then builds a themed button and badge where HSL and custom properties produce related shades by changing one value at a time.
What you'll learn
- ✓How additive red, green and blue light mixing underlies every CSS color
- ✓Reading and writing hex colors, including 3, 4 and 8 digit forms
- ✓Using rgb() and hsl() with modern and legacy syntax and alpha
- ✓The difference between alpha in a color and the opacity property
- ✓Named color keywords and currentColor as a single source of truth
- ✓Building related color states with HSL and custom properties
Why color needs a format
Say the word "blue" to another person and you're both picturing something close enough, sky, denim, a favorite mug. Say it to a browser and it means nothing until it's translated into numbers a screen can reproduce. Every pixel on every screen you own is built from tiny red, green, and blue…
Read the full lesson free →Curriculum
7 lessonsWhy color needs a format
Screens mix red, green and blue light additively, and CSS notations are different ways to describe that mix.
Hex color notation
The #RRGGBB format, gray from equal pairs, three-digit shorthand, alpha digits and case-insensitive hex digits.
rgb() and rgba()
rgb() writes red, green and blue as decimal numbers or percentages, with an optional alpha value.
hsl() and hsla()
hsl() describes color by hue angle, saturation and lightness, so each axis can change on its own.
Opacity and alpha transparency
Alpha makes one color translucent, while opacity fades the whole element, including its text and children.
Color keywords and currentColor
Named keywords stand for fixed hex values, and currentColor reuses the element's text color for borders and icons.
Putting it together: theming a component
A button and badge get five related colors from one HSL hue stored in custom properties.