No matter what kind of coding project you are undertaking, chances are that at some point you’re going to start working with colors. This is particularly true if – as many people do – you learn to code using HTML to design web pages.
When you first start out designing in color, you’ll likely be using some kind of graphical interface to choose the colors you want to use before you apply them to the various elements in your page.
As you grow more confident in using HTML, though, and as you start to look at the code itself rather than just your graphical editor, you will notice that the colors you pick are denoted by some strange looking codes such as #ff0000.
These codes are called Hex color codes, and they are a fundamental part of the way that both HTML and CSS work. Learning how they function will not only save you a lot of time, it will also make your code faster, more elegant, and more reliable.
In this guide, we’ll take you through everything you need to know about hex color codes, and show you how to use them in your own project.
What Does Hexadecimal Mean?
First, let’s look at the “hex” part of the term “hex color code”. Hex, in this context, stands for “hexadecimal”, a number system in which there are 16 basic numerals, rather than the more familiar 10.
This is the number system used by HTML, and many other programming languages for that matter, and so it is the way in which colors are recorded in the language.
Hexadecimal, as the name suggests, is a way of encoding a base 16 number system. Decimal, our regular number system you're already familiar with, is base 10. Hexadecimal uses the same numerals as the regular system for the first 10 numbers (so 0 – 9) and then swaps to letters, so the numbers 10 – 15 are encoded using the letters A – F.
As an interesting aside, the primary reason that hexadecimal is used is because it possesses a natural link to the binary system that is used by your computer at a more basic level.
Binary numbers are commonly expressed as a power of 2, and 16 is 2^4. This makes it easy to convert between hexadecimal and binary (though we won’t be doing that today).
You don’t need to know this to use hex color codes, but it might come in handy the next time you want to impress someone.
What Components Make Up a Color?
How do we use the hexadecimal system to encode colors in RGB?
Colors that are displayed on a computer screen are made up of three components, which correspond to the three colors that are present in each pixel of your screen. If you look really, really closely (or you have an ancient screen) you’ll be able to see them – red, green, and blue.
As a consequence, the way that we encode colors is to specify how much light each of the red, green, and blue (RGB) parts of your pixels should give out. So, for instance, an RGB value (a type of value used in many different software systems) might look like this: RGB (255, 0, 0).
255 is the maximum value for a component, and so this value indicates that the first component (red, or R) should be at maximum, and the other two should be at minimum. And that will give us (you’ve guessed it) pure red.
(Incidentally, the reason that 255 is the maximum value is also related to the ease of using this value [or, actually, 256 including 0] in binary. 256 is 2^8. But that’s another factoid you really don’t need to know.)
The observant readers among you will already have spotted that, even at this stage, it’s pretty simple to work with colors in this form. Black, as an RGB value, is RGB (0,0,0), and white is RGB (255,255,255). Green? That’s right, RGB (0,255,0).
How Hex Colors Work
Now that we know how colors work, we can look at a real hex color code. Take, for example, #ff0000, and let’s combine our knowledge from above to work out what it means.
Take a look at your hexadecimal table, and you’ll see that “FF” translates to “255” in standard, base-10 encoding.
This should be a clue. The two first characters of this hex color code (and, in fact, all hex color codes) refer to the red component, and here the value is 255. The second two characters refer to the green component, and the last two to the blue.
From here, you can work out what #ff0000 means when translated to a color – it’s the same as RGB (255,0,0). That is, pure red. Similarly, #ff00ff indicates maximum red and blue simultaneously, which produces magenta:
It’s at this point that you might start to recognize the value and elegance of hex color codes. Because they use hexadecimal, and because 255 is the maximum value for a component, every possible color can be expressed using just 6 digits.
This system also means that there are a huge range of colors available, because each component can take on any value from 0 to 255. Do the math on the number of possible different combinations, and you’ll find that there are 16,777,216 colors available.
How to Use Hex Code Abbreviations
At this point, since you understand hex color codes, you can begin to use them in your web projects instead of using a color picker on your graphical interface.
However, before we get to that, it’s important to realize that these two options are not the only ones open to you.
HTML, because it was designed to be easy to use, also allows you to use abbreviated hex codes. Red, which is #FF0000 in hex code, can be shortened to #F00. That is, one digit for red, one digit for green, one digit for blue. Browsers will interpret #FF0000 and #F00 as exactly the same color.
This reduces the total number of possible colors to around 4,000. However, it has other advantages.
Just as you can use shorthand to optimize CSS delivery, encoding your colors using abbreviations can improve the performance of your web pages. This might not be visible when working with small pages, but can have a significant impact as your projects get more complex.
How to Use Your Own Hex Codes
At this point, you should be ready to start using hex codes instead of the color picker on your web design software. Most web builders will allow you to enter a hex code instead of clicking a color with a mouse, and taking this approach has several key advantages.
One is that it’s easier to keep track of which colors you are using. When designing using a color picker, it’s easy to accidentally use a color that is very close, and therefore all but indistinguishable, from the one you actually want.
This means that before you know it, your pages are in two similar but distinct shades of red. Using a hex code means you’ll get the same color every time.
Secondly, using hex codes allows you a fine level of control over your colors that is not possible with a color picker.
No color picker can contain all 16 million colors available to you when using HTML, but by writing your own color codes you can increment the shades that are available to you one value at a time.
Third, an understanding of the way that colors work on a computer screen is invaluable when it comes to designing web pages, or in fact any piece of software. With just a little insight into the way that your devices interpret code and displays colors, you can begin using hex codes to mix colors, and also ensure that the color you want to display is the one that actually appears on your users’ screens.
Going further
Playing around with hex color codes in HTML might be fun, but it also has a serious objective. Almost all image manipulation software uses the same encoding, and so learning how hex color codes work will add a useful and fundamental skill to your coding knowledge.
Take a look at how JPG works, for instance, and now you’ll already be familiar with some of the terminology. The next time you build a web page, drop the color picker, and code your colors by hand.