• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 11/2/22

Understand color theory

Color values can be set in CSS in several ways. Whichever way you choose to set colors, be consistent.

We'll check out the following ways to set color:

  • Hex codes

  • RGB values

  • Color names

  • HSL values

Here's the green we'll be working with as an example to explore each way of expressing color!

A light-mid green
Our example green

Accessibility

One quick note before we jump into ways of setting color: make sure to use color schemes that are easily readable. This means choosing sufficiently high contrast color combinations so that even people who can't see well can still tell letters and content apart from each other on your page.

Using a high-contrast combination helps readability:

High contrast color combination (green/white)

High contrast color scheme (green/pink)High contrast color scheme (green/blue) 

Using the above green as an example, here's a bad color combination (the text is hard to read!):

Low contrast color scheme (green/lighter green)

Bear this in mind as you set colors in CSS!

HEX codes

Hex codes are my favorite way to set color in CSS. A hex code is a 6-digit string of numbers and letters that represents the red, green, and blue values of a color in hexadecimal format. Whoa! Sounds complicated.

The good news is you don't really need to think about how the code are set. Hex codes are really easy to find by using a color picker tool. There are many available online, such as this one: https://htmlcolorcodes.com/color-picker/

By using a color picker tool, you'll often immediately see a set of characters starting with #. Think no further. This is the hex code for your selected color.

Here are some sample hex codes of nice colors (including our green).

A green color swatch, a light blue color swatch, a medium blue color swatch, a darker blue color swatch, a purple color swatch, and a pink color swatch To set a heading's color to the first green above via hex code, we'd write the following HTML and CSS:

<h1 id="hex">Color via hex code: #1BDA76</h1>
#hex {
    color: #1BDA76;
}

See the "#1BDA76" in the CSS statement? That's the hex code! Here's our result:

Result
Result

RGB values

Each pixel on your computer screen is a tiny light that expresses color by adapting levels of red, blue, and green light. "RGB" as a way to set color therefore stands for "Red, Green, Blue"!

An RGB value in CSS is formatted as follows:  rgb(red, green, blue);

Luckily, color pickers will often give you the RGB values in addition to a hex code. The green above in RGB is 27, 218, 118. This means:

  • our color's "red" value is 27.

  • our color's "green" value is 218.

  • our color's "blue" value is 118.

Let's set a heading to the same green as above via an RGB value:

#rgb {
    color: rgb(27, 218, 118);
}
Result
Result

Voilà! It's the same green, just expressed differently.

Color names

In the previous chapter where you learned the CSS properties color and background-color, we set colors as simple color names.

There are 147 defined color names in CSS. 😱 While they might seem practical, they're actually very limiting.

Some even have obscure names, like PapayaWhip or LemonChiffon. This is cool if you're into desserts but is not very useful in your codebase!

This means we can't set an exact match to our green above using a simple color name. The closest we can get is probably "LightGreen":

#color-name {
    color: LightGreen;
}

Here's what we end up with:

Result
Result

Meh. It's fine but not an exact match. Find a full list of all CSS color names here, but don't count on using them often.

HSL values

Recent updates to CSS have added a new way to set color values called "HSL." This stands for hue, saturation, and lightness. It is intended to be a more human-understandable format; if you understand the 360 degrees of a color wheel, you can easily guess at what a color code might be (which is not the case with a hex code or RGB value).

The first value, hue, represents where the color is in a color wheel (which is circular, so the maximum value is 360).

The second value, saturation, represents the amount of grey in the color you select. You can think of this as the vibrancy of the color. It's expressed as a percentage from 0% to 100%.

The third value, lightness, represents the amount of black in a color. It's also expressed as a percentage from 0% to 100%.

The HSL values for our green above are 149, 88%, and 48%.

#hsl {
    color: hsl(149, 88%, 48%);
}

By stacking all ways of setting the green above, here are the results. All are identical except for the green set via color name, which is less specific than using a hex code, RGB, or HSL value:

Four ways of setting colors
Four ways of setting colors

Practice!

Before moving on, practice manipulating the color in this example on CodePen.

Example of certificate of achievement
Example of certificate of achievement