In this post we’ll take a look at the different ways you can work with colors in CSS.
The first way we can use colors is by just using their name. We did this in the last post. If you remember, we made the <h1> tag red, the <h4> tag green, and all the <li> tags blue.
While this is a good way to color an element quickly, it does have its limits. For instance, let’s say you’re developing a new website for a well-known brand. They want their logo on their website that has a very specific shade of blue. The logo on the site must exactly match the logo on all their other marketing and just using “color:blue” isn’t going to work. You could try to find a named color that matches. There are approximately 150 named colors. You can find a list of these colors here and here, but chances are you won’t be able to find that exact shade of blue.
Using Hexadecimal Notation
People use a base ten number system. By that I mean that we only use 10 actual numbers, 0-9. After 9, we start again at 0, placing a 1 right before it. This is the “tens” column you learned in grade school. While the numbers go on into infinity, the digits that make up our numbers only go from 0 to 9.
When we use hexadecimal notation we are using a base 16 or hexadecimal numbering system. There are 16 digits in a hexadecimal number system. For the first 10 we can use our base 10 number system, 0-9. For the last 6 we use the letters A-F. When we write a hexadecimal number we always precede with a hash symbol (#) and then follow that with six digits. For example, black is #000000 and white is #FFFFFF. Going back to our example
That shade of red would be #FF0000, green is #008000, and blue is #0000FF.
Do you notice a pattern here? When we use hexadecimal notation the first two numbers specify how much “red” the color has. The second two hexadecimal digits represent how much “green” the color has. The last two digits show how much “blue” the color has. In our example, you’ll notice that the colors red and blue have the maximum amount of their color (FF) while the other two colors are absent (00). The color black, with no colors being present, is #000000 while the color white, the presence of all colors, is #FFFFFF.
Don’t worry, you DON’T have to memorize all the different hexadecimal numbers for any given color. That would be impossible for most people. Most people use color pickers which can easily be found on the web or downloaded as a browser add-on. One of the things I like about Firefox Developer Edition is that If you see a particular color you want to use, you can use an “eyedropper” to get the hex number of that color. Just go to the upper right corner and click on the wrench icon to get a list of developer tools you can use.
Clicking on the eyedropper lets you pick a color from the page.
In the picture above, that particular shade of blue is hex #0982fe.
RGB is short for Red Green Blue and is similar to hexadecimal notation. There are two differences. One is that instead of using the hexadecimal number system, the decimal number system is used. The other is how you write it. Instead of using a hash tag (#), you write something like this:
In hexadecimal notation, the first two digits represented how much red the color had, the next two digits represented how much green, and the last two told us how much blue. Likewise, in RGB the first number tells us how much red, the second number how much green, and the third number how much blue. The values range from 0 (none) to 255 (#FF = 255 decimal).
The following will give us the same shade of colors using the three different methods.
Tip: In VS Code, if you hover over a color you will get a color picker where you can get the exact shade of color you want.
RGBA simply takes the three channels from RGB (Red Green Blue) and adds a fourth channel, the alpha channel. The alpha channel is a number from 0 – 1 that describes the opacity of the color. A value of 0 means that the color is transparent, a value of 1 means the color is opaque. Here is our <h1> tag with an alpha channel value of 1.
Turning the alpha channel down to .5 gives us:
Turning the alpha channel all the way down to 0 will make out tag transparent:
Those are four ways that we work with colors in CSS. Next post we’ll take a look at backgrounds and borders in CSS.