The history of WoW Class Colors

In my time working on World of Warcraft sites and addons, I’ve gotten to dig into some of the arcane bits of the game, like class colors. These colors allow players to instantly identify another player’s class, and many players carry a strong bond to their class’ color. In fact, coloring is the primary way that players are able to identify official Blizzard representatives in-game and on the forums, via that beautiful Blizzard Blue:

I was looking into information on the class color for the newly-announced Demon Hunter, and found a discrepancy in how the Druid class color was being reported. I dug deeper and found some interesting details about class colors that I’d like to share and document. I will do my best to avoid Rogue/Rouge jokes. No promises.

RGB

Every class color is represented by a simple RGB value, typically in hex, like #FFF569 (Rogue - brittle Rogues are anything but brittle yellow). There are 3 pairs of digits, each represents a different color. So Rogues can be broken down into FF-F5-69, with FF representing red, F5 representing green, and 69 representing blue. “F” is a high value in hex, while “0” is a low value. “00” means there is none of that color mixed into the final color, while FF means the maximum amount of that color is mixed in. Pure red would be FF-00-00, while simple magenta could be FF-00-FF. The values range from 00 to FF, which is a total span of 256 values, so 1 point of difference is only a 0.4% change in that value of that single color. Not a huge difference.

Can you tell these two blocks apart?

Canonical Source

One of the challenges I found when digging into class colors is defining the canonical source. What really defines the class colors themselves? When there’s conflicting values from various places, you have to figure out which is actually correct. I went straight to the source: the actual game code. Blizzard has obfuscated their UI code in recent years, leaving only encrypted blobs in your /Interface/AddOns folder. However, there are some advanced console commands you can still use to dump the source code of the WoW UI to a folder. I used ExportInterfaceFiles code to get the files from the client (latest, 6.2.0.20338), and then inspected the /FrameXML/Constants.lua file The data for class colors has been moved into /SharedXML/Util.lua at some point around Legion’s launch. .

RAID_CLASS_COLORS = {
  ["HUNTER"] = { r = 0.67, g = 0.83, b = 0.45, colorStr = "ffabd473" },
  ["WARLOCK"] = { r = 0.58, g = 0.51, b = 0.79, colorStr = "ff9482c9" },
  ["PRIEST"] = { r = 1.0, g = 1.0, b = 1.0, colorStr = "ffffffff" },
  ["PALADIN"] = { r = 0.96, g = 0.55, b = 0.73, colorStr = "fff58cba" },
  ["MAGE"] = { r = 0.41, g = 0.8, b = 0.94, colorStr = "ff69ccf0" },
  ["ROGUE"] = { r = 1.0, g = 0.96, b = 0.41, colorStr = "fffff569" },
  ["DRUID"] = { r = 1.0, g = 0.49, b = 0.04, colorStr = "ffff7d0a" },
  ["SHAMAN"] = { r = 0.0, g = 0.44, b = 0.87, colorStr = "ff0070de" },
  ["WARRIOR"] = { r = 0.78, g = 0.61, b = 0.43, colorStr = "ffc79c6e" },
  ["DEATHKNIGHT"] = { r = 0.77, g = 0.12 , b = 0.23, colorStr = "ffc41f3b" },
  ["MONK"] = { r = 0.0, g = 1.00 , b = 0.59, colorStr = "ff00ff96" },
};

