General - Warcraft III Color Codes in Depth

Xorifelse

I'd love to elaborate about discussions...........
Reaction score
87
Warcraft III Color Codes
Author: Themis@Azeroth
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.

28611574.png


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:

57374282.png


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.

79731471.png


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.

76290002.png


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

  • 1.png
    1.png
    9.6 KB · Views: 689
  • 2.png
    2.png
    6.8 KB · Views: 650
  • 3.png
    3.png
    10.2 KB · Views: 674
  • 4.png
    4.png
    10.9 KB · Views: 2,527

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
Reaction score
963
'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
Reaction score
448
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
Reaction score
963
Approved
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Staff online

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top