HTML color codes are a common and crucial piece of modern web design. While most sites nowadays are designed largely in part with images, colors are particularly important when you need to come up with a color hex value on the fly while coding. In this guide, we will learn the fundamentals behind color coding, ultimately providing you the power to come up with colors without the use of a color picker.
Introduction: Color Codes
As you may know, there are two common ways to define a color in web design:
- rgb(___,___,___)
- #_ _ _ _ _ _
Both of these are most often implemented using CSS or HTML, as you can review below:
Text Here
Text Here
.foo {color: rgb(111,222,111);}
In the first code example, each “Text Here” text would show up as a light grey color. We’ll go over why that is later on; however, notice how even though the color methods appear to be quite different, in actuality, they are the exact same color.
In the second example, we just have some quick CSS code. It’s pretty straightforward — anything with a class of “foo” will have a text color of rgb(111,222,111). For the more curious, that would be a lime green-ish color.
So far, most of this should make sense to you. Let’s now get into exactly how we go from those relatively cryptic codes into something a bit more concrete.
Exhibit A: RGB
In RGB, each value between the commas can be a number from 0 to 255. For example:
rgb(10,137,29)
Since RGB stands for “Red Green Blue,” this means that there is a value of 10 for red, 137 for green, and 29 for blue. Inevitably these are a kind of irreducible fraction. Thus:
- the red would be 10/255 (ten out of
a maximum value of 255)
- the green would be 137/255 (137 out of a maximum of 255)
- and 29/255 for blue.
The higher the number, the more of that certain color there will be in the final result.
When set to zero, there is none of that particular color. At 255, the opposite of course proves true. Therefore:
- rgb(0,0,0) = black
- rgb(255,255,255) = white
This holds true because the RGB color system is based on color through light. This is much different from how you would normally create colors, for example, with paint or crayons. If you had a combination of rgb(255,255,255) using paint, you’d probably come out with something like murky brown, but certainly not white!
Exhibit B: Hexadecimal
Hexadecimal color is generally more difficult to explain than RGB. Fundamentally, they are the same. However, hexadecimal’s inner workings are undoubtedly more convoluted.
To explain hexadecimal color, we’ll first have to fall back into some binary and into the base sixteen number system in order to understand what something like this is really trying to “say”:
#554BFF
For those of you who do not know how either of these work, or what either of them are, here is a brief guide:
Binary 101
- Binary is composed entirely of zeroes & ones.
- A zero yields a value of zero, and one yields a value of one; but not always.
- A bit is either a 1 or a zero. 1 is a bit. 0 is a bit. But 01 is not a bit — it’s 2 bits. 10 is not a bit either, it’s 2 bits as well.
- Let’s imagine that we have four bits; this is cleverly named a nibble, or half a byte. Instead of this number equaling two, or 11, or 110, or whatever you might be guessing, it’s actually much different.
- As more bits accumulate, the value of each bit doubles.
- As the first bit has a maximum value of one, and an alternative value of 0, the second bit can be 2 or 0, the third can be 4 or 0, the fourth can be 8 or 0, and so on and so forth.
- Using this system, you can actually create any normal (base 10) number. Any number at all.
- Note: The accumulated values add together, depending on whether they are a 1 or a 0. Additionally, you should note that binary reads, in most cases, from right to left.
If that was slightly confusing, I suggest reading over it again. If it still doesn’t make sense after that, that’s perfectly okay–the following examples will help bolster your understanding.
Wait – How Does this Relate to Color Codes?
Hexadecimal, as the name implies, provides sixteen usable “values” for a number to take on. As you might have noticed earlier, a “nibble” can give you any number from 0-15: sixteen values total!
Proof of Concept
Assuming we have the following:
1111
And knowing that the binary values of each bit will become as follows:
8 4 2 1
The binary value of 1111 will become:
8+4+2+1
which is…
15
Likewise, if the binary number had been 0000, the final outcome would have just been zero, because 0+0+0+0 equals 0.
One More Example
binary: 0101
The values for each bit are 8,4,2, and 1 (in order). Add together the binary values of the ones:
0+4+0+1
Equalling 5.
Hopefully those quick examples are helpful. I encourage you to try some others quickly by yourself. I’ll even give you one:
Convert from binary to decimal: 1010
Hint: It’s between 9 and 11.
This may feel like it’s going nowhere in relation to web development, but trust me, we’re almost there.
In hexadecimal, there are sixteen different representations for a binary sequence: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E, and F. These, in turn, represent the numbers 0-15 (16 numbers total). Both of these represent the same binary number. But quickly — stop and think — #FFFFFF yields white, correct? And you can never have a letter higher than F in an HTML color code. Keep that in mind.
Binary, Decimal, and Hexadecimal Relationships
Here’s a quick chart that maps the relationship between binary, decimal, and hexadecimal:
This means that, if you wanted to create the number 15, you could write F in hexadecimal, or 1111 in binary. Additionally, if you wanted to make, say, 10, you would write A in hexadecimal or 1010 in binary.
Applying Hexadecimal to Color Codes
Now, we’re a bit closer to figuring out exactly how hexadecimal works. Quickly, let’s imagine an example of an HTML color code being divided into three parts:
#006699 to -> #00,66,99
Now that looks a little familiar; if you’re thinking what I’m thinking, you’re right. Hexadecimal is organized exactly the same way as RGB: it has a value for each red, green, and blue. The core difference is:
- RGB can take up to three characters in order to define a number from 0-255.
- Hexadecimal, on the other hand, only requires two to make a value from 0-255. This is partly why hex is the more common way of using colors in web development — simply because it is easier to type, requiring fewer characters.
We’ll now look into how you can create a value up to 255, since so far we’ve only learned how to create numbers up to 15.
- Let’s say we have a number, like 66. The catch here is that 66 is written in hexadecimal, not in regular numerics. Therefore, this will not equal 66, it will equal something different, something larger.
- First, let’s convert this problem into binary. According to our handy chart above, 6 in binary is 0110. This means that 66, in binary, would be 0110 0110 (or 01100110, same thing).
- Since binary reads from right to left, we’d decode the farthest right portion first. As we know, the first 0110 would equal 6.
- Then, the left. Since there are two hexadecimal characters linked together to make “66″, the far left binary digits would equal something different, and definitely not 6 again. Once again, we would continue doubling the value of each bit.
- From left to right, the values of each bit (with 8 bits [which is one byte!]) would be: 128, 64, 32, 16, 8, 4, 2, 1. So considering the bits for the left side have a much larger value, we’ll be getting a much larger number:
Binary: 0110
Bit values: 128 64 32 16
Add together all that are true: 0+64+32+0
Yields: 96
We’ve found that the first nibble on the right equals six. And now, we have found that the second nibble on the left equals 96. So, what do you do with these? Just add them! 96+6 = 102. Therefore, the hexadecimal value of 66 is 102 in the normal decimal system.
What this means is that, in hexadecimal, the RGB equivalent of 66 (in hex) is 102. Accordingly, #666666 is equal to rgb(102,102,102).
Let’s do one more hex to decimal conversion:
Hexadecimal: FF
Binary: 1111 1111
Bit values: 128 64 32 16 8 4 2 1
Add: 128+64+32+16+8+4+2+1
Yields: 255
255 is the maximum value for any color. So, if we had #FFFFFF, which we all know to be white, it would be rgb(255,255,255), which is white also.
For comprehension’s sake, let’s do one final conversion. This time, we’re going to convert an entire hexadecimal color to RGB. Our color is #6AB4FF.
6A
------
Binary: 0110 1010
Add: 64+32 + 8+2
96+10
Yields: 106
------
B4
------
Binary: 1011 0100
Add: 128+32+16 + 4
176+4
Yields: 180
------
FF
------
(We have already done this, so we know that it's 255)
Conclusion: #6AB4FF is equivalent to rgb(106,180,255).
Now, you may be wondering how we get from these values to an actual color we can envision in our head. The next section will help cover that. So, now that we know how hexadecimal and RGB are related, and now that we know how hexadecimal actually works, we’ll now review how you can come up with a color on the fly in your own code, and help you to make any color without ever needing to use a color picker.
True Color
Quick Fun Fact: Since there are 8 bits in each value of red, green, and blue, that means there are 24 bits total in one RGB color (8*3 = 24). This is where we get the term 24-bit color, often referred to as “True Color”.
With 24-bit color, we are capable of creating up to 16,777,216–over sixteen million–colors. This is typically more than satisfactory for any project. 32-bit color, however, has started to become more prominent, but not necessarily in the area of web design. You can read more about color depth at Wikipedia.org in this article. Additionally, you can view an image of all ~16 million colors in one image here (David Naylor Blog). It’s quite fascinating, really! The image sizes of 4096×4096 make sense since 4096 is the square root of 16,777,216.
Finally: Applications
In order for this knowledge to be of any use to us, you’re going to need to learn how to make your own colors quickly and easily. We’ll start off as simple as possible, and then move into more difficult-to-articulate colors.
Lesson Exploration #1
Let’s say we want to make a grey color on the fly. Greyscale colors are common, and tend to be the most useful in many cases. So far we know the following: #000000 equals black,
and #FFFFFF equals white. Therefore, the more common of the grayscale colors are going to be increments between those two values. To make a shade of gray, we’d appropriately establish values between white and black.
Logically, a value closer to #FFFFFF will be a lighter tone of grey, and a value closer to #000000 will be darker. With that in mind, let’s make a fairly light grey color. Some quick thinking gives us the following resolution: #DDDDDD is comfortably far enough away from white, so it clearly will be a nice light grey for us.
Later on, we want to make a darker grey. Yet again, simple. Just do something like #333333. As you can see, grey values are very simple. If you find that you need an even more specific shade of gray, remember that, as a general rule of thumb,
if each value for red, green, and blue are all the same, or are almost similar, it will appear as grey. One such example of this is the color “Gainsboro” which has a color code of #DCDCDC. This means that it’s just one less than our #DDDDDD color in each value of red, green, and blue. You’ll probably not be able to differentiate between the two, but incrementing or decrementing by 1 will give you a bit more “grey precision.”
#DDDDDD paired with its dark gray counterpart, #333333
Lesson Exploration #2
The second most simple set of colors you can create are red, green, and blue (obviously). Let’s use red as an example. If we want to create pure RGB red, we will give the color value
the maximum value of red, with 0 green, and 0 blue. That makes sense right? To make red in hexadecimal, we’d just put #FF0000. Now we’ve got red.
Creating green and blue follow the exact same principle. To make pure green: #00FF00 (all green, nothing else). To make pure blue: #0000FF (all blue, nothing else).
Simple enough; however, these colors are, under most circumstances, absolutely hideous when used in a web design. Therefore, to put these colors to use we’ll need to shade them accordingly.
Fortunately, shading is easy too. Let’s use blue for this example. We already have #0000FF set up for us. In order to change the shade of our blue value, we merely need to change the last two characters of the hexadecimal color code. Since FF is the highest blue possible, at this point we really can only make it darker. As such, let’s do just that:
Changing #0000FF to #000055 (decreasing the amount of black, thus moving the blue closer to black) will yield a darker blue.
As you can see, shading red, green, and blue is far from difficult–it’s a simple matter of decreasing the quantity of a certain color. The same rule applies to red and green, not just black, so #005500 is a darker shade of green, and #550000 is a darker shade of red. (Of course, you can go lower or higher than 55 if you wish).
Regular red, green, and blue, next to some darker versions of themselves.
Lesson Exploration #3
I suppose you are probably thinking: so what about yellow, purple, and all the other colors? Well, fortunately it’s just a little bit more complex than the big three of RGB. Let’s start with yellow.
To create yellow, we’ll first need to think in terms of the color spectrum. A little mnemonic that people like to use is “Roy G. Biv”, which stands for “red, orange, yellow, green, blue, indigo, violet. Now the logic in this is somewhat confusing, but try to stick with me. To get yellow, we use the two main colors from red, green, and blue on either side of where yellow would be. In this case, it would be red and green. Thus, if we wrote #FFFF00, we would have yellow. Fantastic!
There are only a few other possible combinations using this method, so we’ll go over them quickly. Between red and blue on a color wheel, the code would be #FF00FF, and we would get pink, or magenta as it is traditionally called, Next, between green and blue (#00FFFF), we have cyan. And now, sadly, that is actually all of the simple combinations we can do. The rest requires some thought, which we’ll go over in a minute. First, let’s figure out how to shade these colors.
Simply enough, we’ll start shading cyan this time, which, as we remember, is #00FFFF. And…you probably guessed it, but to shade yellow, cyan, or pink, all you have to do is change any FF values to a smaller one. In this example, shading cyan down to a much darker variety, we could do something like #005555. One of the official HTML color names, DarkCyan, is #008B8B, so that one would be a little lighter than the one we just created. So there we have it: how to shade yellow, cyan, and pink.
Yellow, magenta, and cyan next to their darkened versions
End Note on Shading
In order to make a color lighter, it’s as simple as making the low values (the 00 values, typically) greater and leaving the FF (or other main colors) alone. For example, if we had green, and we wanted to make it lighter, we would start out with #00FF00. Then, to lighten it, we would simply increase the 00 values. #AAFFAA produces a nice, spring color green.
Additionally, in order to make #FF00FF (Pink) lighter, it’s the same process. Increase the low values: #FFAAFF. This produces a light pink color. Works like a charm!
Our spring green and light pink colors.
Applications 2: Logically Creating and Decoding Colors
So far, we’ve learned how to create the most simple of colors, but in most applications, this knowledge will not be helpful for a project. That’s where this second part comes into play.
Creating a Custom Color
In order to create a nice looking color, we’ll need to work off of what we know already, and think through what we are trying to create in a logical manner. Let’s create a scenario; we want to make a subtle orange color that fits our needs — sort of like a slightly darker shade of orange soda.
We’ll start with what we already know how to make, and that’s yellow: #FFFF00. We need to move it a bit closer to the orange area, so to do so, we’d alleviate some of the green “pull,” as I like to call it. Doing so increases the amount of red. I chose to change it to #FF5500. This quick and simple example gives you an idea of how you would go about creating a color. The last thing I’d like to mention is that you might be wondering why I didn’t start adding to the blue quantity, which we left at a value of 00. The reason is because, when you start adding blue slowly in increments of 11, 22, 33, et cetera, it still looks fairly orange. However, once you get past 55, you’ll see some issues. Especially, if we increase it all the way up to something like #FF5599. What happens is that it turns into a really pink color. Why is this? Well think back to when we originally created pink. The code was #FF00FF. The red is maxed out and the blue is maxed out. So, in our orange color, when you start changing #FF5500 to #FF5599, our red and green values are no longer the prominent values. Instead, it’s red and blue, which yield pink. In this fashion, the 55 value for green would simply be lightening our shade of pink, instead of moving it towards the orange area.
Our orange color. It looks like orange soda, huh?
Note to reader: creating complex color codes, admittedly, is quite impractical. In the time it would take you to create a sufficient color, you could have easily gotten several good colors out of a color picker. For a complex color, it would be best not to try and create it yourself. Instead, just leave it to the tried-and-true, and save yourself precious time. You will, however, want to use your skills to perform a simple task like darkening or lightening a color quickly on the go.
Decoding a Color
So you see this lovely color code, staring you in the face, but you have no idea what color it really is. Great! This is probably where the most fun comes in. The best way to teach you how to do this is by performing a simple test. I was once asked the following few questions on a test in one of my Information Technology classes.
1. #000000 represents the color ____.
- green
- black
- white
- red
2. #00FF00 represents the color ___.
- green
- black
- red
- white
3. #FFCC66 represents a shade of ___.
- blue
- red
- purple
- gold
Hopefully you were able to figure all of these out! Especially the first two. You should have been able to figure out that the answer to number one was black, or B. For the second question, the answer was also quite simple. Following the scheme of red, green, blue, we know that since every value except for green is set to 00, that the color will be some shade of green. Additionally, since the value for green is FF (or 255), we know that this color will be pure green. Thus, the answer will be A.
It seems like the only difficult-to-decipher color here would be number three, #FFCC66. This is understandable. Since the blue value (which is 66) is so much smaller than the other two numbers, it could be deemed relatively irrelevant. Thus, you could compare it to the color for yellow, #FFFF00. Between those two, they look somewhat similar. With this method, you can tack out the first three answers, since none of them are remotely close to yellow. Therefore the answer is D. The decreased green value of CC will shade the color slightly, and the increase of blue will push the color into being much more similar to gold.
Regular red, green, and blue, next to some darker versions of themselves.
The process of decoding color codes primarily includes thinking through it and comparing it to colors you already know!
One Laster Pointer
Here is one last quick tip on how you can speed up creating a color using the hexadecimal system. Using this method, you can cut some color codes down from seven characters down to four (e.g. #_ _ _ _ _ _ to # _ _ _ ). This method is called color shorthand, and the idea behind it is that it will take the value of each of the three main characters, and duplicate them invisibly. What I mean by that is this: if you had the color code #123, it would be the equivalent of #112233. You can do this for any color code where each hexadecimal value for red, green, and blue is the exact same character. Some more common shorthands are:
- #000 for black(#000000)
- #fff for white (#ffffff)
- #f00 for red (#ff0000)
- #0f0 for green (#00ff00)
- #00f for blue(#00f)
Conclusion
Hopefully this article helped you to learn about how color codes really work. In many programs, like Photoshop, it will admittedly be easiest to use the built in color pickers. The core area where this skill will come in handy is when you are looking through some CSS source code, and want to simply figure out what kind of color it is without having to resort to another resource. Regardless of which method is quicker, as web developers and designers, these are things we should want know! Thanks so much for reading. This is an understandably difficult topic, so let’s talk more in the comments!
