For the longest time, in the early days (back when you had to walk 15 miles in the snow just to make a point), the web was pretty boring when it came to color:
[ microsoft.com in 1994 (source) [
When the web wasn't boring, it was just downright cringeworthy with the colors people did use. Do you remember hearing or using web safe colors? Didn't you love making sure your normal links were blue, visited links were purple, and active links were red? What was up the gray background the typical site sported thanks to your browser's default settings? If you had to ask me (and please do!), the early days of the internet were directly responsible for people refusing to ever use most of the following 16 colors:
Anyway, all of that is a moo point. It is a moo point because we are not designing for the web of the 1990's. The technology has improved - your screens, your browsers, the level of CSS support, etc. are all much better now. Our ideas of what makes up "good design" have changed as well. Most of us have adapted quite nicely (and handsomely, even) to these changes over the years. Let's celebrate this adaptation!
That's where this tutorial comes in. This article was originally published in 2013 and looks at the familiar hex, RGB, HSL, and named-color forms. These are still useful, but they aren't an exhaustive list of the color formats modern CSS supports. Let's see what the different representations let us do.
Onwards!
Hex Values
By far, the most common way of specifying a color today is by using a hex value:
.custom {
color: #1A1A1A;
}
Most image editors like Photoshop or Fireworks provide colors as hex values by default. If you are using a redline or working from a comp, chances are the colors in them will be provided as hex values as well. Knowing hex will take you far in befriending a color.
Now, the default form of a hex value is made up of six characters. That is what you see in the examle above, and these correspond to RGB values:
If the two hexadecimal digits within each channel pair match, we can use a shorthand with just three characters. The red, green, and blue channels do not have to equal one another:
.custom {
color: #333;
}
How this shorthand notation works is pretty simple. The colors #333333, #AABB33, and #00FF00 have matching digits within every pair. We can shorten them to #333, #AB3, and #0F0. The browser expands each shorthand digit by repeating it. Dropping digits from arbitrary six-digit colors would change the color.
RGB and RGBa Values
Another way you can specify a color is by specifying each component of an RGB value directly:
.custom {
color: rgb(255, 100, 200);
}
This is accomplished by using the rgb function - a function that takes a value between 0 and 255 for red, green, and blue. Think of this as the expanded decimal form of the hex value representation you saw earlier.
Specifying your colors in this form isn't just a purely cosmetic change. There is a unique variant to this notation that allows you to specify the transparency or alpha of your color.
This form looks as follows:
.custom {
color: rgba(255, 100, 200, .5);
}
Instead of using the rgb function, you use the rgba function instead. The "a" stands for alpha, and it specifies how transparent this color is going to be. The value goes between 0 and 1 where 0 is fully transparent and 1 is fully visible/opaque.
If we lower the opacity of an element, its background, text, and descendants are composited together at that opacity. Giving just its background color an alpha value lets us keep the text opaque. RGBA is one way to express color alpha; modern CSS also supports it in other color notations. Which part of the interface should become transparent is the decision that matters.
HSL and HSLa Values
Whereas the very screen/monitor specific hex and RGB representations allowed you to specify each component of your color directly, HSL gives you a different way of thinking about colors. Instead of looking at each color in terms of its red, green, and blue components, with HSL you are working instead with hue, saturation, and lightness. Because this is quite a bit different than what you've seen so far, let's look at what these three components mean first before diving into specifying a HSL color.
Hue
Hue selects a position around a color wheel. In CSS HSL, hue is an angle that wraps around after a full turn, so 0 and 360 degrees meet at the same hue. The artist's wheel below illustrates the idea of colors arranged in a circle. It is a red-yellow-blue wheel, not a chart of CSS hue angles:
[ source: wikipedia ]
For CSS HSL, red is at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240, and magenta at 300. Those are positions in CSS's RGB-derived color model. We shouldn't read CSS angles from the artist's wheel above, which uses a different arrangement.
Saturation
Saturation controls how far our HSL color moves from gray at its current lightness. At 0% we get a grayscale result. At 100% we get the most saturated color available at that hue and lightness. Lightness still matters: its black and white endpoints won't become colorful just because we turn saturation up.
Lightness
Lightness controls how far the HSL color moves toward black or white. At 0% it is black, and at 100% it is white, regardless of hue. This coordinate is not a measurement of perceived brightness or text contrast. Two colors with the same HSL lightness can look quite different in those respects.
Putting It All Together
Now that you have an idea of what goes into a HSL representation for color, let's look at how you can use it:
.custom {
color: hsl(90, 100%, 85%);
}
You use the hsl function that takes the hue, saturation, and lightness values as its argument. If you want to specify some transparency for this color, you can use the hsla function instead:
.custom {
color: hsla(90, 100%, 85%, 1);
}
As opacity values go, 0 is fully transparent and 1 is fully opaque and visible. No surprises there!
When to Use HSL/HSLa?
Given how rare you see HSL values on the web, you may be wondering when to actually use them. In general, I like to use HSL values when I am working with colors in code and need to generate a range of similar colors. Because the value for color is specified as a single input, I can easily accomplish something like that by specifying a color and changing up the saturation and lightness values. Doing something similar with hex or RGB values would be more difficult.
Image editors often offer hue-based color pickers, but we need to check which model a picker uses. This screenshot shows HSB, which is related to HSL but uses a different meaning for its saturation and brightness controls:
HSB (brightness) and HSV (value) are two names commonly used for the same model. HSL is a different model. Its lightness is not interchangeable with HSV's value, and their saturation values can differ too. Copying the screenshot's HSB values of 90, 100%, and 85% directly into hsl() won't reproduce that green. Convert between the models or use the editor's RGB or hex value when matching a color.
Named Colors
Now, we get to some really old-school stuff. A handful of the colors that you can specify numerically (as either hex or RGB or HSL) actually have names! It's probably obvious to you that all colors have names, but your browser actually has an understanding of them.
For example, you can do something like the following:
.custom {
color: cadetblue;
}
Instead of specifying the easily memorable #5F9EA0, I used its English equivalent of cadetblue instead. Your browser knows what color cadetblue is, and it displays your color correctly. There are a boatload of colors that have names associated with them, and I am too lazy to give you that list here. Besides, there is no value in me doing that when the W3C has done a great job of defining them in the Extended color keywords and the CSS system colors sections of the CSS3 Color spec.
You don't have to remember these names or keep referencing the W3C spec each time you get the urge to use a named color. If you are using a decent editor for entering your CSS, you will have access to this same list of named colors as well:
Unlike the hex, RGB, and HSL variations I've shown you in the previous sections, I do not like using named colors. One reason is that I like my CSS to look consistent, and I have a lot more flexibility when specifying my color values numerically. It looks really odd when you have a list of named colors and the odd numerical color because a named value doesn't exist. If anything, it would be the other way around since most colors you would use would be unnamed. Another reason is that it is hard to jump between an image editor and my CSS value when the image editor has no understanding of a named color. Since I am always working from comps or swatches that I created in something like Fireworks, I am almost always in hex, RGB, or HSL space. Named colors simply don't have a place in my workflow...or my heart.
Further Reading
I am a huge fan of color, and to learn more about them, the following links both from this site as well as others may be helpful:
- Counting in Hexadecimal
- Reading RGB/RGBa Values
- A Little About Color: HSV vs. RGB
- Yay for HSLa (Chris Coyier)
- Colorfulness (wikipedia)
- CSS3 Colors Spec (W3C)
Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.
Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.
Your support keeps this site going! 😇
