Suppose we wanted a blue block:
How would you specify its color in CSS? Well, let's start by rolling the clock back to 1996. Independence Day started airing in theaters, Game Freak launched Pokemon Red and Blue, Sid Meier released Civ II, and W3C published the first specification for CSS.
Per the CSS1 specs, we could write this using a
color name, such as background: blue. The 16 original named colors are
black,
silver,
gray,
white,
maroon,
red,
purple,
fuchsia,
green,
lime,
olive,
yellow,
navy,
blue,
teal, and
aqua.
But one might want to use more than a few predefined colors. Well, you can also specify one of the ~16.7 million colors in the sRGB color space, which allows defining a color by its red, green, and blue channels. Instead of using the named color, you can use one of the following:
background: #00f - a 3-digit hex codebackground: #0000ff - a 6-digit hex codebackground: rgb(0, 0, 255) - an integer rgb() value (from 0 to 255)background: rgb(0%, 0%, 100%) - a float rgb() from 0.0% to 100.0%The CSS2 and CSS2.1 standards didn't change too much in the way that developers could specify colors, except the addition of orange as a new named color. So let's move on.
After CSS2 (which was one large spec for all of CSS), W3C switched to using smaller documents for different modules. The CSS Color Module Level 3 introduced a few things.
130 new named colors were added (with some overlaps like dimgray and dimgrey).
To specify an opacity for an element, rgba() was added. It takes a 4th parameter
for an alpha channel: background: rgba(0, 0, 255, 0.5).
CSS Color 3 also added hsl() and hsla(), which use hue, saturation, and lightness. If you haven't seen this before, let's take a look at how this works.
Without invoking physics or just shouting the word color over and over, hue is pretty hard to define, but really easy to understand. It's where in that ROYGBIV wheel the color lands:
saturation tells how vibrant the color is:
lightness tells how light or dark the shade of the color is:
Putting these together, we get something like the following grid, with saturation on the x-axis and lightness on the y-axis (if we pick a single hue, like blue):
CSS Color Module Level 4 introduces several new and interesting things.
For starters, rgb() and hsl() syntax has been updated so that they no longer use
commas and can optionally provide an alpha value after a forward slash:
background: rgb(0 0 255 / 50%).
Hex codes also support alpha channels with 4 digit and 8 digit hex codes:
#0000ff80.
As an alternative to specifying color via rgb() or hsl(), there are 5 additional color functions introduced: hwb(), lab(), lch(), oklab(), oklch().
The hwb() functional notation expresses a given color according to its hue, whiteness, and blackness. Hue is the same as the hue used in hsl(). The whiteness and blackness refer to how much white or black get mixed in.
For example, we can look at the square below and see how adding whiteness or blackness changes the color, with blackness on the x-axis and whiteness on the y-axis (again picking a single hue).
The last 4 ( lab(), lch(), oklab(), and oklch() ) are similar to hsl(), but better map to human perception of lightness (versus using the same scales for all hues like in hsl()). These aren't available in all browsers yet, but will be worth checking out (especially when CSS Color Module Level 5 brings native relative colors to CSS).