Question

A Breakdown of Hexadecimal Color Codes

Answer 1

I contemplated revamping my old LaTeX tutorial, but I decided against it because there are many great tutorials alive already! If anyone wants a peek, it is still one of my few questions. Today, I want to show you something different -- hexadecimal color codes, and how they return the colors that they do!

You have probably noticed these little devils somewhere.
\( \color{#B57373}{\#B57373} \quad \color{#00b1f2}{\#00B1F2} \quad \color{#19A525}{\#19A525} \)
They make some pretty cool colors, and there are many of 'em out and about. One of these is even the color that OpenStudy's links are! But why is #00B1F2 so much more blue than #19A525 ? Can we guess our own favorite color in hexadecimal? I hope to show you that all this and more is possible with some understanding of the ropes! Maybe you won't even need to look up your favorite hexadecimal color codes anymore!

Answer 2

Another name for hexadecimal color code is hex triplet. This is because we literally are viewing three pairs of hexadecimal digits. An adept understanding requires that we know Hexadecimal, so I will include more on this at the end. But basically, base 16 means each digit represents a power of 16 rather than in base 10 where it is a power of 10. We use the digits A,B,C,D,E, and F to make up for the numbers 10 through 16 which do not fit on two digits like they do in base 10.

If you played with MS Paint before, you may know that custom colors are defined in terms of the amount of red, green, and blue in them using numbers between 0 - 255. 255 is just one less than 256, which is 16^2. So we can represent all those numbers in base 16 with only two digits (because 256 is the first number to use the third digit, 100)! The lowest being 00, and the highest being FF.

Each pair is a specific amount of red, green, or blue in the color, in that order. If it is hard to see without a visual, let's break out an example.
\( \rm \color{#19A525}{\#19A525} \)
This is a fairly green color. And with good reason, too, because if we separate this into the reds, the greens, and the blues:
\( \rm \underbrace{\#\color{#190000}{19}\color{gray}{A525}}_{\color{#FF0000}{red}} \quad \underbrace{\#\color{gray}{19}\color{#00A500}{A5}\color{gray}{25}}_{\color{#00FF00}{green}} \quad \underbrace{\#\color{gray}{19A5}\color{#000025}{25}}_{\color{#0000FF}{blue}} \)
The blues and reds are really low! And the greens are nice and vivid. So the green takes over the color!

Answer 3

Some guidelines:
#000000 is Black. #FFFFFF is White.
Generally, the further apart the numbers are from each other, the more vivid it is. As the numbers get closer together, you get more basic gray colors.
\( \rm \color{#105090}{\#105090} \) \(\color{#205080}{\#205080} \) \(\color{#405060}{\#405060} \) \(\color{#606060}{\#606060} \)
The higher up all the values are, the brighter the color is. So having all three numbers relatively larger makes a brighter color, and having all three numbers fairly low makes it quite dark.
\( \rm \color{#105010}{\#105010 \ Dark \ Green} \) \( \rm \color{#50F050}{\#50F050 \ Light Green} \)

Let's say I want to copy a color from a picture, but I don't know what code corresponds to the image. How about that pretty green color on the top right:
http://upload.wikimedia.org/wikipedia/commons/7/7d/Color_icon_green.svg
I'll start with a guess. \( \color{#00FF00}{\#00FF00} \)
My favorite green has more blue. But it isn't enough to pull against the green in there. Let's try 75 in blue (another guess) \( \color{#00FF75}{\#00FF75} \)
Pretty close already, maybe just a bit less blue and we'll get it like we want it!
Or if we wanted to be extra-picky, we could take the color of blue into an image editing service like Paint and try to find what those RGB values are. If we know those, we convert to hexadecimal for each! But that mainly works only if you know how to convert, so that is worth a bit for the next part.

Answer 4

---- Hexadecimal (Base 16) ----

You live in the world of ten fingers (I presume), and so we use what is called the base ten system or decimal system. Each digit in base 10 represents a different power of 10. Here is an example.
\( 503.6 = 500.0 + 00.0 + 3.0 + 0.6 \)
\( 503.6 = 5 \times 10^2 + 0 \times 10^1 + 3 \times 10^0 + 6 \times 10^{-1} \)
There are exactly ten characters for digits we use: 0123456789. We don't need a digit for 10 because we just carry the 1 to the 'tens' digit, and cycle the 'ones' or 'units' digit to zero again. A popular but vaguely-understood-by-laymen base is base two, or binary, and it makes use of digits that represent powers of 2. For example, 1011 = 1x2^3+0x2^2+1x2^1+1x2^0 in base 10. We only use two characters for digits: 01, and we don't need a digit for 2 because we have a second digit for a 2. There is a pattern here. It applies the same for Hexadecimal!

Hexadecimal is just like the name sounds, hex=six and decimal=ten. Hexadecimal is a base 16 system. We have exactly SIXTEEN characters for digits. WHAT HOW?! Each digit in hexadecimal represents a power of \(\it sixteen\). So a number like 10 < 16 cannot occupy two digits. When in doubt, alphabet! Let's just call each digit above 9 some letter in the alphabet. A=10, B=11, C=12, D=13, E=14, and F=15. We don't need a digit for 16 because that is what the second digit is for. So now we can have beautiful numbers like 2A in hexadecimal. It is the same as 2x16^1 + Ax16^0, or 2x16^1 + 10x16^0, or 42 in base 10. Wonderful!

So the reason this is important is because computers like powers of 2. They have switches that can be on or off -- 0 or 1, and collections of these switches can become much more flexible for information.

Converting from Base 16 to Base 10 seems easy enough. But converting the other way around is a bit more difficult because we don't think in that way. We need to practice some division.
We only need to worry about numbers between 0 and 255, so let's go that direction. Let's convert 201 into hexadecimal. We'll take it by steps, fill in digits in descending order.
The highest power of 16 that fits into 201 is 16, so how many 16's are in 201? We can divide: 201 / 16 = 12 with remainder 9. So there are twelve 16's in 201. That will be our sixteens digit! We said that C=12, so C_.
The units digit is then what we have left over. 9 was our remainder, and there are nine 1's in 9. So that will be our units digit. C9 is our number in hexadecimal! If that were our red value, it would look like this: \( \color{#C90000}{Hello \ world!} \)

------------

Answer 5

So, I hope you learn something from this introduction! I would love to hear comments and constructive criticisms alike! This was something I had drafted and posted fairly recently, so there may be places that can be expanded upon, or done better in general, or replaced entirely. Whatever the case, have fun!

Answer 6

Very informative!

Answer 7

Awesome Job @AccessDenied !!!

Answer 8

Really nice information @AccessDenied - You rock! :)

Answer 9

\(\bbox[3pt,#E50000]{\!} \bbox[3pt,#E53600]{\!} \bbox[3pt,#E56000]{\!} \bbox[3pt,#E58D00]{\!} \bbox[3pt,#E5B600]{\!} \bbox[3pt,#E5D600]{\!} \bbox[3pt,#D0E500]{\!} \bbox[3pt,#B0E500]{\!} \bbox[3pt,#8FE500]{\!} \bbox[3pt,#6EE500]{\!} \bbox[3pt,#41E500]{\!} \bbox[3pt,#01E500]{\!} \bbox[3pt,#00E564]{\!} \bbox[3pt,#00E5AD]{\!} \bbox[3pt,#00E5C9]{\!} \bbox[3pt,#00E0E5]{\!} \bbox[3pt,#00CFE5]{\!} \bbox[3pt,#00B9E5]{\!} \bbox[3pt,#009FE5]{\!} \bbox[3pt,#0087E5]{\!} \bbox[3pt,#0074E5]{\!} \bbox[3pt,#005AE5]{\!} \bbox[3pt,#003DE5]{\!} \bbox[3pt,#002CE5]{\!} \bbox[3pt,#0600E5]{\!} \bbox[3pt,#1E00E5]{\!} \bbox[3pt,#2C00E5]{\!} \bbox[3pt,#3B00E5]{\!} \bbox[3pt,#5000E5]{\!} \bbox[3pt,#6500E5]{\!} \bbox[3pt,#8200E5]{\!} \bbox[3pt,#A000E5]{\!} \bbox[3pt,#BA00E5]{\!} \bbox[3pt,#CE00E5]{\!} \bbox[3pt,#E400E5]{\!} \bbox[3pt,#E500C7]{\!} \bbox[3pt,#E500AC]{\!} \bbox[3pt,#E50093]{\!} \bbox[3pt,#E50077]{\!} \bbox[3pt,#E5005C]{\!} \bbox[3pt,#E50039]{\!} \bbox[3pt,#E5001C]{\!}\)
i did it

Answer 10

AWESOME JOB @AccessDenied !

Answer 11

Hey, if anyone has any suggestions for improvements, I may revise this a little bit. Anything that wasn't clear on the guide above, I would love to know. :D

In other news, I recently came across this site which was really cute
http://whatcolourisit.scn9a.org/
It is the current time with the corresponding hexadecimal color code and color shade in the background. Very cool!