Intro to color on the web

The CSS color spec contains a lot of terminology and thought. For example, here's the syntax for defining all of the different ways a color can be expressed:

<color> = <hex-color> | <named-color> | currentcolor | transparent
          <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> |
          <lab()> | <lch()> | <gray()> |
          <color()> | <device-cmyk()> |
          <system-color>

All of these representations except lab, lch (and color, if you choose a different color space) map to colors in the sRGB color space. There are other color spaces in the RGB realm such as Adobe RGB. Since we're working with the web here, we'll always refer to sRGB. lab and lch map to the CIELAB color space, which then has to be translated further into something that displays on screen. It's not entirely clear to me what the actual behavior of lab and lch will be when the level 4 spec ships, so any conversion that we talk about from now on can be considered manual conversion done in JS or something similar from CIE to sRGB.

We'll mostly talk about the rgb() syntax to illustrate some points before diving into what the others mean. Note that if you haven't encountered rgb() and you're used to seeing hex colors (#1fa9f4), named colors (hotpink), or HSL values (hsl(201.1,90.6%,53.9%)), these are all effectively the same thing written in different ways.

The rgb syntax looks like this:

rgb(0,0,0)

What is a Channel?

Color channels are the acceptable range for one value. When specifying a color with rgb(...) we can choose one of 256 numbers for each channel. rgb's channels are named red, green, and blue for the amount of each color that makes up the color we're trying to describe. The hex color #1fa9f4 can be represented using rgb as:

rgb(31,169,244)

Colors are made of other colors... unless they aren't

When talking about some of the more commonly used syntax for expressing color, like rgb, we immediately are faced with the reality that we only have three channels to express every possible color we want. This means that each possible color we could want is a combination of those three channels.

Why are color pickers circles?

Polar representations