Colour Guide

Brune's picture

Colour Guide

This guide was originally started by me to allow me to try and keep some consistency in the colours of my reputation levels.

I stole a few colours from people (by eye) if they fitted my system and I liked them and now I've decided to publish it, I hope those people don't mind. Credit in the guide.

This system is far from perfect, and there are a few near clashes. I hope it will help people with picking colours, though.

PS, if you haven't already, have a browse of Jame's Guide Writing Guide, and download the firefox formatting toolbar!

    If anyone thinks they have a better shade of any of the colours listed below, please comment Smiling

    And also if you think you have something that matches the colours shown here better than mine.

    Back to the top

    I can't say I would recommend using ALL these codes in one guide. A reputation guide would probably want the reputation colours. A class guide would want skills and talents. A levelling guide would want Jame's formatting, and possible Manovan's Profession and the class colours.

    Back to the top

    Reputation Formatting:

    Hated color=#cc0000 + bold
    Hostile color=#ff0000 + bold
    Unfriendly color=#f26000 + bold
    Neutral color=#e4e400 + bold
    Friendly color=#33ff33 + bold
    Honoured color=#5fe65d + bold
    Revered color=#53e9bc + bold
    Exalted color=#2ee6e6 + bold

    Back to the top

    Jame's Levelling Guide Formatting:
    Quests color=#cc9933 + bold
    Items (and objects) color=#993300
    Locations color=#33cc00
    Quest objectives to kill bold
    NPCs color=#4169e1
    Locs italics

    Back to the top

    Other Colours:
    Achievements color=#cc66cc
    Professions color=#663300(Manovan's)
    Talents color=#000099 (Jiyambi's)
    Skills color=#006600 (Jiyambi's)
    Addons and Macros color=#ff0000(Jiyambi's)

    Back to the top

    Raid UI Class Colours:
    WARLOCK color=#6600cc + bold + caps
    MAGE color=#33ccff + bold + caps
    PRIEST color=#999999 + bold + caps
    SHAMAN color=#000099 + bold + caps
    DEATH KNIGHT color=#c30000 + bold + caps
    HUNTER color=#7dd17d + bold + caps
    DRUID color=#ff6600 + bold + caps
    WARRIOR color=#cc9933 + bold + caps
    ROGUE color=#d7d700 + bold + caps
    PALADIN color=#f392f3 + bold + caps

    (While the Priest colour is white, I decided to use grey as white would not show up well on WoW-Pro)

    Back to the top

    Jiyambi's Item Quality Colours:
    [Legendary] color=#f0940a + brackets
    [Epic] color=#8c02cd + brackets
    [Rare] color=#2d2de1 + brackets
    [Uncommon] color=#26c426 + brackets
    [Common] color=#cccccc + brackets
    [Heirloom] color=#ccb896 + brackets
    Back to the top

    If you want to add a colour table (or just one colour) copy the code here and stick it in the top of your guide, so people can see what you're using.


    <li><span style="color:#cc0000"><b>Hated</b></span></li>
    <li><span style="color:#ff0000"><b>Hostile</b></span></li>
    <li><span style="color:#f26000"><b>Unfriendly</b></span></li>
    <li><span style="color:#e4e400"><b>Neutral</b></span></li>
    <li><span style="color:#33ff33"><b>Friendly</b></span></li>
    <li><span style="color:#5fe65d"><b>Honoured</b></span></li>
    <li><span style="color:#53e9bc"><b>Revered</b></span></li>
    <li><span style="color:#2ee6e6"><b>Exalted</b></span></li>
    Back to the top

    Jame's Levelling Formatting:

    <li><span style="color:#cc9933"><b>Quests</b></span></li>
    <li><span style="color:#993300">Items</span></li>
    <li><span style="color:#33cc00">Locations</span></li>
    <li><b>Quest objectives to kill</b></span></li>
    <li><span style="color:#4169e1">NPCs</span></li>
    Back to the top

    Other Colours:

    <li><span style="color:#cc66cc"><b>Achievements</b></span></li>
    <li><span style="color:#663300"><b>Professions</b></span></li>
    <li><span style="color:#000099"><b>Skills</b></span></li>
    <li><span style="color:#006600"><b>Talents</b></span></li>
    <li><span style="color:#ff0000"><b>Addons/macros</b></span></li></span></li>

    Back to the top

    Raid UI Class Colours:

    <li><span style="color:#6600cc"><b>WARLOCK</b></span></li>
    <li><span style="color:#33ccff"><b>MAGE</b></span></li>
    <li><span style="color:#999999"><b>PRIEST</b></span></li>
    <li><span style="color:#000099"><b>SHAMAN</b></span></li>
    <li><span style="color:#c30000"><b>DEATH KNIGHT</b></span></li>
    <li><span style="color:#7dd17d"><b>HUNTER</b></span></li>
    <li><span style="color:#ff6600"><b>DRUID</b></span></li>
    <li><span style="color:#cc9933"><b>WARRIOR</b></span></li>
    <li><span style="color:#d7d700"><b>ROGUE</b></span></li>
    <li><span style="color:#f392f3"><b>PALADIN</b></span></li>

    Back to the top

    Jiyambi's Item Quality Colours

    <a name="itemcod"> </a>
    <li><span style="color:#f0940a"><b>[Legendary]</b></span></li>
    <li><span style="color:#8c02cd"><b>[Epic]</b></span></li>
    <li><span style="color:#2d2de1"><b>[Rare]</b></span></li>
    <li><span style="color:#26c426"><b>[Uncommon]</b></span></li>
    <li><span style="color:#cccccc"><b>[Common]</b></span></li>
    <li><span style="color:#ccb896"><b>[Heirloom]</b></span></li>

    Back to the top


