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!
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:
Using the above green as an example, here's a bad color combination (the text is hard to read!):
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).
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:
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);
}
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:
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:
Practice!
Before moving on, practice manipulating the color in this example on CodePen.
