- Joined
- Oct 10, 2004
- Messages
- 9
Introduction
This is a basic tutorial about creating color codes for WC3. It will explain what all the numbers and letters mean and how to make them. Next there will be a small list of some colors (The color of the text may not be the same as in the game because you cant make custom colors for the forums.) If you still need help or I did not do a good job, please post a reply. Creating 'rainbows' (gradients.) Wc3 color code generators made by me!
Explanations
You have probably seen WC3 Color Codes before, something like |c002A3B4CBuild|r. But what does it all mean!?!? WC3 Color Codes use RGB(Red Green and Blue) values to create the colors, but its not as easy as putting a couple of numbers together. The |c tells WC3 that you are starting a color, and the |r resets colors(making it the default color of what you are editing). |c is required at the begining of the color whenever doing WC3 Color Codes. The first 2 numbers/letters(00 in the example) is the transparency, i will not get into transparency in this tutorial. The second, third and fourth pairs of numbers/letters(2A, 3B, and 4C in the example) is the Red, Green, and Blue values in RGB. But RGB is set up like ###,###,### isn't it? Yes, but WC3 use's Hexadecimal to create its RGB, just like HTML!
Hexadecimal
Hexadecimal can be confusing for some. When counting in Decimal(Regular counting), the base numbers that make up every other number, are 0-9. Hexadecimal is a bit different. Hexadecimal base numbers are: 0 1 2 3 4 5 6 7 8 9 A B C D E F, 16 base numbers!?!?
Color Codes Edit!
To count in Hexadecimal up to 255(the max you can have in Red, Green, or Blue in RGB), you use 2 digits. To convert HEX-DEC you would take the value of the left number/letter in the number(0 = 0, 1 = 1... A = 10, B == 11, and so on) multiplied by 16, then add the value of the right digit. For example: 2A = 2(2) * 16 + 10(A) = 42, and BC = 11(B) * 16 + 12(C) = 188. To convert DEC-HEX you have to do the oposite. For the first digit of HEX you do # dividend 16(dividend just means division without decimals or remainders: 10 dividend 3 = 3), for the second digit, its # modulus 16(modulus just means remainder: 10 modulus 3 = 1). For example: 42 dividend 16 = 2(2), and 42 modulus 16 = 10(A), which gives you 2A. So you get your Red, Green, and Blue values, convert them to Hexadecimal, and put them in this format |c00RRGGBBText|r. Here is a list counting up to 30 in Decimal and Hexadecimal:
0 00
1 01
2 02
3 03
4 04
5 05
6 06
7 07
8 08
9 09
10 0A
11 0B
12 0C
13 0D
14 0E
15 0F
16 10
17 11
18 12
19 13
20 14
21 15
22 16
23 17
24 18
25 19
26 1A
27 1B
28 1C
29 1D
30 1E
Colors! Edit!
Various Colors:
|c00FFFF00Yellow|r
|c00FF7F00Orange|r
|c00FF9696Light Red(Pink)|r
|c00FF0000Red|r
|c00640000Dark Red|r
|c0096FF96Light Green(Lime)|r
|c0000FF00Green|r
|c00006400Dark Green|r
|c006969FFLight Blue(Sky Blue)|r
|c000000FFBlue|r
|c00000064Dark Blue(Navy)|r
|c00FFFFFFWhite|r
|c007d7d7dGrey|r
|c00000000Black|r
In Game Player Colors:
|c00FF0303Player 1|r
|c000042FFPlayer 2|r
|c001CE6B9Player 3|r
|c00540081Player 4|r
|c00FFFC01Player 5|r
|c00fEBA0EPlayer 6|r
|c0020C000Player 7|r
|c00E55BB0Player 8|r
|c00959697Player 9|r
|c007EBFF1Player 10|r
|c00106246Player 11|r
|c004E2A04Player 12|r
Player 13: Maroon|cff9c0000
Player 14: Navy|cff0000c3
Player 15: Turquoise|cff00ebff
Player 16: Violet |cffbd00ff
Player 17: Wheat|cffecce87
Player 18: Peach |cfff7a58b
Player 19: Mint |cffbfff81
Player 20: Lavender |cffdbb8eb
Player 21: Coal |cff4f5055
Player 22: Snow|cffecf0ff
Player 23: Emerald|cff00781e
Player 24: Peanut|cffa56f34
Player Neutral: Black |cff2e2d2e
Making A "Rainbow" Effect(Gradients)!
This is kind of hard to explain but i will try my best(there is colored text to help people see where a number is coming from) First thing your gunna need to do is get 2 RGB format colors, start and end, for example i'll use 255 0 0 (red) and 0 255 0 (green). Then you'll need the text, i'll use 'Cool!!'.
Now, count how many letters/numbers your text has(not counting spaces), 'Cool!!' has 6, then minus 1 from that, 6 - 1 = 5. Remember that number because we will use it later. For the next step, we need to find the difference of all the R's, G's, and B's. So take the R's from the first color code, and the R's from the second, and minus the smaller one from the bigger one. In my example it is 255, and 0, so i do 255 - 0 = 255. Do that with for the G's and B's(in my example, 255 - 0 = 255, and 0 - 0 = 0).
Now you take all the numbers that you got, and divide them by the number of letters/numbers your text has(if one of the numbers you got was 0, you do not do this because it stays the same through the whole gradient). In my example i would have 255 / 5 = 51, 255 / 5 = 51, and a 0 so i dont do anything(i will refer to these numbers later as the numbers that where divided).
Now that you have all those numbers, you can start making the color codes. Start by setting the first letter/number of your text to the first color, in my example i would get |c00FF0000C|r. For your second letter/number, if your R in the begining color is bigger than the R in the second color, you would minus the numbers that where divided for the R value, from the R value, in my example it would be 255 - 51 = 204. Then you do that for the G and B values too(since my green value is bigger in the second color i must add the numbers that where divided 0 + 51 = 51, and i have a 0 so the number stays the same). Those are your second letter/numbers colors, it would be |c00CC3300o|r.
If you repeat those steps with everytime adding or subtracting from what you got last time you will end up with a perfect gradient. This is the rest of my example gradient, 204 - 51 = 153, 51 + 51 = 102, and a 0(|c00996600o|r), 153 - 51 = 102, 102 + 51 = 153, and 0(|c00669900l|r), 102 - 51 = 51, 153 + 51 = 204, and 0(|c0033CC00!|r), 51 - 51 = 0, 204 + 51 = 255, and 0(|c0000FF00!|r).
The finished result is, |c00FF0000C|r|c00CC3300o|r(|c00996600o|r|c00669900l|r|c0033CC00!|r|c0000FF00!|r. This was hard for me to explain, i dont know if this will help anyone but i hope it does.
Wc3 Color Code Generators Made By Me!
This is an alias i wrote for IRC to return the wc3 color code of an rgb value. To install this you just open up your IRC, hit ALT+R, go into the file menu, go to new, then copy-n-paste the code bellow into the text box. Hit OK. Now to work it, you either type /wc3c RRR GGG BBB TEXT in a channel or type //echo -a $wc3c(RRR,GGG,BBB,TEXT). I will update it soon to have a gradient option.
This is a basic tutorial about creating color codes for WC3. It will explain what all the numbers and letters mean and how to make them. Next there will be a small list of some colors (The color of the text may not be the same as in the game because you cant make custom colors for the forums.) If you still need help or I did not do a good job, please post a reply. Creating 'rainbows' (gradients.) Wc3 color code generators made by me!
Explanations
You have probably seen WC3 Color Codes before, something like |c002A3B4CBuild|r. But what does it all mean!?!? WC3 Color Codes use RGB(Red Green and Blue) values to create the colors, but its not as easy as putting a couple of numbers together. The |c tells WC3 that you are starting a color, and the |r resets colors(making it the default color of what you are editing). |c is required at the begining of the color whenever doing WC3 Color Codes. The first 2 numbers/letters(00 in the example) is the transparency, i will not get into transparency in this tutorial. The second, third and fourth pairs of numbers/letters(2A, 3B, and 4C in the example) is the Red, Green, and Blue values in RGB. But RGB is set up like ###,###,### isn't it? Yes, but WC3 use's Hexadecimal to create its RGB, just like HTML!
Hexadecimal
Hexadecimal can be confusing for some. When counting in Decimal(Regular counting), the base numbers that make up every other number, are 0-9. Hexadecimal is a bit different. Hexadecimal base numbers are: 0 1 2 3 4 5 6 7 8 9 A B C D E F, 16 base numbers!?!?
Color Codes Edit!
To count in Hexadecimal up to 255(the max you can have in Red, Green, or Blue in RGB), you use 2 digits. To convert HEX-DEC you would take the value of the left number/letter in the number(0 = 0, 1 = 1... A = 10, B == 11, and so on) multiplied by 16, then add the value of the right digit. For example: 2A = 2(2) * 16 + 10(A) = 42, and BC = 11(B) * 16 + 12(C) = 188. To convert DEC-HEX you have to do the oposite. For the first digit of HEX you do # dividend 16(dividend just means division without decimals or remainders: 10 dividend 3 = 3), for the second digit, its # modulus 16(modulus just means remainder: 10 modulus 3 = 1). For example: 42 dividend 16 = 2(2), and 42 modulus 16 = 10(A), which gives you 2A. So you get your Red, Green, and Blue values, convert them to Hexadecimal, and put them in this format |c00RRGGBBText|r. Here is a list counting up to 30 in Decimal and Hexadecimal:
0 00
1 01
2 02
3 03
4 04
5 05
6 06
7 07
8 08
9 09
10 0A
11 0B
12 0C
13 0D
14 0E
15 0F
16 10
17 11
18 12
19 13
20 14
21 15
22 16
23 17
24 18
25 19
26 1A
27 1B
28 1C
29 1D
30 1E
Colors! Edit!
Various Colors:
|c00FFFF00Yellow|r
|c00FF7F00Orange|r
|c00FF9696Light Red(Pink)|r
|c00FF0000Red|r
|c00640000Dark Red|r
|c0096FF96Light Green(Lime)|r
|c0000FF00Green|r
|c00006400Dark Green|r
|c006969FFLight Blue(Sky Blue)|r
|c000000FFBlue|r
|c00000064Dark Blue(Navy)|r
|c00FFFFFFWhite|r
|c007d7d7dGrey|r
|c00000000Black|r
In Game Player Colors:
|c00FF0303Player 1|r
|c000042FFPlayer 2|r
|c001CE6B9Player 3|r
|c00540081Player 4|r
|c00FFFC01Player 5|r
|c00fEBA0EPlayer 6|r
|c0020C000Player 7|r
|c00E55BB0Player 8|r
|c00959697Player 9|r
|c007EBFF1Player 10|r
|c00106246Player 11|r
|c004E2A04Player 12|r
Player 13: Maroon|cff9c0000
Player 14: Navy|cff0000c3
Player 15: Turquoise|cff00ebff
Player 16: Violet |cffbd00ff
Player 17: Wheat|cffecce87
Player 18: Peach |cfff7a58b
Player 19: Mint |cffbfff81
Player 20: Lavender |cffdbb8eb
Player 21: Coal |cff4f5055
Player 22: Snow|cffecf0ff
Player 23: Emerald|cff00781e
Player 24: Peanut|cffa56f34
Player Neutral: Black |cff2e2d2e
Making A "Rainbow" Effect(Gradients)!
This is kind of hard to explain but i will try my best(there is colored text to help people see where a number is coming from) First thing your gunna need to do is get 2 RGB format colors, start and end, for example i'll use 255 0 0 (red) and 0 255 0 (green). Then you'll need the text, i'll use 'Cool!!'.
Now, count how many letters/numbers your text has(not counting spaces), 'Cool!!' has 6, then minus 1 from that, 6 - 1 = 5. Remember that number because we will use it later. For the next step, we need to find the difference of all the R's, G's, and B's. So take the R's from the first color code, and the R's from the second, and minus the smaller one from the bigger one. In my example it is 255, and 0, so i do 255 - 0 = 255. Do that with for the G's and B's(in my example, 255 - 0 = 255, and 0 - 0 = 0).
Now you take all the numbers that you got, and divide them by the number of letters/numbers your text has(if one of the numbers you got was 0, you do not do this because it stays the same through the whole gradient). In my example i would have 255 / 5 = 51, 255 / 5 = 51, and a 0 so i dont do anything(i will refer to these numbers later as the numbers that where divided).
Now that you have all those numbers, you can start making the color codes. Start by setting the first letter/number of your text to the first color, in my example i would get |c00FF0000C|r. For your second letter/number, if your R in the begining color is bigger than the R in the second color, you would minus the numbers that where divided for the R value, from the R value, in my example it would be 255 - 51 = 204. Then you do that for the G and B values too(since my green value is bigger in the second color i must add the numbers that where divided 0 + 51 = 51, and i have a 0 so the number stays the same). Those are your second letter/numbers colors, it would be |c00CC3300o|r.
If you repeat those steps with everytime adding or subtracting from what you got last time you will end up with a perfect gradient. This is the rest of my example gradient, 204 - 51 = 153, 51 + 51 = 102, and a 0(|c00996600o|r), 153 - 51 = 102, 102 + 51 = 153, and 0(|c00669900l|r), 102 - 51 = 51, 153 + 51 = 204, and 0(|c0033CC00!|r), 51 - 51 = 0, 204 + 51 = 255, and 0(|c0000FF00!|r).
The finished result is, |c00FF0000C|r|c00CC3300o|r(|c00996600o|r|c00669900l|r|c0033CC00!|r|c0000FF00!|r. This was hard for me to explain, i dont know if this will help anyone but i hope it does.
Wc3 Color Code Generators Made By Me!
This is an alias i wrote for IRC to return the wc3 color code of an rgb value. To install this you just open up your IRC, hit ALT+R, go into the file menu, go to new, then copy-n-paste the code bellow into the text box. Hit OK. Now to work it, you either type /wc3c RRR GGG BBB TEXT in a channel or type //echo -a $wc3c(RRR,GGG,BBB,TEXT). I will update it soon to have a gradient option.
Code:
alias wc3c {
if ($4) && ($1 isnum && $2 isnum && $3 isnum) && ($1 >= 0 && $1 <= 255 && $2 >= 0 && $2 <= 255 && $3 >= 0 && $3 <= 255) {
$iif($isid == $true,/return,//echo -a) |c00 $+ $base($1,10,16,2) $+ $base($2,10,16,2) $+ $base($2,10,16,2) $+ $4 $+ |r
}
else {
//echo $color(info) -a * /wc3c: The format is $wc3c(RRR,GGG,BBB,Text) or /wc3c RRR GGG BBB Text.
}
}
Last edited by a moderator:
.
