# Hex Color Codes and the Math Behind Them

## 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.

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 (2^{8}) 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.

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

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.

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.)

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