Work in progress

Learn Colors

Color can be expressed in four different formats. There are a limited number of named colors, and then there are colors defined by specific values. For colors defined by specific values, CSS offers three different ways to express them:

• Hexadecimal
• Hue, Saturation, Lightness (HSL)
• Red, Green, Blue (RGB)

Each format has advantages and disadvantages. For starters, let's see the same named color, royalblue, in all the formats:

/* Hexadecimal */
p {
  color: #4169e1;
}

/* Hue, Saturation, Lightness */
p {
  color: hsl(225, 73%, 57%);
}

/* Red, Green Blue */
p {
  color: rgb(65, 105, 225);
}

Each one of the rules above will make the paragraph elements on a page the same color blue. So if they're all the same, you're probably wondering, why does CSS offer so many ways of doing the same thing, defining color?

It all comes down to different use cases and who is defining color and consuming color.

Hexadecimal

Hexadecimal is the most common way you see colors defined, because a single numerical value can represent an entire color. When designing your own styles, you will most likely find yourself using a color picker like this one (click the input below):

#4169E1

The color picker tells you the values in each format (Hexadecimal, HSL, RGB) for the given color you've chosen.

• Chrome users (or a browser based off of Chromium) can click on the values at the bottom of the dialog to toggle between different color formats. When you're on the right type, it will say "HEX" at the bottom.
• Firefox users can see the hexadecimal value in the "Color name:" field.
• Safari users will have a more difficult time using the color input element to see raw values. We recommend you use Firefox for web development, as it has superior tooling for building websites and learning CSS.

One shortcoming of defining colors in hexadecimal is that it's difficult for a human to read. The values are defined as #RRGGBB, meaning two places are saved for how much Red (RR), Green (GG), and Blue (BB) make up the whole color. However, it's hard to look at two colors, say #E71C1C, and #1C5AE7, and tell that they're a red and a blue.

Making color easier to understand for humans is where the Hue, Saturation, and Lightness color format come in.

Hue, Saturation, Lightness (HSL)

HSL was invented by a french engineer, Georges Valensi, who in 1938 was trying to solve a television broadcasting problem. TV broadcasters needed a way to maintain backwards compatability with monochrome (black and white) TV receivers and the new color TVs. Luminance (how much black or white existed) was broadcast as an unmodified value, so Mr. Valensi came up with the HSL color space in order to support color, while still maintaining compatibility with existing monochrome TVs.¹

Hue

HSL color space is shaped as a cylinder, so the first attribute, hue, has an acceptable range aligned with the number of degrees in a circle (360). The hue (also called chroma) value chosen is essentially the base color. To see what I mean, I have created a table of color values below along with their hues, so you can see how each 30 degree "chunk" of the circle corresponds to actual colors. You can click on any of these color picker inputs to see how hue changes.

red

0

orange

30

yellow

60

lime

90

green

120

irish

150

cyan

180

azure

210

blue

240

purple

270

magenta

300

hot pink

330

So now, if you remember that Red is when Hue is 0, Green is when Hue is 120, and Blue is when Hue is 240, then for colors defined in the HSL format, you can pretty easily tell which ballpark you're in, just by looking at a single value (the first one, Hue). That's why HSL is often referred to as a human readable or human digestible color format.

It may be easier to see what I mean when we look at a color wheel with the Hue values annotated:

When defining color using HSL in CSS, you use the following format:

  color: hsl(hue, saturation, lightness);
    

Without knowing what saturation or lightness do, can you look at the CSS rule below and the hue value to guess the color?

p {
    color: hsl(230,75%,90%);
}

Next we're going to learn how the rest of the HSL color format is defined.

Saturation

Saturation is a value that ranges from 0-100% and it defines how much or how strong the color you've chosen appears. In our example below, we'll use purple to see how changing the saturation changes the color. A total lack of saturation (no color) leaves us with just white, while full saturation (all the color) results in a bold purple.

Lightness

