Why color needs a format

A screen has no idea what "blue" means

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 light-emitting elements, sitting so close together your eye blends them into one color. Turn all three fully on and you get white; turn them all off and you get black; every other color is some specific mix of how bright each of those three lights burns. CSS color values are, underneath everything else, instructions for that mix.

Red, green, blue: light, not paint

This trips people up who learned color mixing with paint in school, where mixing all colors together tends toward brown or black, and where blue and yellow paint make green. Screens don't mix paint, they mix light, and light mixing works in reverse: it's additive. Add more colored light together and the result gets brighter, not darker.

red   + green            = yellow
green + blue             = cyan
red   + blue             = magenta
red   + green   + blue   = white
no light at all          = black

Every color you've ever seen rendered on a screen is some combination of how much red, how much green, and how much blue light is burning at that pixel. That's the foundation every CSS color notation in this course builds on top of, whether the notation looks like it's talking about light directly or not.

Three ways to describe the same mix

CSS gives you several different notations for specifying a color, and this surprises people the first time: they're not competing systems that produce different colors, they're different languages for describing the exact same underlying red/green/blue mix.

.swatch { color: #2563eb; }              /* hex: base-16 numbers */
.swatch { color: rgb(37 99 235); }        /* rgb: base-10 numbers */
.swatch { color: hsl(221 83% 53%); }      /* hsl: hue, saturation, lightness */
.swatch { color: royalblue; }             /* keyword: a named color */

All four lines above render the same, or nearly the same, shade of blue. Hex and RGB describe a color by its exact red/green/blue light amounts, just in different number bases. HSL describes the same color through a completely different lens: a position on a color wheel, how saturated it is, and how light or dark. Keywords are just memorable names standing in for one specific hex value. Learning all three isn't redundant, each one makes a different kind of task easier, and knowing which to reach for is most of what this course teaches.

Where color values go

Every notation in this course works identically wherever CSS expects a color, color (text), background-color, border-color, and dozens of others. Nothing about how you write the color changes depending on which property it's assigned to; a hex value styling text works the same way styling a border.

.alert {
  color: #b91c1c;
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
}

Three properties, three shades of the same red family, one notation. The rest of this course is about that notation, and the others available alongside it.

What this course covers

• Lesson 1, Why color needs a format: light, not paint, and the three notations describing the same mix (you are here)
• Lesson 2, Hex color notation: the #RRGGBB format, and its shorthand forms
• Lesson 3, rgb() and rgba(): red, green, blue as plain numbers, plus transparency
• Lesson 4, hsl() and hsla(): hue, saturation, lightness, and why it's easier to reason about
• Lesson 5, Opacity and alpha transparency: the crucial difference between a translucent color and a translucent element
• Lesson 6, Color keywords and currentColor: named colors, and the keyword that borrows another property's color
• Lesson 7, Putting it together: theming a component where HSL's structure pays off

By the end, choosing between hex, RGB, and HSL won't be a coin flip, you'll know which one makes the task in front of you easiest.