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
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.
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
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.
rgb syntax looks like this:
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
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:
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.