Lightness is a value that also ranges from 0-100%, but it defines how much black (0%) or white (100%) is in the color. As you can imagine, a total lack of lightness (0%) results in a black color, while full lightness (100%) gives you bright, fully lit colors.

Stepping back for a second to combine our new understanding for all three aspects of the HSL format:

• Hue: the basic color to be rendered
• Saturation: the amount or strength of that color
• Lightness: the brightness or lightness of that color

It's now easier for us to return to our original guessing example and see how the different values effect the color rendered:

p {
    color: hsl(230,75%,90%);
}

We definitely have a blue (hue = 230), there's a lot of blue (saturation = 75%), and it's a bright shade of blue (lightness = 90%).

If HSL is easier for humans, then what about computers? How do they make sense of color?

That's why we have RGB.

Red, Green, Blue (RGB)

The red, green, blue or RGB color model is based on adding three base colors together (you've probably already guessed which) to produce every other color in the rainbow. Unlike HSL where hue is essentially the color, RGB colors are determined by how much of each base color is present. RGB values can range from 0-255 with 0 representing none of the color being present and 255 representing the maximum of that color. The color notation is similar to that of HSL, except with rgb instead:

  color: rgb(red,green,blue);
    

So, if you want a color like orange, then what colors combined make orange? Can you guess?

  color: rgb(255,125,0)

That was probably pretty difficult to guess though, right?

Imagine if you saw a color defined like this:

p {
    color: rgb(65, 105, 225);
  }

Any idea what color that might be?

There's about 25% of the possible red, 40% of the possible green, and a large amount of blue 90%ish. It's probably a blue, and maybe it's some sort of green-ish blue, since there's so much green in it?

I can't really tell what color this will end up as just based off the raw RGB values.

Guess what? It's our original royalblue.

That's why RGB is a color format designed for computers and electronic devices. It's not very human readable.

So why does RGB exist?

Well, the combination of 256 values (0 to 255) of each color means that 16,777,216 (256 * 256 * 256) precisely defined colors are available in this color format. That's a huge color spectrum. Also, defining color in this way is easier, computationally, on computers. Today, that doesn't matter anymore, because computers are very fast, but when different color formats were being adopted by early computers, this mattered a lot.

Alpha Channel

Finally, for both RGB and HSL color definitions, you have the option of adding an additional dimension for transparency. This is called the alpha channel, and it defines how transparent the color renders. The values for Alpha range from 0-1 with 0 representing full transparency (invisible) and 1 representing full color (no transparency). This royalblue definition using rgba is the same as not specifying alpha:

p {
    color: rgba(65, 105, 225, 1)
}

The alpha channel is typically used for backgrounds, because it allows you to blend different colors together on multiple layers.

p {
    background-color: hsla(30, 75%, 57%, 0.25);
    color: hsla(225, 73%, 57%, 0.75);
}

Blending color with alpha opens another door to displaying elements together using CSS!

The paragraph above actually has a bright, bold orange color selected for its background, but it's rendering as a faded orange because the alpha channel is telling the browser to only render it at 25% transparency. The same is true for the faded blue of the text, which is our same royalblue, but is now set at 75% transparency and is blending in with the background orange.

Accessibility

Using color correctly means making it accessible to everyone, even those with visual impairments. This is part of embracing the idea of universal design. Universal design in physical buildings is the idea that all people should have equal access to a building, regardless of their level of mobility. That's why buildings have ramps for people in wheelchairs. The same is true for our digital world on the web. Every user, regardless of their situation, should have the same ease of access to your website. This includes users that are visually impaired and might have difficulty discerning between similar colors.

There's a lot to learn about getting color contrast right, and I want you to read from the experts:

• Understanding WCAG: Color Contrast
• Color Contrast Checker Tool
• Google Chrome's Lighthouse Auditing Tool for Color Contrast

In the future, this section will be expanded to cover accessibility further, but for now, please rely on the above.

You've learned a lot about color. Now what about fonts and typography?

Credits

¹Read more about Mr. Valensi and HSL on Wikipedia.