wc3campaigns
WC3C Homepage - www.wc3c.netUser Control Panel (Requires Log-In)Engage in discussions with other users and join contests in the WC3C forums!Read one of our many tutorials, ranging in difficulty from beginner to advanced!Show off your artistic talents in the WC3C Gallery!Download quality models, textures, spells (vJASS/JASS), systems, and scripts!Download maps that have passed through our rigorous approval process!

Go Back   Wc3C.net > Tutorials > General Mapping Tutorials
User Name
Password
Register Rules Get Hosted! Chat Pastebin FAQ and Rules Members List Calendar



Reply
 
Thread Tools Search this Thread
Old 10-24-2004, 03:37 AM   #1
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default WC3 Color Code Tutorial

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), creating 'rainbows'(gradients), Wc3 color code generators made by me, and *New* a Wc3 color code tester by Mapz_Maker. If you still need help or I did not do a good job, please post a reply.


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

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!

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

Color Lists:
http://www.hypergurl.com/colorchart.html
http://users.rcn.com/giant.interport...Specifier.html


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 0-255) && ($2 isnum 0-255) && ($3 isnum 0-255) $iif($isid,return,echo -a) $+(|c00,$base($rgb($1,$2,$3),10,16,6),$4,|r)
  else echo $color(info) -a * /wc3c: The format is $wc3c(RRR,GGG,BBB,Text) or /wc3c RRR GGG BBB Text.
}

Here is a Wc3 Gradient Generator made in mIRC script. All the information you need is in the file.

*New*
Here is a color code testing map by Mapz_Maker. Origional Post:
Quote:
Originally Posted by Mapz_Maker
See This Color? it is hexidecimal, not premade. to do hexidecimal color codes on wc3c do [color=yourcode ] then [ /color] (added spaces between brackets allows visibility erase them.)

btw, i've uploaded a color testing map where you would type
FF0000 if you wanted red (the trigger concatenates |c00 + enteredchatstring + Color Test + |r and displays it, allowing you to see your color.)

Extra information


Attachments Gone:
I just made an mIRC script that is pretty much like the VB converter bellow(Lazy Link), just for mIRC. To install it, copy-n-paste everything in the file to the place stated for the other mIRC wc3 color converter.

I also uploaded(Quick Link For Lazy People) a Wc3 Color Generator made in VB 6 made by me. It is very basic(Im just starting to learn VB), it convert any RGB value into a Wc3 color code and the backround of the finished conversion shows the color. There are also 10 pre-made colors that you can just click on to have them put right in the RGB boxes. Just incase someone doesn't know, the First box with 0 in it is Red, the second is Blue, the third is Green, the forth box with nothing in it is the text that would be in the color code, and the box below convert is the finished product. This is freeware so you can send it to others or put it on another site but please give credit and do not change anything about my program. As i get better in VB i will update this.

Attached Files
File Type: zip Wc3 Gradient Generator.zip (1.3 KB, 349 views)

Last edited by Oo.h3ih02.oO : 10-20-2007 at 10:24 PM.
Oo.h3ih02.oO is offline   Reply With Quote
Sponsored Links - Login to hide this ad!
Old 11-01-2004, 05:30 PM   #2
TGhost
User
 
Join Date: Aug 2003
Posts: 119

TGhost has little to show at this moment (0)

Default

its a good tutorial i think that im gonna use this alot. I didnt understand the tutorial fully but the last part is gonna be very helpfull thanks alot!
I have given you some reputation points
TGhost is offline   Reply With Quote
Old 11-03-2004, 04:12 PM   #3
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

Thank you for the feedback and what did you not understand, i can change it if its not easy to understand.
Oo.h3ih02.oO is offline   Reply With Quote
Old 11-03-2004, 07:19 PM   #4
Kelna2
User
 
Join Date: Mar 2004
Posts: 293

Submissions (1)

Kelna2 has little to show at this moment (0)

Default

- Rep Given - Cool tutorial, but how do you make the "Rainbow" effect? do you have to edit each letter? or is there some sort of code you type in with a start color and an end color? And could you tell me how you make text invisible (trying to get rid of unit stats and such not entirely sure if the editor will let me delete all text)?

Thx
Kelna2 is offline   Reply With Quote
Old 11-04-2004, 02:18 AM   #5
dhv
User
 
Join Date: Aug 2004
Posts: 8

dhv has little to show at this moment (0)

Default

Quote:
Originally Posted by Kelna2
- Rep Given - Cool tutorial, but how do you make the "Rainbow" effect? do you have to edit each letter? or is there some sort of code you type in with a start color and an end color? And could you tell me how you make text invisible (trying to get rid of unit stats and such not entirely sure if the editor will let me delete all text)?