We can see the colors plainly spelled out, with the first “ff” referring to the alpha (RGBA) or opacity of the color. The oldest available version of this file is from 2010, via Archive.org’s copy of wowprogramming.com (which is an amazing resource and book). The archived version matches the live version exactly, save for missing the new Monk class, and all of the values only being recorded in RGB percentage format (Rogues are 1.0/.96/.41, which converts to #FFF569 as expected). Luckily, the current file gives us both values, so it was easy to compare.

Here’s a trimmed list, straight from the canonical source, unchanging over a decade (with one exception - shamans):

Shamans changed class colors from their former pink to their current blue when they became available to both factions in The Burning Crusade. When comparing this to my posted list, I noticed that the Monk value was not what I found previously

Left: In-game, Right: My posted color

Which is a not-insignificant difference. Clearly the #00FF96 value is canonical, as it comes straight from the source code for the game itself. I actually referenced the “ExportInterfaceFiles” command in that very same class colors post, but had no idea about the code option for the command until recently.

WoWWiki and Shaman

One of the most-referenced sources of this data is WoWWiki’s class colors page. Unfortunately, despite going back to 2006, it has had its problems. For example, the Warlock class color was reported incorrectly due to a math error until late 2008. It does chronicle the evolution of Shaman from pink to blue, including what appears to be a swap in September 2010 from #2459FF to #0070DE.

That would’ve occurred right before the Cataclysm expansion was released in December 2010. The user who makes the change noted that it had changed in the game files at that time as well. Our copy of Constants.lua from January 2010 from wowprogramming indicates that the colors were already set to #0070DE at least that early. It’s hard to say when exactly Shaman swapped, but it was definitely before January 2010. A Russian WoW wiki has Shaman listed with their new color as early as September 2009. August 2009 was the announcement of Cataclysm, which is the only major event in that time frame.

Battle.net CSS

While WoWWiki is second-hand information, we received a second source of direct information in late 2010. Blizzard launched the revamped Battle.net website, which included sections for each class. Browsing the Archive.org archives for Battle.net CSS files, the earliest references to class colors comes on December 6th, 2010, the day before Cataclysm launched. Let’s compare the CSS with our canonical list:

CLASS	CANON	BNET CSS	DIFF
Hunter	ABD473	AAD372	(-1/-1/-1)
Warlock	9482C9	9382C9	(-1/0/0)
Priest	FFFFFF	F0EBE0	(-15/-20/-31)
Paladin	F58CBA	F48CBA	(-1/0/0)
Mage	69CCF0	68CCEF	(-1/0/-1)
Rogue	FFF569	FFF468	(0/-1/-1)
Druid	FF7D0A	FF7C0A	(0/-1/0)
Shaman	2459FF*	2359FF	(-1/0/0)
Warrior	C79C6E	C69B6D	(-1/-1/-1)
Death Knight	C41F3B	C41E3B	(0/-1/0)
Monk	00FF96	00FFBA	(0/0/+36)

You’ll note that every single class’ color is altered slightly from the game file version. Shaman stand out strongly, as their CSS color is #2359FF, which is offset from their old color, #2459FF, which was changed to #0070DE in the game files over a year before the CSS was available. Fast-forward a year to October 23, 2011, and the class color CSS definitions are the same, so it wasn’t a launch day mistake. In fact, all of these colors are still slightly offset from the game values in the Battle.net CSS today (TYOOL 2015). These colors were picked on purpose… or were they?

The easiest change to explain is the move from pure white for Priests to an off-white color. Never Use White and Never Use Black are two common web design mantras. Most of the other tweaks are not noticeable, even when compared side-by-side.

Here’s a full table:

Looking at today’s current Battle.net CSS file, we can see the addition of the Demon Hunter with #4DD827 (which some are calling Fel Green) and also the source of my false Monk information (#00FFBA, from earlier). Fel Green in action:

Demon Hunter Update - 8/21/2016

Demon Hunters have been released to the wild, and there has been an interesting development. While the main Battle.net CSS file stills references the #4DD827 color (.color-c12 { color: #4dd827 !important; } /* demon hunter */), there’s a different CSS file that controls the coloring on the forums. It matches the Battle.net CSS file exactly, except for Demon Hunters:

.Author-class.hunter{color:#aad372}
.Author-class.warlock{color:#9382c9}
.Author-class.priest{color:#f0ebe0}
.Author-class.paladin{color:#f48cba}
.Author-class.mage{color:#68ccef}
.Author-class.rogue{color:#fff468}
.Author-class.druid{color:#ff7c0a}
.Author-class.shaman{color:#2359ff}
.Author-class.warrior{color:#c69b6d}
.Author-class.death.knight{color:#c41e3b}
.Author-class.monk{color:#00ffba}
.Author-class.demon.hunter{color:#a330c9}

Via the CSS selector .Author-class.demon.hunter, we can see that there’s a new color for the DH class on the official forums (and in-game!):

It’s a fel purple (#A330C9)! Demon Hunters have shifted from green to purple, likely due to the overloading of green as a class color (hunter, monk).

A decision was made to shift Demon Hunters over to purple, which they now share with Warlocks. I would’ve loved to have been a fly on the wall of that style meeting. Let’s take a look at the CSS and game files to see what other changes were made.

OLD WARLOCK CSS:     .color-c9,  .color-c9 a { color: #9382c9 !important; }
NEW WARLOCK CSS:     .Author-class.warlock{color:#9382c9}

So, no changes were made to Warlocks on the forums. However, the game files tell a different story (build 7.0.3.22423):

RAID_CLASS_COLORS = {
  ["HUNTER"] = { r = 0.67, g = 0.83, b = 0.45, colorStr = "ffabd473" },
  ["WARLOCK"] = { r = 0.53, g = 0.53, b = 0.93, colorStr = "ff8788ee" },
  ["PRIEST"] = { r = 1.0, g = 1.0, b = 1.0, colorStr = "ffffffff" },
  ["PALADIN"] = { r = 0.96, g = 0.55, b = 0.73, colorStr = "fff58cba" },
  ["MAGE"] = { r = 0.25, g = 0.78, b = 0.92, colorStr = "ff3fc7eb" },
  ["ROGUE"] = { r = 1.0, g = 0.96, b = 0.41, colorStr = "fffff569" },
  ["DRUID"] = { r = 1.0, g = 0.49, b = 0.04, colorStr = "ffff7d0a" },
  ["SHAMAN"] = { r = 0.0, g = 0.44, b = 0.87, colorStr = "ff0070de" },
  ["WARRIOR"] = { r = 0.78, g = 0.61, b = 0.43, colorStr = "ffc79c6e" },
  ["DEATHKNIGHT"] = { r = 0.77, g = 0.12 , b = 0.23, colorStr = "ffc41f3b" },
  ["MONK"] = { r = 0.0, g = 1.00 , b = 0.59, colorStr = "ff00ff96" },
  ["DEMONHUNTER"] = { r = 0.64, g = 0.19, b = 0.79, colorStr = "ffa330c9" },
};    

Warlocks’ in-game color moved from #9482C9 to #8788EE, which is significantly more blue and somewhat less red. Previously, they had the same amount of blue (.79) as Demon Hunters do today:

["WARLOCK"] = { r = 0.58, g = 0.51, b = 0.79, colorStr = "ff9482c9" },
["WARLOCK"] = { r = 0.53, g = 0.53, b = 0.93, colorStr = "ff8788ee" },

Demon Hunters actually have their CSS and game files in sync, due to all 3 hex color values rounding up (see the Rounding section). This makes them the only class with matching in-game and CSS values:

Canonical Blue: .64 -- Hex A3/RGB 163 = 63.9% (round up to 64%)
Canonical Green: .19 -- Hex 30/RGB 48 = 18.8% (round up to 19%)
Canonical Red: .79 -- Hex C9/RGB 201 = 78.8% (round up to 79%)

An interesting note is that Mages also had their in-game color shifted in Legion, from #69CCF0 to #3FC7EB:

["MAGE"] = { r = 0.41, g = 0.8, b = 0.94, colorStr = "ff69ccf0" },
["MAGE"] = { r = 0.25, g = 0.78, b = 0.92, colorStr = "ff3fc7eb" },

Again, their forum CSS color did not change. The Mage change is interesting, as it might be designed to further separate them from the newly-bluer Warlock. The Mage color mix saw a big decrease in red, which makes it less sky-blue, in my opinion. Here is new-Warlock vs old-Mage:

Here’s a final comparison of all of the blues:

Questions

It appears intentional that all of the class colors are slightly offset from their in-game representations… but why? Why are Shaman still using a class color that was changed in the client 5 years ago? Why just drop a couple of values by 1 point? It’s not distinguishable to most observers. Only the Monk color changes significantly, with a large blue boost. Where’s the beef?

Rounding, aka Off-By-One

Hunters, for example, are defined as: r = 0.67, g = 0.83, b = 0.45. That’s straight from the game files. The corresponding RGB values in decimal are 171 212 115, or ABD473. ABD473 technically maps to 67.1% / 83.1% / 45.1%, which is pretty close to the canonical definition. All percentages are slightly larger than the canonically defined values.

The CSS hunter is defined as: AAD372. All 3 RGB colors were decremented. That corresponds to decimal 170 211 114, or 66.66% / 82.7% / 44.7%. Those percentages actually do round up into 67/83/45 - the canonical definition. Is it possible whatever tool they’re using to generate the CSS is playing with Price Is Right rules, where it’s closest-without-going-over?

Game Hunter: .67 / .83 / .45 = ABD473 = 67.1% / 83.1% / 45.1%

CSS Hunter: AAD372 = 66.66% / 82.7% / 44.7%

If they’re rounding with CEIL instead of FLOOR or actually rounding, then AAD372 becomes the correct result to achieve the 67/83/45 split. Let’s look at one more example.

Warlocks are canonically defined: r = 0.58, g = 0.51, b = 0.79. The corresponding decimal values are 148 130 201, or 9482C9. 9482C9 maps to 58.039%, 50.9%, and 78.8%. So 50.9% (green) and 78.8% (blue) are both rounded up, while 58.039% (red) is rounded down.

When we look at the CSS warlock, it’s defined as: 9382C9. Interestingly, only the first color (red) is changed. Red is also the only color percentage that was rounded down in the canonical color, while the other two color percentages were rounded up (and unaltered in the CSS). 9382C9 = 57.6% red, which can be rounded up to 58, matching the canonical definition.

Game Warlock: .58 / .51 / .79 = 9482C9 = 58% / 50.9% / 78.8%

CSS Warlock: 9382C9 = 57.6% / 50.9% / 78.8%

We’ve found the issue. The rounding being used to convert simple percentages like 0.58 into the 256-value RGB space is different between the client code and the web/CSS code. That explains why almost every value is shifted by 0 or -1, and never +1.

The game values are all the closest possible to the original percentage specified, while the CSS values are all the closest without going over. So, in some cases, the CSS color values are slightly less accurate (assuming that the percentage values are canonical). Here’s an example from Death Knights:

Death Knight Canonical Value for Green: 0.12

Game Value: Hex 1F/RGB 31 = 0.1216 (31/255) for a differnce of 0.0016

CSS Value: Hex 1E/RGB 30 = 0.1176 (30/255) for a difference of 0.0024

So CSS is 0.008 further than game from true “0.12”

Priests are set to off-white for web best practices. Monks still see a significant change, and their color is much bluer on Battle.net than it is in the game for no discernible reason. And why are Shaman still using the ancient class color? That’s a mystery for a different time…