Have you ever wondered what all those numbers and letters in a hex color means?
What color is #AA3939 or #888888 and why is that combination giving the color that it gives?
Well, it’s not magic, nor is it randomly picked values that correspond to colors.
It’s actually a pretty simple and logical system. The only thing you have to really learn is how the hexadecimal number system work.
Number system
Hex is actually a number system, much like our normal decimal system. The difference is the base the system is based upon. Our normal number system is base 10. Hexadecimal is base 16. What that really means is what each position in a number is worth.
Each positions number worth is calculated with this formula:
Base 10 (Our normal decimal system):
Example:
The number:
We always start from the right and go left. So the first position is worth
The second position is
The third position is then worth
Then you add the all up together:
Easy as that.
Base 16 (Hex):
Example:
The base 16 (hex) number
You might have noticed that hex has letters and number in them. That is because they go from 0-15, and it would very difficult to make sense out of which number goes into which position. So we have 0-9 and then A=10, B=11 all the way up to F=15.
Again we start from right to left. First number is now worth
The second number is
The third number is
The total number shown in our decimal system is then calculated by adding the numbers together:
Making sense of the numbers
A hex color is made up of three parts that represent the amount of Red, Green and Blue that are mixed together. These are split up using the first and second number for red, third and fourth number for green and fifth and sixth number for blue.
Armed with this knowledge, you can now specify the amount of red, green and blue in a color. Since there are two hex numbers for each color, you can have 0 amount of a color (00), all the way up to 255 (FF). Using this system, we can specify a large number of different colors, using the amount of red, green and blue (255*255*255=16 581 375 - to be exact).
Examples:
White is made when mixing the maximum number of red, green and blue together, so it will be #FFFFFF.
Black is when there are no amount of any of the colors. #000000
Shades of grey can be done like this: #111111 (very dark grey - almost black). #CCCCCC (very light grey)
How 3 digit HEX works
Sometimes people like to use a shorthand HEX for some colors with only 3 digits. The way this works is that each digit is representing their color (red, green, blue), but when you write #F00, this is actually the same as #FF0000. So its a shortcut for when you need some special colors like red, green, blue, black, white and grey scales.
Examples:
Black: #000 (#000000)
White: #FFF (#FFFFFF)
Grey: #888 (#888888)
Follow me on Twitter: @gjermundbjaanes