Skip to main content or search

CSS Maintenance Tip: Use a Color Glossary

Thursday May 25, 2006 / 23 Comments

I haven’t done this in a while, but I’ve found it useful to include a color glossary at the top of CSS files. Think of it as a key for hex colors. Not only does this makes it easier to quickly find the color you’re looking for, but it inevitably helps out the poor soul that has to update your code in the future.

/* Yellow Highlight - #ffc Bold Blue - #1678b7 Light Blue Background - #e5f6ff Bold Green - #393 Light Green Background - #e3ffdc Bold Orange - #f60 */

You can make this as simple or as complex as you want. You may want to group different sets of colors based on how you use them. For instance, background colors, heading colors, tab colors, etc. You might even want to add a more detailed explanation that references a style guide or provides a brief explanation of how and when to use that color.

It’s important to remember that the more detailed information you add, the more likely you are to have update it later. I’ve found that a simple list of colors, like I used in the example is enough to get the job done 80% of the time.

Featured Stuff - Resources: Wireframes & Page Description Diagrames

Omnigraffle and Visio versions of the wireframe templates and stencils I use on all of my projects. There’s even a few examples included for good measure. More about Wireframe & Page Description Diagram Stencils and Templates

Wow, that’s exactly what mine looks like! :) I was just thinking about posting about this too, but you beat me to it. I did just add websafe alternates for some though…

/*
COLOR SCHEME
pinkC22463 [b26]
blue4F90C2/326E9C [369/58b]
greenA1B14D [9a5]
orangeC4591D/A94D19 [c52]
redA20303 [a00]
graysF2F2F2/E1E1E1/CCCCCC/666666/383838

*/

It has been an invaluable cheat sheet for me over this past year, working on my reboot. I’ve actually recently moved it to the bottom though because a lot of the new things I add or edits tend to be toward the bottom of my stylesheet.

I’m glad you shared this; it’s great for people to know!

Natalie

Good tip Garrett. I used to do this, then stopped for some unknown reason. lol. Guess this was a good reminder. Thanks.

Yannick

Consider using Shaun Inman’s CSS Server Side Constants. Then you’ll always have that kind of thing available at the top.

I also use the tech already built into Shaun’s little solution to make sure that I am only serving css pages to people who have logged into application’s I’ve built (except, of course, the css needed to display and style the login page).

Walker Hamilton

cool..

thanks. =)

JC

I haven’t ever thought about doing this before, but it makes so much sense. Will definitely add this to my process.

David Hemphill

Great tip! Thanks for sharing.

Jeff Miller

Re: Natalie’s above comment, many of those aren’t “web safe” colors. Web safe is a concept that stemmed from the need for non-dithering palettes on 256 color monitors. Such colors consist of these numbers / letters:

0, 3, 6, 9, C, F

For example: #336699 (blue) or #99ccff (lighter blue)

So, while #383838 isn’t web-safe, #393939 is. It’s no big deal, since most monitors today support 16 million colors, but I thought I should point it out.

Nathan Smith

Great idea. I have never thought to use that. My boss will constantly harass me with “What in the hell is C456B3!?!?”. Boy do I have a surprise for him.

Joey

Great idea Garrett. It is amazing how the simplest things escape us.

Dennis Bullock

Such colors consist of these numbers / letters: 0, 3, 6, 9, C, F (...) So, while #383838 isn’t web-safe, #393939 is.

Sorry, Nathan, close but no cigar. “Web-safe colors” were composed by choosing six out of the 256 values for each RGB channel: 0 (hex 00), 51 (hex 33), 102 (hex 66), 153 (hex 99), 204 (hex CC), and 255 (hex FF). Combining those six possible values for three channels leads to a whopping 214 colour palette which would have moved us to tears on our home computers back in the ‘80s. Anyway, while #383838 wasn’t web-safe, #393939 wasn’t either, closest web-safe would have been #333333.

And while all of that isn’t really contemporary anymore, I still have to encounter a corporate (web) styleguide that doesn’t rely on that web-safe colour premise.

dreamer

Dreamer: Ah, whoops. I mis-spoke. What I meant was to portray this type of thing: Non-dithering colors – I just got my facts a bit mixed up. I appreciate you correcting me.

Nathan Smith

I just like websafe colors because they’re easier to remember. I’m a lazy fart.

Yannick I would LOVE to do something like Shaun did, and it does sound yummy, but my brain would shut down halfway into that process. I took one look at that page and decided I’m best to stick to color palettes and making things pretty the manual way. :)

Natalie Jost

Just to re-emphasize your already emphasized point, documentation is only valuable to the degree that it’s correct. If you don’t update the documentation when you change the css, it’s worse than useless.

Steve

Excellent idea Garret, I’m definitely going to start using a color glossary. But why are we still using hex colors? Are there modern browsers that don’t support it. These days when I’m coding a site I test it in ff1, ff1.5, ie6, ie7, camino, safari and a beta of safari. All of these are fine with rgb() and it seems more human-readible than hex, so why use hex.

Jack Turner

I think the glossary idea is a good one, but what happens when your document gets really long and you have to scroll all the way back up to the glossary because you couldn’t remember all six numerals of a hex value or what color they represented?

For that reason, I usually just comment adjacent to the attribute:

.nav a
{ color: #6699FF; /* blue link / }

.nav a:hover
{ color: #009900; / green rollover */ }

Darren Hoyt

Jack – I’d argue that hex is more readable, but that may just be because of my computer science background. More importantly, to me at least, is that hex is a little shorter than RGB, and often significantly shorter in cases where you only need three letters. Also, it’s easier to cut and paste the hex color from Photoshop and other programs. I’m sure RGB makes more sense for others, but for me, hex is so much more convenient on every front.

Darren – I assume you don’t do that everytime you use a color? The downside I see with your method is that you would still have to look all over your CSS in order to find the color. With a glossary, you always have it in one place. That makes it only one quick keyboard shortcut to get to it. Combined with using Doug’s CSS flags, it’s pretty easy to quickly navigate your file. Of course, you could be putting the color next to the hex value everywhere, but that seems a bit bulky. Also, aren’t “link” and “rollover” a bit redundant given that you have the selector right there?

Garrett

If anyones still in the market for a CSS editor, TopStyle Pro (http://www.newsgator.com) has a CSS palette editor that shows the colours used and all of the classes, ID’s etc that they have been applied to. The palette editor also lets you lighten and darken all colours, convert all to web-safe and also to greyscale, which is great for contrast checking your site.

Toni Ruckwood

Wonderful write up. I have been using this method for a while and have always found it to be a huge help when a client suddenly descides “the shade should be darker” (or when I forget which color I assigned to which heading [wink wink]).

Another great bennefit is that anyone who may be responsible for the site in the future will easily be able to understand and identify what you have done.

Again, thanks for the little insights – I know they are a great help to aspiring coders everywhere.

Joshua Brewer

It’s great reading things like this—little things that are going to make my life that much easier. I really like this tip and I’m going to begin using it exclusively. As Joshua said above, not only will it help me out at work—it’s going to help out my co-workers should they need to make an update. Thanks for the tip.

Jon

web safe colors are in hell where they belong.

take it one step further and abstract your colors.

primary #nnn
secondary #nnn
tertiary #nnn

greys #nnn #nnn

that way you can search and replace when you do your alternate styles.

shaggy

Great artilcle! Simple and useful. Thanks.

Michael Müller

I usually find it easier to just take a screenshot, open it up in photoshop and find the colour code

Ash Haque

cool thanks..

Hardlinks Media

Comments are closed for this entry.