• Listen to a special audio message from Bill Roper to the Hive Workshop community (Bill is a former Vice President of Blizzard Entertainment, Producer, Designer, Musician, Voice Actor) 🔗Click here to hear his message!
  • Read Evilhog's interview with Gregory Alper, the original composer of the music for WarCraft: Orcs & Humans 🔗Click here to read the full interview.

Hexidecimal Color Codes Explained

Level 2
Joined
Mar 15, 2008
Messages
14
Are you sick and tired of relying on third-party programs and websites to do something for you? Have you ever looked at that long list of colors and the codes associated with them and wondered where those codes came from? Well, now you can figure out how to do the Hex codes yourself, and open up an almost infinite amount of colors.

All you need are two programs your computer most likely came with:
--MS Paint
--Calculator


Here we go!

1. Open your paint program. Whatever program you're using, open up the necessary folders to access the color spectrum. It's a box full of color that looks like a rainbow all blended together.

2. Next, click somewhere on the color spectrum for the color you want your text to be. Next, scroll the luminescence bar up or down until the custom color you want is in the Color\Solid box.

3. In the bottom right, you should see Red, Green, and Blue with numbers next to them. These numbers are whats behind the hex code. Our example color is going to be a blood reddish color. The numbers are as follows:
Hue-5 Red - 154
Sat-231 Green- 22
Lum-74 Blue - 3

4. Now bust out a calculator and lets get to work.

In a hex code, each letter and number means something.
ex. |cff123456|r the cff determines the transparancy of your letters. Leave it alone, or toy with it. 12 is Red. It is 1 and 2 - not 'twelve. 3 and 4 are Green, and 5 and 6 are blue.

Remember how our custom color had a Red of 154? We need to make 154 fit into two number slots. The max values of Red, Green and Blue are all 255 - don't forget that. Now here's where it gets trickier.

Our code again was Red154, Green22, and Blue3. Hexidecimally that is |cff9a1602|r. Now here's how we get that:

Let's say Red was 255, and we need to change that into two numbers that mean 255. Well, the two numbers are factors of 16. Without all the mumbo jumbo, heres how to do it:

255/16 = 15.938
Remember the 15. It goes in our first number slot.
.938x16 = 15
This 15 goes in our second number slot.
But JonnyLocke, thats 1515 and FOUR numbers! you say. Okay fine. How about this: we make 10=a, 11=b, 12=c, 13=d, 14=e, 15=f.
So now with our two fifteens, we have 2 'f' instead which will fit in our two character maximum.

Okay. Back to our color R154, G22, B2. Now with the math:
-Red-
154/16 = 9.625
|cff9?????|r
.625x16 = 10 (10 = a remember?)
|cff9a????|r (so 9a is the same thing as 154. The a is 10, and the 9 isn't really a 9, it represents 9x16. So, 9x16 = 144. 144 + 10 = 154!)
-Green-
22/16 = 1.375
|cff9a1???|r
.375x16 = 6
|cff9a16??|r
-Blue-
2/16 = 0.125
|cff9a160?|r
.125x16 = 2
|cff9a1602|r

Numbers less than 16 are a super piece of cake. The first digit will always be zero. The second digit will be what the number is. (anything from 0 to f).

Now for some practice.

R232, G78, B137

232/16 = 14.5 (14 = e)
|cffe?????|r
.5x16 = 8
|cffe8????|r

78/16 = 13 (13=d)
|cffe8d???|r
there is no remainder to multiply by sixteen so it is zero!
|cffe8d0??|r

137/16 = 8.5625
|cffe8d08?|r
.5625x16 = 9
|cffe8d089|r is the same thing as R232, G78, B137!!!

If you just can't get the math, here are the broken down codes:
1=01
2=02
3=03
4=04
5=05
6=06
7=07
8=08
9=09
10=0a
11=0b 0x16=0. 0+11(b)= 11!
12=0c
13=0d
14=0e
15=0f
16=10
17=11
18=12
19=13
20=14
21=15 1x16=16. 16+5= 21!
22=16
23=17
24=18
25=19
26=1a
27=1b
28=1c
29=1d
30=1e
31=1f
32=20
33=21
34=22
35=23
36=24
37=25
38=26
39=27
40=28
41=29
42=2a
43=2b
44=2c
45=2d
46=2e
47=2f 2x16=32. 32+15(f)= 47!
48=30
49=31
50=32
51=33
52=34
53=35
54=36
55=37
56=38
57=39
58=3a
59=3b
60=3c
61=3d
62=3e
63=3f
64=40
65=41
66=42
67=43
68=44
69=45
70=46
71=47
72=48
73=49
74=4a
75=4b
76=4c 4x16=64. 64+12(c)= 76!
77=4d
78=4e
79=4f
80=50
81=51
82=52
83=53
84=54
85=55
86=56
87=57
88=58
89=59
90=5a
91=5b
92=5c
93=5d
94=5e
95=5f
96=60
97=61 6x16=96. 96+1= 97!
98=62
99=63
100=64
101=65
102=66
103=67
104=68
105=69
106=6a
107=6b
108=6c
109=6d
110=6e
111=6f
112=70
113=71
114=72
115=73
116=74
117=75
118=76
119=77
120=78
121=79
122=7a
123=7b
124=7c 7x16=112. 112+12(c)= 124!
125=7d
126=7e
127=7f
128=80
129=81
130=82
131=83
132=84
133=85
134=86
135=87
136=88
137=89
138=8a
139=8b
140=8c
141=8d 8x16=128. 128+13= 141!
142=8e
143=8f
144=90
145=91
146=92
147=93
148=94
149=95
150=96
151=97
152=98
153=99
154=9a
155=9b
156=9c
157=9d
158=9e
159=9f
160=a0
161=a1
162=a2
163=a3
164=a4
165=a5
166=a6
167=a7
168=a8
169=a9
170=aa
171=ab
172=ac
173=ad
174=ae
175=af
176=b0
177=b1
178=b2
179=b3
180=b4
181=b5
182=b6
183=b7
184=b8
185=b9
186=ba
187=bb
188=bc 11(b)x16=176. 176+12(c)= 188!
189=bd
190=be
191=bf
192=c0
193=c1
194=c2
195=c3
196=c4
197=c5
198=c6
199=c7
200=c8
201=c9
202=ca
203=cb
204=cc
205=cd
206=ce
207=cf
208=d0
209=d1
210=d2
211=d3
212=d4
213=d5
214=d6
215=d7
216=d8
217=d9
218=da
219=db 13(d)x16=208. 208+11= 219!
220=dc
221=dd
222=de
223=df
224=e0
225=e1
226=e2
227=e3
228=e4
229=e5
230=e6
231=e7
232=e8
233=e9
234=ea
235=eb
236=ec
237=ed
238=ee
239=ef
240=f0
241=f1
242=f2
243=f3
244=f4
245=f5
246=f6
247=f7
248=f8
249=f9
250=fa
251=fb
252=fc
253=fd
254=fe
255=ff 15(f)x16=240. 240+15(f)= 255!
 
Top