Thx

Yeah, if you wanna do it manually, then go ahead and edit every letter. Or go download one of them color tools.
dhv is offline   Reply With Quote
Old 11-05-2004, 06:14 AM   #6
TGhost
User
 
Join Date: Aug 2003
Posts: 119

TGhost has little to show at this moment (0)

Default

actually by reading it all again i understand it. Thx alot!!
The part i didnt understand fully was this
i thought that when i wanted to make a color for my text it would be set up like this |cRRGGBBText|r and then i didnt understand how it could e that in your text it was |c00RRGGBBText|r but when i readed it again i noticed the 00's
so now i understand it very good job on this tutorial
oh yeah i have one last question.
if 1E is 30 does this mean that 2E is 60? or does 2E mean 30 X 30?
also plz explain what 2(2) means

Last edited by TGhost : 11-05-2004 at 06:23 AM.
TGhost is offline   Reply With Quote
Old 11-05-2004, 03:57 PM   #7
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

TGhost:
Quote:
2A = 2(2) * 15 + 10(A) = 40, and BC = 11(B) * 15 + 12(C) = 176
the things in the brackets just shows what charactor in the hexadecimal number it is.

i accidentally made a mistake in the counting up to 30 :( sry. i change it. 30 is actually 1F because it is 15 times 1 plus 15(which is how much F stands for), and 2F would be 15 times 2 plus 15 which would be 45. hope that helps.

Kelna2:
There is no code for WC3 that lets you put a start and end color to make a rainbow, you have to change the color for every letter just like what dhv said, and you can also download programs that do it for you.
Oo.h3ih02.oO is offline   Reply With Quote
Old 11-06-2004, 05:42 PM   #8
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

Added how to make a good gradient(it was hard to explain so it may or may not help)!
Oo.h3ih02.oO is offline   Reply With Quote
Old 11-07-2004, 12:02 AM   #9
Goffmog
 
Posts: n/a
Default

EDITED:

Oops. I was posting about the 16=11 thing but I see you already spotted that, maybe my eyes are telling me it's time for bed o_O

Good tutorial I hope they keep it, it should help a lot of people. Altered base number systems are never easy to explain. I once tried to explain hex to my (Czech) girlfriend's brother who doesn't speak much English, it would have been easier if I spoke any Czech Thank God the boy's clever.
o_O
  Reply With Quote
Old 11-08-2004, 12:31 PM   #10
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

lol. yeah it was a bit hard. and thanks for the feedback.
Oo.h3ih02.oO is offline   Reply With Quote
Old 11-10-2004, 03:13 PM   #11
themagirule
 
Posts: n/a
Default

Nice tutorial.
The reason why many people might get confused is the math , but you can't get around that.

You could've flapped in binaries as well but that doesn't have anything to do with the warcraft color codes so I give this tut a 10/10

And I recommend to keep it as a permanent tut , every good tut should be permanent.


Wisdom must not be wasted.
  Reply With Quote
Old 11-10-2004, 03:46 PM   #12
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

thank you very much themagirule and yes i had a some trouble trying to explain it i look over it sometimes to see if i can make changes that would make it easier.
Oo.h3ih02.oO is offline   Reply With Quote
Old 11-13-2004, 09:50 AM   #13
divine_peon
User


Respected User
 
Join Date: Jul 2005
Posts: 593

divine_peon is on a distinguished road (17)

Default

very good tut! i'll not use plain white texts anymore! thanks.
__________________
divine_peon is offline   Reply With Quote
Old 11-14-2004, 03:09 AM   #14
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

ty and np divine_peon
Oo.h3ih02.oO is offline   Reply With Quote
Old 11-25-2004, 10:10 PM   #15
Oo.h3ih02.oO
User
 
Join Date: Aug 2004
Posts: 59

Submissions (1)

Oo.h3ih02.oO has little to show at this moment (3)

Default

Changed the gradient topic to paragraph form.
Oo.h3ih02.oO is offline   Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off


All times are GMT. The time now is 11:09 AM.


Donate

Affiliates
The Hubb http://bylur.com - Warcraft, StarCraft, Diablo and DotA Blog & Forums The JASS Vault Clan WEnW Campaign Creations Clan CBS GamesModding Flixreel Videos

Powered by vBulletin (Copyright ©2000 - 2014, Jelsoft Enterprises Ltd).
Hosted by www.OICcam.com
IT Support and Services provided by Executive IT Services