What exactly is a hex code? Well, when you went to school and learned math, the system you learned was the decimal system or base 10. In base 10 we use the numbers 0-1-2-3-4-5-6-7-8-9........look familiar?
Computers on the other hand use a different system called the hexidecimal system or base 16. Because we don't have symbols to represent 10-11-12 etc we use letters to represent those numbers. 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F
So what does that have to do with colors? Well, I'll tell ya. Computers see colors in RGB (Red, Green, Blue), each of those can have a value from 0 to 255, with 0 being the absence of color, 255 being full color.
Example: Red = 255-0-0
Green = 0-255-0
Blue = 0-0-255
Here is a chart showing the hexidecimal equivalents from 0-255.
0 = 0 51 = 33 102 = 66 153 = 99 204 = CC
1 = 1 52 = 34 103 = 67 154 = 9A 205 = CD
2 = 2 53 = 35 104 = 68 155 = 9B 206 = CE
3 = 3 54 = 36 105 = 69 156 = 9C 207 = CF
4 = 4 55 = 37 106 = 6A 157 = 9D 208 = D0
5 = 5 56 = 38 107 = 6B 158 = 9E 209 = D1
6 = 6 57 = 39 108 = 6C 159 = 9F 210 = D2
7 = 7 58 = 3A 109 = 6D 160 = A0 211 = D3
8 = 8 59 = 3B 110 = 6E 161 = A1 212 = D4
9 = 9 60 = 3C 111 = 6F 162 = A2 213 = D5
10 = A 61 = 3D 112 = 70 163 = A3 214 = D6
11 = B 62 = 3E 113 = 71 164 = A4 215 = D7
12 = C 63 = 3F 114 = 72 165 = A5 216 = D8
13 = D 64 = 40 115 = 73 166 = A6 217 = D9
14 = E 65 = 41 116 = 74 167 = A7 218 = DA
15 = F 66 = 42 117 = 75 168 = A8 219 = DB
16 = 10 67 = 43 118 = 76 169 = A9 220 = DC
17 = 11 68 = 44 119 = 77 170 = AA 221 = DD
18 = 12 69 = 45 120 = 78 171 = AB 222 = DE
19 = 13 70 = 46 121 = 79 172 = AC 223 = DF
20 = 14 71 = 47 122 = 7A 173 = AD 224 = E0
21 = 15 72 = 48 123 = 7B 174 = AE 225 = E1
22 = 16 73 = 49 124 = 7C 175 = AF 226 = E2
23 = 17 74 = 4A 125 = 7D 176 = B0 227 = E3
24 = 18 75 = 4B 126 = 7E 177 = B1 228 = E4
25 = 19 76 = 4C 127 = 7F 178 = B2 229 = E5
26 = 1A 77 = 4D 128 = 80 179 = B3 230 = E6
27 = 1B 78 = 4E 129 = 81 180 = B4 231 = E7
28 = 1C 79 = 4F 130 = 82 181 = B5 232 = E8
29 = 1D 80 = 50 131 = 83 182 = B6 233 = E9
30 = 1E 81 = 51 132 = 84 183 = B7 234 = EA
31 = 1F 82 = 52 133 = 85 184 = B8 235 = EB
32 = 20 83 = 53 134 = 86 185 = B9 236 = EC
33 = 21 84 = 54 135 = 87 186 = BA 237 = ED
34 = 22 85 = 55 136 = 88 187 = BB 238 = EE
35 = 23 86 = 56 137 = 89 188 = BC 239 = EF
36 = 24 87 = 57 138 = 8A 189 = BD 240 = F0
37 = 25 88 = 58 139 = 8B 190 = BE 241 = F1
38 = 26 89 = 59 140 = 8C 191 = BF 242 = F2
39 = 27 90 = 5A 141 = 8D 192 = C0 243 = F3
40 = 28 91 = 5B 142 = 8E 193 = C1 244 = F4
41 = 29 92 = 5C 143 = 8F 194 = C2 245 = F5
42 = 2A 93 = 5D 144 = 90 195 = C3 246 = F6
43 = 2B 94 = 5E 145 = 91 196 = C4 247 = F7
44 = 2C 95 = 5F 146 = 92 197 = C5 248 = F8
45 = 2D 96 = 60 147 = 93 198 = C6 249 = F9
46 = 2E 97 = 61 148 = 94 199 = C7 250 = FA
47 = 2F 98 = 62 149 = 95 200 = C8 251 = FB
48 = 30 99 = 63 150 = 96 201 = C9 252 = FC
49 = 31 100 = 64 151 = 97 202 = CA 253 = FD
50 = 32 101 = 65 152 = 98 203 = CB 254 = FE
255 = FF
So Red would be FF-0-0
Green= 0-FF-0
Blue= 0-0-FF
Since we have 3 colors, each with a value that can range from 0 to 255 we have 16,777,216 possible color combinations. With that many options how do you match the border of your website to the font in your logo.......easy, you use the same hex code for all of them.
Now lets say that you find the perfect yellow on someone's website and you want that exact yellow for part of your website. No problem. There is two ways you can do that.
1. In your browser options click on web designer then page source and read through lines upon lines of code and hope it's there and not in a .css document which you don't have access to.
or
2. User a color picker.
Frankly, I've done both and the color picker is the easier and least time consuming option.
Personally I use Color Pix. It's free and easy to use.
As you move your mouse around the color it's touching shows up in the little window and in the setting to the left you can find the hex code. You can see in this picture the hex code for the color shown is: #77625F
You can click the image above or click here to go to ColorSchemer and download ColorPix for free. It's a life saver and just plain old fun to use.
In this picture the color orange you see is #FB852D. Notice the little lock on the orange? That's another nice feature of Color Pix. You can press any key and lock the color into the finder so you won't loose it when you move your mouse. Then you can ctrl +c to copy the hex code and ctrl +v to paste it right where you want it.
I hope you learned something new. Comment are welcome. :)
No comments:
Post a Comment