General - Warcraft III Color Codes in Depth

Xorifelse

I'd love to elaborate about discussions...........
Reaction score
87
Warcraft III Color Codes
Author: [email protected]
Date: Sunday, 25 January, 2009
Note: Please do not copy paste this into your website, link it instead to the original thread.
Credits: StealthOfKing helped me a very little bit because my own calculations brought me in despair.

Introduction:
To display colors in text with Warcraft III, we wrap around the word a specific text that Warcraft III recognized and replaces it with colors.
To fully understand this, you must fully know how this works so you would never have to get help for this any time!
What I'm about to explain may come in handy in the future as well I will go into full detail.

Color:
We all know that there are 3 primary colors:
  • Red
  • Green
  • Blue
Usually when we talk about these colors, we sum it up to RGB.

RGB:
Each primary color can be called a channel, sometimes there is a fourth channel as well call Alpha.
The Alpha channel handles transparency, and the four combined can be called "RGBA".
Each of these channels requires 1 byte so that the computer can render the entire color.

Byte:
1 byte exists of 8 bits, when we talk about bits we talk about binary code which exists of 1 and 0.
The binary code is the language the computer understands.
Below is a table on how binairy works, and how a number is calculated from it.
Since 1 byte is 8 bits, we start from right multiplying by 2.



Binary #2 has every bit set to 1 which means that 8 bits ( 1 byte ) can hold a maximum value of 255. However, you don't need any bits to create a 0, so that means the byte range is 0-255 which is 256 placeholders.
You might think, there are a lot of colors no way it can all be stored in 1 byte, and you are correct. However, we parse 1 byte to every channel meaning 256 * 256 * 256 is 16777216 different colors (24-bit), excluding the alpha channel, which would raise that number to 4294967296 which is a 32-bit color depth.


However we need a more human friendlier way to represent those 4 separate bytes because it's inconvenient for us and inefficient for the computer.
So in order to resolve both issues we need to compress each byte with a numeral system so this will reduce the cost of your computer's memory and we need to make a more friendly representation for a color code.
There are a couple of numeral systems out there, but the one mainly used for color codes is base-16 otherwise known as hexadecimal.

Hexadecimal:
It is known as base-16 because it exists of 16 unique characters. Those characters are:



Hexadecimals primary use is for a friendly way to represent a binary code, however we won't be doing any binary code with Warcraft III.
What we want is to store our 4 bytes into 1 value that holds our entire color code. So why did I bring this up?

Hexadecimal color strings come in pairs of 2, because the hex range [0-15] 16 * 16 = 256.
And since RGBA wants a 4 bytes in range of 0-255 the hexadecimal system is perfect for it.
This means, 4*2 = 8 characters long for your color string. It would change RGBA to RRGGBBAA.

Lets convert a hexadecimal to a decimal.



As you can see, we managed to store values like 255 in 2 characters instead of 3 and we managed to get it all in 1 string.
An RGBA string is always 8 characters long and since we managed to chop 1 character of each 4 bytes down we spared ourselves 1 byte as well!

This sums it up about how hexadecimals work, let's head on to the next chapter.

Color Codes:
Thought you were gonna learn only how to color a string eh, well we're getting there.
We don't have to work with binary, neither decimals but what we learned is how to create a hex string knowing what color it will create.
Now lets put it into use.

Everywhere, where ever you look a hex color string is represented as "RRGGBBAA", however we all know that the coding behind Warcraft III is terrible and some things are even incomplete!
Only in Warcraft III a hex color string is represented as "AARRGGBB".
But on top of that the alpha channel can't be rendered by Warcraft III!
We need to fill in every argument of the string including the alpha values, hilarious ain't it?!

How you can colorize a string is simple you have a begin tag "|c" and an end tag "|r".
After the "|c" you will in your AARRGGBB hex code and right after that the text you want to have colored.
Once you want to exit the color, simple add "|r" behind it.
Pretty much the same as forum BB tags, but a little different. Some examples:

  • |c00FF0000This String Is ?|r RED!
  • |c0000FF00This String Is ?|r GREEN!
  • |c000000FFThis String Is ?|r BLUE!
  • |c00FF9900This String Is ?|r ???!

Player Related Hexadecimal Values:
This is a table of all player related data on color strings and RGB values.



Side Notes:
We used Hex only for a color string at this very moment, don't get it confused with a real hexadecimal value.
The conversion works the same, though it is an integer instead of a string.
This is however only accessible by (v)Jass, and it's done like this.
JASS:
function test takes nothing returns nothing
    local integer i = 0xFF
    local integer r = 0xF3E126
    local integer h = $FF

    call DisplayTextToPlayer( GetLocalPlayer(), 0, 0, I2S( i ) ) // Display's 255.
    call DisplayTextToPlayer( GetLocalPlayer(), 0, 0, I2S( r ) ) // Display's 15982886.
    call DisplayTextToPlayer( GetLocalPlayer(), 0, 0, I2S( h ) ) // Display's 255.
endfunction


Also here is a large list of RGB color codes, giving you examples of the color. Just add the Alpha value of 00 before the code to make it work with Warcraft III.
 

Attachments

Komaqtion

You can change this now in User CP.
Reaction score
469
Very in depth. Good Job.
Yeah !!! Thanks soo much for this ! :D:D
I didn't know at all how these hexadecimals worked before XD

Thanks again, and a really good job :D

+Rep of course ! :D
 

Romek

Super Moderator
Staff member
Reaction score
960
'Lime' should be removed from the colours list. :p

