About colors on the web

Red, green, blue (RGB) 🔗

Because computer screens create color by using varying intensities of red, green, and blue light, colors on computers were traditionally described in terms of the intensity of the (additive) primary colors red, green, and blue (RGB). Specifically, colors on the web were described in terms of the intensity of red, green, and blue on a scale from 0 to 255 = 2⁸ - 1. This gives us 2²⁴ colors (roughly 16 million).

Hexadecimal uses the usual decimal digits 0 through 9, plus additional digits a through f, as its 16 digits. For example, the first 20 positive integers in hexadecimal are written as: 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09, 0x0a, 0x0b, 0x0c, 0x0d, 0x0e, 0x0f, 0x10, 0x11, 0x12, 0x13, 0x14. The prefix 0x is sometimes used to indicate numbers given in in hexadecimal.

Moreover, it's traditional to give the RBG-intensity values in hexadecimal (base 16). For example, consider the lovely greenish-blue color used as the background color of this box. That color has a red intensity of 61, a green intensity of 231, and a blue intensity of 154 (each of these is out of 255). In hexadecimal, these numbers are 0x3d, 0xe7, and 0x9a, respectively. This color would be expressed as the hex triplet #3de79a.

In general, in a hex triplet, the first two digits give the red intensity, the next two digits give the green intensity, and the last two digits give the blue intensity, each out of a scale of 255 = 0xff.

A diagram showing how each part of a hex triplet corresponds to the intensity of a color. The hex triplet shown is #3de79a. The first two digits, 3d, are on a red background, and are labeled Red intensity, 0x3d = 61. The second pair of digits, e7, are on a green background, and are labeled Green intensity, 0xe7 = 231. . The last two digits, 9a, are on a blue background, and are labeled Blue intensity, 0x9a = 154. At the bottom of the diagram it says each intensity is on a 0-255 scale. — The three pairs of hexadecimal digits in a hex triplet specify the intensities of the three additive primary colors (red, green, and blue) on a scale of 0-255 (`0x00`-`0xff` in hexadecimal).

If each of the intensities is a multiple of 0x11 (i.e., the same digit repeated twice), the code can be shortened to three digits. For example, #9900aa can be shortened to #90a. (This explains why cryptocurrency researcher and skeptic Molly White uses the handle @molly0xfff on various social media platforms.)

Here are some examples of colors given by hex triplets:

#fff
#000
#c90
#af0
#33a
#c0ffee (disappointingly not the actual color of coffee)
#9d9dd8
#33c1c8
#cc27a3
#bdf1a7

Nowadays, you don't have to use hex triplets to use the RGB color model. In CSS (the language used to specify presentation and layout of web pages), you can write rgb(61 231 154) or even rgb(24% 91% 60%) instead of #3de79a. (Okay, that second one isn't exactly the same; there is a little bit of a rounding error.)

Hue, saturation, lightness (HSL) 🔗

Another common model for specifying colors is to specify a color using:

A hue, typically expressed as an angle between 0° and 360°, which represents where the color falls along the color spectrum. (There is a colorful man named Roy G. Biv who can help you out with this.)
A saturation value, typically expressed as a percentage between 0% and 100%. (Lower values give grayish colors, higher values give more vibrant colors.)
A lightness value, also typically expressed as a percentage between 0% and 100%.

A row of eight rectangles, colored red, tan, lime green, bluish green, cyan, blue, purple, and magenta. They are labeled 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315° — HSL colors with various hues, each with a saturation of 80% and a lightness of 50%.

A row of nine rectangles, starting with gray and becoming progressively more cyan-colored. — HSL colors with various saturations, each with a hue of 180° and lightness of 50%.

A row of nine rectangles, each brighter than the last, starting with black, then transitioning to cyan and eventually white. — HSL colors with various lightnesses, each with a hue of 180° and saturation of 80%.

In CSS, you can write hsl(225deg 80% 50%) to specify a color with a hue of 225°, a saturation of 80%, and a lightness of 50%.

Named colors 🔗

A number of colors have been assigned names. For example:

white
green
firebrick
lightsalmon
papayawhip
dodgerblue
rebeccapurple

Many of these names date back to the X Window System used in Unix. The most recently-added named color is rebeccapurple, named in memory of Rebecca Meyer.

(A full list of named colors in CSS.)