Have you ever had to customize the color of something on the web, then had to enter #FF0000 to make that item red?
If you’ve ever been curious to understand how Hexadecimal color settings work, or just wanted to use them with a bit more confidence, this article will shed some light on that mysterious color value.
1, 2, 3, 4, 5, …, 252, 253, 254, 255, 256
0, 1, 2, 3, 4, 5, …, 251, 252, 253, 254, 255
255, 0, 0 = #FF0000
256 = 16 x 16
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
With a hexadecimal system, we get 16 digits instead of 10. If we reflect on our red hexadecimal color, the red value is the first two places, green the second two places, and blue are the last two places.
#FF0000
Each of these single character values can hold 16 pieces of information, instead of the 10 we are accustomed to. To convert the red value to a number, we might find easier to understand, we can convert this back into 255. This next step requires a little math, but it’s not math we would regularly use. As you work with this system of hexadecimal, you quickly get familiar with how to adjust these values to get the desired result.
A brief math interlude
Let’s try an example first in our familiar base 10 system. How do we evaluate the number 14? Starting out with the number in the 10’s column (1), it is 10 times the value of the number in the ones column (4). So if we evaluate this number, we would say (1×10) + 4, which gives us 14.
14 =
(1 x 10) + 4
Looking at the number FF, the F on the left is 16 times the value of the digit on the right. If F equals 15, that gives up (15 x 16) + 15.
FF = (F x 16) + F =
(15 x 16) + 15 = (240) + 15 = 255
That’s red set to full intensity. In practical terms, it’s good to understand how this works, but usually we keep in mind that A is bigger than 9, and that C is bigger than A, and F is the biggest single value character we have.
Once we understand how one of the colors works, we can see how they combine together to make all the colors we see on a screen. Each pixel (or group of red, green, and blue lights) varies the intensity of the three lights that make it up to render all the colors we see.