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 conduct we will study 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 understand there are two common ways to define a color in web design:

rgb(_________)

#_ _ _ _ _ _

Both of these are most often implemented using CSS or HTML love you can review below:

Text Here Text Here

.foo {color: rgb(111222111);}

In the first code sample each Text Here text would show up as a light dark color. We ll go through 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(111222111). 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(1013729)

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 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:

This holds correct since the RGB color system is based on color through light. This is much different from how you would normally create colors for example with stain or crayons. If you had a combination of rgb(255255255) using paint you d probably come out with something like murky brown except certainly not white!

Exhibit B: Hexadecimal

Hexadecimal color is generally more hard to interpre than RGB. Fundamentally they are the same. However hexadecimal s inside workings are undoubtedly more convoluted.

To explain hexadecimal color we ll first have to drop back into some binary and into the base sixteen number system in order to understand what something like this is truly trying to say :

#554BFF

For those of you who do not know how either of these job or what either of them are here is a concise guide:

Binary 101

If that was slightly confusing I suggest reading over it again. If it serene doesn t make sense behind 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 receive 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 get 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 842 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 inspire you to try some others quickly by yourself. Ill even give you one:

Convert from binary to decimal: 1010

Hint: Its between 9 and 11.

This may feel like its going nowhere in relation to web development but trust me were almost there.

In hexadecimal there are sixteen different representations for a binary sequence: 0123456789ABCDE 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

Heres a quick map 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 were a bit closer to figuring out exactly how hexadecimal works. Quickly lets conceive an example of an HTML color code being divided into three parts:

#006699 to -> #006699

Now that looks a little familiar; if youre thinking what Im thinking youre right. Hexadecimal is organized exactly the same way as RGB: it has a value for each red green and blue. The core difference is:

Well now seem into how you can create a value up to 255 since so far weve only learned how to create numbers up to 15.

Binary: 0110 Bit values: 128 64 32 16 Add together all that are true: 0+64+32+0 Yields: 96

Weve 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 equivalent to rgb(102102102).

Lets 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(255255255) which is white also.

For comprehensions sake lets do one final conversion. This time were 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(106180255).

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 well 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 semester 24-bit color often referred to as True Color.

With 24-bit color we are capable of creating up to 16777216over sixteen millioncolors. 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). Its quite fascinating really! The image sizes of 4096 4096 make sense since 4096 is the square root of 16777216.

Finally: Applications

In order for this scholarship to be of any use to us youre going to need to learn how to make your own colors quickly and easily. Well start off as simple as possible and then move into more difficult-to-articulate colors.

Lesson Exploration #1

Lets 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 wed 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 lets 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 comparable it will appear as grey. One such example of this is the color Gainsboro which has a color code of #DCDCDC. This means that its just one less than our #DDDDDD color in each value of red green and blue. Youll probably not be capable to differentiate between the two but incrementing or decrementing by 1 will give you a bit more grey precision.

Lesson Exploration #2

The second most simple set of colors you can create are red green and blue (obviously). Lets 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 wed just put #FF0000. Now weve 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 well need to shade them accordingly.

Fortunately shading is easy too. Lets 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 lets 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 difficultits a simple thing 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).

Lesson Exploration #3

I guess you are probably thinking: so what about yellow purple and all the other colors? Well fortunately its just a little bit more complex than the large three of RGB. Lets start with yellow.

To create yellow well 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 well 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 well go over in a minute. First lets figure out how to shade these colors.

Simply enough well 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.

End Note on Shading

In order to make a color lighter its 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 its the same process. Increase the low values: #FFAAFF. This produces a light pink color. Works like a charm!

Applications 2: Logically Creating and Decoding Colors

So far weve learned how to create the most simple of colors but in most applications this knowledge will not be helpful for a project. Thats where this second part comes into play.

Creating a Custom Color

In order to create a nice looking color well need to work off of what we know already and think through what we are trying to create in a logical manner. Lets 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.

Well start with what we already know how to make and thats yellow: #FFFF00. We need to move it a bit closer to the orange area so to do so wed 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 Id like to mention is that you might be wondering why I didnt 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 youll 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 its 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.

The process of decoding color codes principally 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 reproduction 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:

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 lets talk more in the comments!

Sent from my iPhone