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: 953
  • 2.png
    2.png
    6.8 KB · Views: 925
  • 3.png
    3.png
    10.2 KB · Views: 938
  • 4.png
    4.png
    10.9 KB · Views: 3,200
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
 
'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?
 
Very nice. I like the maths stuff "behind the numbers" :)
 
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.
 
Bump, been a few days and I'd like some more criticism, if there of course is any.
 
Bump, been a few days and I'd like some more criticism, if there of course is any...
 
Why not add a new list for other colors? Like beige, dark purple, yellow-green, etc... That's your call though.

Nice tutorial.
 
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.
 
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.
 
It wasn't a counterattack? It was merely an explaination of what the purpose of this is.
 
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.
 
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)
 
Approved
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Varine Varine:
    Fuck I need more saturday nights off. Turns out I'm much cooler to drunk girls. If I hang out with enough people like that, eventually I'll meet one that likes me sober too
  • Varine Varine:
    idk if anyone has ever done IT. I am not IT but I just got off a 20 minute phone call with the general manager asking me how to make her new computer print. I do adore her, like I know her personally, but I asked three times if the printer was on. She apologized for bothering me, and Chef Ben walked in a few minutes later, turned the printer on apparently, and then called to ask if I was trying to print shit from my house again
  • Varine Varine:
    So I have a newfound appreciation
  • Varine Varine:
    And also I'm going to remove that one from my secondary career options
  • Varine Varine:
    As I get older I'm not thinking I can do this forever anymore, and I'm kind of dead end right now. I get a fine salary and fair raises, like I can easily live my lifestyle on this normally, but I don't know if I can do this in ten years, and I don't think I want to. I don't really have any desire to take over another restaurant, and I don't want to try and own one, and I doubt I'll luck out like I did with that taco place in Texas
  • Varine Varine:
    I have a math degree but that was a while ago and I'm not positive I actually deserved that. It was kind of just given to me I feel like cuz I was in school so long. Like for a bit as a teenager I got real into the mormon thing, and my dad grew up kind of similarly. Much like he fell out of it
  • Varine Varine:
    Anyway he started coming to church with me for a bit, and they gave home the I think Melchizedek? idk how to spell it, but it's the 'upper' priesthood, like he had a whole blessing thing after I got baptized, and it WAS a very neat experience. And the only reason I think they did they did that was cuz he was like late 30s, and that is kind of the age that they have the last chance at that
  • Varine Varine:
    And I mean its not, but like... I'm pretty well set in my lack of religious beliefs, I guess. And I'm a bit younger than my dad would have been then.
  • Varine Varine:
    And then I got real into, he got bored and was like you do you dude, and that's how I got a huge amount of freedom when I started doing drugs as a teenager
  • Varine Varine:
    In hindsight my parents were fantastic. but they were too fucking tired to raise kids like me. And their jobs were easier with better benefits.
  • Varine Varine:
    Anyway idk where I'm going here, but I asked ChatGPT some of the same things and holy shit was it way more strict and just gave me (importantly the wrong) phone number to a hotline
  • Varine Varine:
    TH, I gotta say, though, I'm amazed you keep this up. I feel like there are you and Ghan doing whatever you're doing, Tom posting news, and then me using the chatbox as a journal every once in a while.
    +1
  • Varine Varine:
    Thanks for letting me do that, also. I know I'm not using it correctly, but somewhere along the line I went from arguing with Cheshire to using this as a kind of void for my frustrations and hopes. I like to think of the whole thing as an enigma of sorts
  • Varine Varine:
    It's not, you guys could probably blackmail me if you went back far enough. I doubt anyone would, you've always been very kind, and I'm glad to have been a part of all this! I hope you enjoy me too, cuz I'm going to keep doing it.
    +1
  • Varine Varine:
    In my defense I was high for a lot of that though
  • V-SNES V-SNES:
    Thanks for sharing @Varine
  • The Helper The Helper:
    Brother how long we been here together? You guys are some of my best friends and I have never even met any of you. I dont know what I would if I did not have my Varine rant to look at when I get on. How could I possibly ever shut this site down? We have been here in this little chat box through a lot of shit for a long time. I love you guys!
    +2
  • tom_mai78101 tom_mai78101:
    I missed out on a lot of chat messages. But yeah, we're planning for my mom's funeral back in Taiwan. I'm really glad I work remotely, so I can try to leverage that and go to places outside of US while still working in US.
    +1
  • tom_mai78101 tom_mai78101:
    If it wasn't for my mom, I wouldn't be able to work in the US. Let alone being able to work until our office closed, and I became a full-time remote employee.
  • tom_mai78101 tom_mai78101:
    Really important though, get your wills and last testaments ready. We avoided like 2 to 3 months of waiting for probate court to get back to us.
    +2
  • The Helper The Helper:
    V-SNES I got good news I got your stuff packed for shipping and just need to get to the post office to get shipping cost!
    +1
  • jonas jonas:
    Oh man Cheshire, I often wonder what happened to her and most of the other people who used to be here
  • V-SNES V-SNES:
    @The Helper that's great! Looking forward to getting them!
  • The Helper The Helper:
    Firecat stopped in a few years ago and said whats up then split :)
    +1
  • The Helper The Helper:
    Happy Thursday! Just one more day for weekend! Ok technically two but whatever :)
    +1

      The Helper Discord

      Members online

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials
      Top