How to Use CSS Colors in JavaScript

By Chris Minnick, Eva Holland

CSS colors describe the millions of possible colors that a web browser can display by using different combinations of red, green, and blue.

Here’s an example of a CSS color in hexadecimal notation:


Take a closer look at this code.

The hash symbol (#) indicates that this is a hexadecimal code. After that, the first and second symbols (9B) indicate the shade of red to blend into the new color, the third and fourth symbols (E3) indicate the shade of green to blend in, and the fifth and sixth symbols (44) indicate the amount of blue. When these three parts are blended, the color you end up with is a nice green color.

At this point, you’re probably wondering why hexadecimal notation combines letters and numbers. The answer is pretty simple: to get more possibilities.

Hexadecimal notation is how a monster with 16 fingers might count. For example, people have ten fingers, so you have ten different digits that you use for counting: 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9.

If you had 16 fingers, however, you would need to invent new symbols to represent the additional fingers. Computers frequently count by 8 or 16 because bytes are made up of 8 digits, or bits. You could say that computers are like creatures with 16 fingers.

Instead of inventing new symbols, computers use letters for the digits after 9. So, A in hexadecimal is equivalent to 10, B is the same as 11, C is the same as 12, D is the same as 13, E is the same as 14, and F is the same as 15.

Two‐digit hexadecimal codes start with 00, which is equivalent to 0, and end with FF, which is equivalent to 255.

When you say that the shade of red should be 00, you mean that it should have no red at all. If you say that it should be 01, you mean that it should have only the smallest amount of red (which probably wouldn’t even be noticeable) When you say that the shade of red should be FF, you mean that it should be pure red.

Instead of guessing how much of each color to blend in, you can use an online tool such as the one at ColorPicker to visually choose your colors.