Bitsem's picture

Wrong color?

The NPC color from Jame's Leveling Guide seems to be wrong. I used #4169e1, but it's green, not blue. Any suggestions? I can just pick a blue, but wondered why only that color seems off. Thanks!

Things I never thought I'd say...

"Don't stretch your brother's face like that!"
"Pointed sticks are NOT toys, regular sticks are fine."
"Come inside boys! Pants are necessary for playing outside!"

Things I never thought I'd say...

"Your brother is not a dog! Get that leash off of him!"

kayeich's picture

4169e1 still shows as blue

4169e1 still shows as blue for me

Bitsem's picture

Thanks kayeich

When I would type it into the toolbar, it kept changing to 169e0f. I just did a search and changed them all manually. Works great now! Dunno what the deal was, but it looks great now! Thanks!

Things I never thought I'd say...

"Your brother is not a dog! Get that leash off of him!"

Harper1990's picture

Just thought I'd add a

Just thought I'd add a quick comment here - this guide's awesome!
Also, if you're using Firefox, it may be worth installing the text formatting toolbar which Jame reccomends, it allows you to add custom colours in a couple of clicks without knowing any codes.

"Wise is the man who knows he does not know"...
...Or who knows why my mother keeps calling me.

"Wise is the man who knows he does not know"...
...Or who knows why my mother keeps calling me.

Brune's picture

Good point. I do use that

Good point. I do use that toolbar, but I forgot to mention it. I will include that, or at least a link to Jame's guide writing guide, with perhaps a reiteration to use it.

I'm glad you find the guide useful Smiling

Brune's picture

Code tags aren't working.

Code tags aren't working. Anyone know why?


Jame's picture

Apparently they don't work

Apparently they don't work well with certain bbcode tags. I changed them to html and it works Smiling

Brune's picture

Ah, thanks. I'll just switch

Ah, thanks. I'll just switch the nifty formatting toolbar to HTML for that section then.

Jame's picture

That's quite useful, good

That's quite useful, good idea.

Suggestion: I find that the colors for honored revered and exalted are too bright and a bit hard to see.

Try to find alternatives.

Brune's picture

Well, I'd like to keep the

Well, I'd like to keep the general suggestion of the colour, seeing as that's what Wowwiki and the armoury do, but yeah, I'll darken them.

Brune's picture

I've made them about 15%

I've made them about 15% darker. Hopefully that'll be enough.

Jiyambi's picture

Looks better to me.

Looks better to me. Smiling

Something you have to realize is that WoWWiki, WoWhead, and even WoW itself have very dark backgrounds. Colors simply HAVE to be different on a white background for them to be readable. I know for a fact that this is one of the reasons WoWWiki uses the skin it does (I was there during their discussion of it!).

