Hex Color Codes and the Math Behind Them

home

Hex Code Format

Although I prefer rgb() codes, hex codes are similarly formatted, with a code for red, green, and blue each. The difference is that hex uses two digits instead of three for each color.

#000000

So why are hex codes a lot less intuitive to adjust than rgb() codes? Why are some hexes pure numbers, pure letters, or a mix of numbers and letters?

Each color is 8-bit, meaning it can store 256 (28) different values. Using two digits with just numbers would only allow 100 values (0-99), but using three digits would allow 100 values (0-999) which is way more than needed.

Instead hex uses letters to make more numbers that fit within one digit space. After 9 isn't 10, but A which has the same value as 10, but only takes up one space. After 9, hex code uses letters A through F, where F is the highest value possible, equal to 15.

The lowest value for each color is 00, making black if all colors are 00.

#000000

The highest value for each color is FF, making white if all colors are FF.

#FFFFFF

FF is equal to 255, which allows for 256 different values (since we start with 0). Consequently the highest value for each color in rgb() is 255!. Red, green, and blue each have 256 values, so combined there are 16,777,216 different possible colors!

Skip the number bases section to learn how to convert between hex and rgb.

Intro to Number Bases

This means that hex codes don't use the standard Base 10 number system that the whole Earth uses.

Base 10 uses numbers 0-9, ten unique numbers that take up one character space. After 9, the numbers are repeated, starting over and using two digits (10). This is baked into how we understand math, time, length, temperature, mass, anything that uses numbers to measure.

You may be familiar with binary code that computers use. Binary code is a well used application of a number system other than Base 10. Instead it's Base 2, using the two numbers 0 and 1.

First few Base 2 numbers and what they equal in Base 10
Base 2 0 1 10 11 100 101 110 111 1000
Base 10 0 1 2 3 4 5 6 7 8

Since we can only use 0 and 1, the next number isn't 2, but 10, since thats the next highest number that only uses numbers 1 and 0. Likewise we have to jump to 100 after 11 because all numbers between 11 and 100 have a digit other than 1 or 0 in them.

Base 16

Instead of reducing the available numbers like binary does, hex code increases them, making Base 16, where F = 15 (just like Base 10's largest single digit is 9, Base 16's largest digit is equal to 15, due to zero being the first digit.)

Single digit hex code numbers and what they equal in Base 10
Hex Code 0 1 2 3 4 5 6 7 8 9 A B C D E F
Base 10 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

After F, the digits start over, making 10 (which is equal to 16 since F was 15).

Hex code 10s and corresponding Base 10 values
Hex Code 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F
Base 10 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Note that after 9 in both bases, the equalivalent values in Base 16 and Base 10 are no longer the exact same number, which can make hex codes confusing, since we assume Base 10 by default.

After 1F (eff-teen?) is 20.

Hex code 20s and corresponding Base 10 values
Hex Code 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F
Base 10 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

Think of 2A, not as "two A" but as "twenty-A".

Hex codes 30-9F follow the same pattern.

Hide 30-8F
Hex code 30s and corresponding Base 10 values
Hex Code 30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F
Base 10 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
Hex code 40s and corresponding Base 10 values
Hex Code 40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F
Base 10 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
Hex code 50s and corresponding Base 10 values
Hex Code 50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F
Base 10 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
Hex code 60s and corresponding Base 10 values
Hex Code 60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F
Base 10 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
Hex code 70s and corresponding Base 10 values
Hex Code 70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F
Base 10 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
Hex code 80s and corresponding Base 10 values
Hex Code 80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F
Base 10 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
Hex code 90s and corresponding Base 10 values
Hex Code 90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F
Base 10 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159

After the 90s, instead of going to 100, we go to A0, since A is the next number after 9.

Think of A0 not as "ay-zero" but as "ay-ty". Where A1 is "ayty one".

Hex code A0s and corresponding Base 10 values
Hex Code A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF
Base 10 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

After the A0s, we go to B0s. Again, think of B0 not as "bee-zero" but as "bee-ty", where B4 is "beety four".

Hex code B0s and corresponding Base 10 values
Hex Code B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF
Base 10 176 177 178 179 180 181 182 183 184 185 186 187 188 198 190 191

C0-FF follows the same pattern.

Hide C0-EF
Hex code C0s and corresponding Base 10 values
Hex Code C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF
Base 10 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
Hex code D0s and corresponding Base 10 values
Hex Code D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF
Base 10 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223
Hex code E0s and corresponding Base 10 values
Hex Code E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF
Base 10 224 225 226 227 228 229 230 231 232 233 234 235 236 227 238 239

Finally we have the F0s (Effties).

Hex code F0s and corresponding Base 10 values
Hex Code F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF
Base 10 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255

After FF would be 100, but since this code only permits two digits for each color, FF is the highest number. As you can see FF = 255 which is the highest value in rgb()! It also makes sense considering 8 bit has 256 different values (0 is the first value).

Unfortunately, hex codes being in base 16 makes them hard to adjust without a color picker, since we are so accustomed to base 10.

Calculations

If you are interested in manually converting RGB to hex, or vice-versa, you can do some calculations. Thankfully these are simple division and multiplication equations, despite number bases being a more complex concept.

RGB to Hex

Take a code for one RGB color and divide it by 16. Take this number and its remainder and find their corresponding Base 16 values from this table:

Base 16 single digits and what they equal in Base 10
Base 16 0 1 2 3 4 5 6 7 8 9 A B C D E F
Base 10 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Suppose our color is rgb(213,40,15). Lets do each color individually.

Red: 213/16 = 13 with 5 remaining.
13 = D
5 = 5
D5 is our red code!

Green: 40/16 = 2 with 8 remaining.
2 = 2
8 = 8
28 is our green code!

Blue: 15/16 = 0 with a 15 remaining.
0 = 0
15 = F
0F is our blue code!

These three codes together in RGB order is #D5280F.

So rgb(213,40,15) and #D5280F should be the same color!

Hex to RGB

Now lets convert a hex code to rgb().

Take the two digits and convert them to Base 10 individually (if you only want to use one table or your memory, rather than looking back at a 255 item reference). Multiply 16 by the first digit after you've converted it. Then add the second converted number.

Base 16 single digits and what they equal in Base 10
Base 16 0 1 2 3 4 5 6 7 8 9 A B C D E F
Base 10 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Suppose our color is #07B3AC.

Red: 0 = 0
7 = 7
(16 * 0) + 7 = 7
7 is our red code.

Green: B = 11
3 = 3
(16 * 11) + 3 = 179
179 is our green code.

Blue: A = 10
C = 12
(16 * 10) + 12 = 172
172 is our blue code.

Together this makes rgb(7,179,172).

rgb(7,179,172) and #07B3AC are the same color.