Anyway, I skim-read this, and it's a great tutorial.
I'll let it sit around here for a few comments and opinions before I approve it.

Also, do we really need a link to the 'original' thread?
 

UndeadDragon

Super Moderator
Staff member
Reaction score
447
Very nice. I like the maths stuff "behind the numbers" :)
 

Xorifelse

I'd love to elaborate about discussions...........
Reaction score
87
Also, do we really need a link to the 'original' thread?
I made the link there because it gives people the ability to copy data from the tables, of which I am unable to make here. Secondly, there is a higher chance I'll update the tutorial there because sadly, I never really look at the tutorials \ system here. It gives people some more reference too.

Anyways, I've shorten the link making it less visible.
 

Xorifelse

I'd love to elaborate about discussions...........
Reaction score
87
Bump, been a few days and I'd like some more criticism, if there of course is any.
 

Xorifelse

I'd love to elaborate about discussions...........
Reaction score
87
Bump, been a few days and I'd like some more criticism, if there of course is any...
 

Dest

New Member
Reaction score
26
Why not add a new list for other colors? Like beige, dark purple, yellow-green, etc... That's your call though.

Nice tutorial.
 

Sevion

The DIY Ninja
Reaction score
424
This isn't just a list of colors for you to copy. It's a tutorial for a reason. It teaches you how to create colors so you aren't limited to colors in a list.
 

Dest

New Member
Reaction score
26
This isn't just a list of colors for you to copy. It's a tutorial for a reason. It teaches you how to create colors so you aren't limited to colors in a list.
No need to counterattack... I was just showing a suggestion.
 

Sevion

The DIY Ninja
Reaction score
424
It wasn't a counterattack? It was merely an explaination of what the purpose of this is.
 

Xorifelse

I'd love to elaborate about discussions...........
Reaction score
87
Why not add a new list for other colors? Like beige, dark purple, yellow-green, etc... That's your call though.

Nice tutorial.
No need to counterattack... I was just showing a suggestion.
As Sevion said, the purpose of this tutorial is to educate you how to generate your own colors without any outside help. If you want a yellow green color you now know you need to set the channel of green to a high number. For yellow a mixture of 2 colors is required. Those are red and green. This means you need to set green to an even higher number and a 50% of red.
This would put give you the hex value of 99FF00, resulting in this color.
For dark purple it requires a mix of red and blue. But since purple is a dark color it means that the range of this is between 0 and 9. Otherwise the color might brighten up 1 channel to much resulting in a lighter color.
So about 880099 is the right color resulting in this.

However, I've added a color list image to the tutorial might give you and some other people some insight.
 

snmiglight

Active Member
Reaction score
3
wow nice tutorial... very in depth

anyways, i have an easy method in

getting hex color codes without referring to tables

all you need is MSPaint and Calc.exe in scientific mode

then open MSPaint, click >> Colors >> Edit Colors >>> Define Custom Colors.

there you see a color chart and at bottom right corner you'll

see the values of RGB in decimal. now go to Calc.exe and convert the

decimal values into hexadecimal. (must be in scientific mode)
 

Romek

Super Moderator
Staff member
Reaction score
960
Approved
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • The Helper The Helper:
    Happy Sunday!
    +1
  • The Helper The Helper:
    I will be out of town until Sunday evening
    +1
  • The Helper The Helper:
    I am back! Did you miss me LOL
    +1
  • jonas jonas:
    where did you go?
  • The Helper The Helper:
    Jefferson TX on a Paranormal Investigation of a haunted bed and breakfast - I got some friends that are paranormal investigators and they have an RV and do YouTubes
    +1
  • The Helper The Helper:
    It was a lot of fun. The RV was bad ass
  • jonas jonas:
    That sounds like fun!
    +1
  • The Helper The Helper:
    it was a blast!
  • The Helper The Helper:
    I am going to post the Youtube of the investigation in the forums when it is ready
    +1
  • jonas jonas:
    cool!
  • vypur85 vypur85:
    Sounds cool TH.
  • tom_mai78101 tom_mai78101:
    I was on a Legend of Zelda marathon...
  • tom_mai78101 tom_mai78101:
    Am still doing it now
    +1
  • jonas jonas:
    which one(s) are you playing?
  • jonas jonas:
    I played a little bit of the switch title two weeks ago and found it quite boring
  • The Helper The Helper:
    just got back from San Antonio this weekend had the best Buffalo Chicken Cheesesteak sandwhich in Universal City, TX - place was called Yous Guys freaking awesome! Hope everyone had a fantastic weekend!
    +1
  • The Helper The Helper:
    Happy Tuesday!
  • The Helper The Helper:
    We have been getting crazy numbers reported by the forum of people online the bots are going crazy on us I think it is AI training bots going at it at least that is what it looks like to me.
  • The Helper The Helper:
    Most legit traffic is tracked on multiple Analytics and we have Cloud Flare setup to block a ton of stuff but still there is large amount of bots that seem to escape detection and show up in the user list of the forum. I have been watching this bullshit for a year and still cannot figure it out it is drving me crazy lol.
    +1
  • Ghan Ghan:
    Beep boop
    +1
  • The Helper The Helper:
    hears robot sounds while 250 bots are on the forum lol
  • The Helper The Helper:
    Happy Saturday!
    +1

    The Helper Discord

    Members online

    No members online now.

    Affiliates

    Hive Workshop NUON Dome World Editor Tutorials

    Network Sponsors

    Apex Steel Pipe - Buys and sells Steel Pipe.
    Top