Specifying colors on the web

When you want to talk about a color to a person, you might say “red”, or “orange”. Your browser will accept some of these color descriptions (in fact, it will accept any of 140 CSS colors), but these are only a fraction of the 16,777,216 colors your browser can display. Furthermore, knowing what these colors look like from the name alone can be difficult. What color is “Moccasin”? What about “WhiteSmoke”?

There’s a better way. In addition to names, colors can be specified by their RGB values on a scale from 0-255, in hexadecimal format, or by their hue, saturation, and lightness.

Red, Green, Blue

RGB stands for Red, Green, and Blue. These three colors are used by television, computers, or anything else with a monitor to create the colors you eventually see. Each pixel on your screen actually has one sub-pixel of each color. The colors you see are a blend of these three colors.

On the web, and in many graphics editing programs, the amounts of each color are specified on a scale of 0–255, with 0,0,0 being black, and 255,255,255 being pure white. Pure red is 255,0,0. Pure green is 0,255,0, and pure blue is 255. Any color where the red, blue, and green values are equal is a grey, with neutral gray being 128,128,128.

Using this knowledge, we can guestimate what values we might want to enter to create a specific color. For a medium green, we might want something like 128, 255, 128.

For a lighter green, we can increase the lightness of the red and blue values: 180, 255,180.

Keeping green at full strength (255), increase the blue and red values equally to make it lighter

Your browser will also accept these values in hexadecimal format. The hexadecimal numbering system uses base 16 instead of 10. It has 15 digits, using letters A-F to represent the numbers 11–15. If you see something like #ADFF2F, you’re looking at a hexadecimal color. The values are still red, green, and blue, on a scale of 0–255. The values come in pairs of two: the first two digits refer to the amount of red, the second two to the amount of green, and the third to the amount of blue. In the first example below, the red value is FF, or 255, while the other two are zero. In the next example, the green color values is 7F, which is hexadecimal notation for 127. It’s not critical that you understand the math, so don’t worry if it’s confusing. Just know that these numbers are a different way of writing the red, green, and blue values.

Colors labeled with their RGB and hexadecimal color values

But specifying colors using number values feels a little… unnatural.What if we could describe how light or how bold a color was directly, in a way that was still precise and able to refer to a specific color? The Hue, Saturation, Lightness model attempts to do this. It’s not perfect, but it allows us to specify colors in a way that more closely matches how humans think about them.

Hue, Saturation, Lightness

The Hue, Saturation, Lightness model organize as folows:
- Hue is the base color, as represented in degrees, like in the image below.
- Saturation is how far away it is from grey; that is, how intense the color is, represented in either a percent or a decimal 1–10.
- Lightness is how light, or how close to white, it is; represented in a percent or decimal 1-10, with 0% being black, and 100% being white.

In the image to above, the colors are a different number of degrees from red. Saturation and lightness are not directly represented in this image.

Above is a color picker from wb3 schools. You can select the hue on the first bar, labeled “H”. The Saturation bar, labeled “S”, goes from a gray to a bold green; and the lightness bar, labeled “L”, goes from black to white.

This color is fully saturated, according to the HSL model.

The hue saturation lightness model has certain weaknesses, however. Light colors, even fully saturated, often look a little bit washed out compared to their darker companions. Nevertheless, they are fully saturated with color, according to the HSL model.

The word “Green” looks brighter than Blue or Red, even though their lightness value is the same.

Another weakness of this model (a weakness of the RGB color space in general, actually) is that at 50% lightness, the greens will appear brighter than the reds or the blues, because green is naturally bright: Your eyes are actually more sensitive to green light compared to red or blue light.

So HSL shouldn’t be used to do something like convert an image to black and white. The lightness values of a red in HSL are relative to the darkest and lightest red — they are not general brightness levels.

One thing that can be said for it, however: it makes getting a lighter or darker shade of the same color easier.

When will I use this?

Chances are, you’ll use color pickers or charts to grab the color values you need when you are applying them to a website. You will use one or more of the three formats (RGB, hex, or HSL) in your CSS. Even if you mostly copy and paste you color values in, it’s helpful to know how to tweak the values when you are looking for a lighter or darker color, and to have a general understanding of what the values mean.