bOb666777
Stand against the ugly world domination face!
- Reaction score
- 117
I noticed a lot of people needed help from a special program or a website to know what color codes meant what color. And I just thought this would help them make their own color codes faster, without needing a reference.
Let's get started
So, what exactly is hexadecimal and what's the link between it and color codes?
Hexadecimal (also known as Hex, Hexa and Base-16) is a numeral system that uses 16 as a base number. A 6 digits number with 0x before it means it is in hexadecimal. Your everyday numeral system is called decimal. We will use it as a comparison to the hexadecimal system. Decimal uses 10 as a base, and hexadecimal uses 16. That means the second number is worth 16, and the third, 256, and so on always multiplying by 16.
So, to obtain the decimal equivalent of an hex number, you multiply the number at the first digit by 1, then you multiply the 2nd digit by 16, add it to your current sum, then multiply the third digit by 256, and add it to the current sum, and so on.
Basically,
As numbers go on, it can get hard to calculate, a calculator could be useful. Especially if it has a hex to dec and dec to hex function.
But then you ask, yeah but, if 0x000009 is 9 and 0x000010 is 16, what are 10, 11, 12, 13, 14 and 15? They are represented by letters, 10 being A, 11 being B, 12 being C, 13 being D, 14 being E and 15 being F.
so,
Oh, that's cool... I guess.... But how will that help me make color codes?
Color codes are made out of 3 groups of 2-digits hex numbers. Each group is a color. You probably noticed a lot of colorings (like Art - Tinting Color, in object editor) use 3 numbers located between 1 and 255. And what's the biggest 2 digits number we can have in hex (not including 0's)? 0xFF, or 255. Makes sense now? Well yeah, a color code is made like this: |cff (opening tag for a color code in wc3*) + 3 hex numbers, without 0x, because the game already knows those numbers are hex.
The first number is the amount of red in the tint, the second is green and the third is blue.
So a color code like this:
would equal to 255 red, 255 green and 255 blue, which is white.
Let's have more examples:
That would be 0 red, 255 green and 0 blue. That would make the text green.
That would be 64 red, 64 green and 64 blue. That would make a dark gray text.
That would be 187 red, 0 green and 187 blue. That would make a light purple-violet-ish color.
--------------------
There is technically no end tag for a color code, but you want to make the text white again, so you can use |cffFFFFFF, although there is a shortcut to that: |r. It's the same thing as |cffFFFFFF. It's just shorter to write
.
__________________
*The real opening tag is |c, but people will usually use |cff, because the color codes actually use 4 groups of numbers, and the first is transparency, but most people will leave it at FF.
That will be all, if you have any question, or think a part of this is hard to understand, let me know, I will try to answer your question and improve the tutorial.
Let's get started
So, what exactly is hexadecimal and what's the link between it and color codes?
Hexadecimal (also known as Hex, Hexa and Base-16) is a numeral system that uses 16 as a base number. A 6 digits number with 0x before it means it is in hexadecimal. Your everyday numeral system is called decimal. We will use it as a comparison to the hexadecimal system. Decimal uses 10 as a base, and hexadecimal uses 16. That means the second number is worth 16, and the third, 256, and so on always multiplying by 16.
So, to obtain the decimal equivalent of an hex number, you multiply the number at the first digit by 1, then you multiply the 2nd digit by 16, add it to your current sum, then multiply the third digit by 256, and add it to the current sum, and so on.
Basically,
Code:
Hex Decimal
0x000001 = 1
0x000010 = 16
0x000100 = 256
0x000021 = 33
0x001000 = 4096As numbers go on, it can get hard to calculate, a calculator could be useful. Especially if it has a hex to dec and dec to hex function.
But then you ask, yeah but, if 0x000009 is 9 and 0x000010 is 16, what are 10, 11, 12, 13, 14 and 15? They are represented by letters, 10 being A, 11 being B, 12 being C, 13 being D, 14 being E and 15 being F.
so,
Code:
Hex Decimal
0x00000C = 12
0x00001F = 31
0x0000FF = 255
0x00004A = 74Oh, that's cool... I guess.... But how will that help me make color codes?
Color codes are made out of 3 groups of 2-digits hex numbers. Each group is a color. You probably noticed a lot of colorings (like Art - Tinting Color, in object editor) use 3 numbers located between 1 and 255. And what's the biggest 2 digits number we can have in hex (not including 0's)? 0xFF, or 255. Makes sense now? Well yeah, a color code is made like this: |cff (opening tag for a color code in wc3*) + 3 hex numbers, without 0x, because the game already knows those numbers are hex.
The first number is the amount of red in the tint, the second is green and the third is blue.
So a color code like this:
Code:
|cffFFFFFFLet's have more examples:
Code:
|cff00FF00
Code:
|cff404040
Code:
|cffBB00BB--------------------
There is technically no end tag for a color code, but you want to make the text white again, so you can use |cffFFFFFF, although there is a shortcut to that: |r. It's the same thing as |cffFFFFFF. It's just shorter to write
.__________________
*The real opening tag is |c, but people will usually use |cff, because the color codes actually use 4 groups of numbers, and the first is transparency, but most people will leave it at FF.
That will be all, if you have any question, or think a part of this is hard to understand, let me know, I will try to answer your question and improve the tutorial.