So unfortunately we can't use identical colors to those in game. But with the different backgrounds, these colors are really indistinguishable from the in game colors. You'd have to see them side by side to really notice a difference.

Brune's picture

Ah, okay. It's like that

Ah, okay.

It's like that fadey optical illusion with the chessboard and the green thing casting the shadow, two colours that are the same look completely different because of their surroundings.

In fact this isn't quite the same, it's opposite, but still.

I suspect the fact I didn't search for the hex codes, I instead did it by eye helps with this Smiling

Brune's picture

From above: Quote:I soon

From above:

I soon hope to work out a good way to show item colours (i.e, uncommon (greens), rares (blues), epics (purples), etc.

These would only be used for specific guides focussing on items (i.e, 'best Enhancement Shammy pre raid gear, etc) as another colour scale would make things too confusing, and the orangey brown colour has been used by Jame on his levelling guides, meaning it's become a convention and we're stuck with it Sticking out tongue

A possible future implementation on here would be the code to allow people to instantly plonk their colour scheme into the top of their guide, (in table format, such as what I currently have for my reputation colours) reducing hassle and making good formatting easier.

Do people think that is a worthwhile project, and should it go on here, or be a new guide? Comment below Sticking out tongue

Anyone got any ideas for the way to format the item colours to make them easier to see (for a guide that bothered to make the distinction between different types of item) and distinguish them from other colour scales.

Perhaps this is not necessary, though, as long as people post the table they're using at the top of their guide, confusion could be avoided (a reputation guide is unlikely to contain specific item colours; a disenchant/gearing guide is unlikely to contain rep values.)

Thanks for reading (I'm sure it was hard work)


Jiyambi's picture

Just found this comment, I

Just found this comment, I know it's a long time after the question was posed, but for my guides I simply include [brackets] around item names. Seems simple enough to me!

P. S. I was checking this guide hoping to see code for item quality, and there's not any!

Here's my suggestion:

Maw's picture

Seriously can't read [12

Seriously can't read

[12 Pound Lobster]
[Dignified Headmaster's Charge]

they're just too bright.

Jiyambi's picture

I just made them darker, I

I just made them darker, I don't think it makes them look any worse so lets keep it. They look better now Maw?

Maw's picture

Yeah, they look alot

Yeah, they look alot better!

Suggest you add it into your guide, Brune.

Oh, and yes, my 2nd screen (which I'm running internet on) is abit bright, so the colors are therefore still bright for me on this screen. But when I move the internet over to my main screen, the colors are just fine.

Brune's picture

Not on my screeen, perhaps

Not on my screeen, perhaps you've got your gamma up high (or me low...)

Brune's picture

Wow. Simple, yet elegant

Wow. Simple, yet elegant Sticking out tongue

I'll put them up.

Kicking myself for not thinking of that.

Manovan's picture

A slight correction: The

A slight correction:
The color I use for profession information is #663300.

I think I'll use the raid colors for the class information in my guides. It would make more sense.

Brune's picture

Thanks, just fixed that. And

Thanks, just fixed that. And I'm very glad you're finding this useful Smiling

Jahwo's picture

Hey nice, that's very


nice, that's very useful! Smiling

As an improvement for more clarity you could use tables to arrange the colour "example" and it's code. A nice guide about tables can be found here

(but maybe use border="0", I don't like the borders Laughing out loud )


Brune's picture

Okay, thanks for the help

Okay, thanks for the help improving my formatting skills, will do ASAP Smiling

Jiyambi's picture

Very useful guide. However,

Very useful guide.

However, it should be moved to the guide writing category.

Also, you might want to try and figure out the colors for loot quality (green/blue/purple/legendary/heirloom). Just something fun to add Smiling

Brune's picture

Hmm, good point.

I'll have to work out how out the most useful way to do that.

My advice for the use of this is to perhaps restrict the use of categories you use. A levelling guide would definitely want Jame's stuff, a rep guide might want the rep colours, a class guide would want yours, a levelling guide would want class colours (well, at least in Manovan's style, not Jame's).

And indeed, an item guide would want those colour codes.

In fact, I think I'll add that to the top.

EDIT: And yes, it should have been. The reason why, I presume was that at first I was not intending to publish, and therefore I didn't bother to change it. Thanks for pointing that out Smiling