Dave Woods - Freelance Web Design Warwickshire

CSS colour tip

Whenever I’m browsing the web and come across a certain website where something is interesting or I’m curious as to how something has been done, I’ll take a look in the source code and CSS to see how the designer solved a certain problem or created part of the page.

This morning I came across an interesting idea on 456 Berea Street whilst looking at the CSS created by Roger Johansson.

My method of working usually involves creating or using a Photoshop document to create the HTML and CSS and one of the most time consuming tasks is using the eye-dropper tool in Photoshop to find out the hex value.

As the CSS gets larger, I’ll then need to either hunt through the file to find the hex value (which inevitably takes a couple of attempts at finding the right one) or means going back to Photoshop and repeating the eyedropper task again.

An easy solution to this would be to jot the hex values down on a piece of paper but this would probably get lost during a big project and certainly wouldn’t be easy to use across a team of designers.

However, what Roger has done is made a comment at the top of the CSS which displays all the colours that are used within his CSS file with descriptions making them easily identifiable with other aspects of the page.

/* COLOURS
Dark green headings (Main articles): 8A8E27
Light green headings (Home page sections): 828368
Green headings (Secondary): 578A1C
Green border colour: b6c8b0
Links: AE4F0C
Link hover: D03900
Heading link border: cfcfa0
Beige background colour: f1efe7
Light green background colour: f4f6e0 */

This may not seem like a huge deal and is probably something a lot of designers already do but thought it would be worth sharing as it’s something I’ll definitely be using in future and will certainly save me a little bit of time over the course of a project.

15 comments on “CSS colour tip

  1. Dan Schulz

    Actually, I haven’t seen this before. I’ll probably end up using it in a future project. Thanks for sharing it, Dave. 🙂

  2. Dave Post author

    Yeah, I certainly had a “why didn’t I think of that?” moment when I saw it as it’s so simple yet extremely effective.

  3. Karinne

    Thanks for reminding me about this! I remember seeing Roger doing this in his CSS and I said to myself: “Now that’s a pretty smart thing to do”… but of course … never got around to doing it :p

    Nice site BTW.

  4. Dave Post author

    Yeah, I’ll try and get into the habit of doing it as it’s one of those things that probably seems like a bit of hassle at the start of a project but you’ll reap the benefits of it once the CSS starts becoming larger.

    Thanks for the comments about the site. It’s actually using a ready-made wordpress theme so I’m actually in the process of redesigning it a little and creating a custom theme 🙂

  5. Damien

    I wish CSS had a #define idea to keep the hex values in sync. There is always the chance that the comment at the top will get out of sync with those outside the comments.

  6. Dave Post author

    It would be useful to have some kind of variable support but there’s nothing stopping you from creating your CSS file with a PHP and then serving it as text/css.

  7. Tristan

    That is actually A good idea. I normally keep all my hex values jotted down on a post-it note stuck to one of my screens but become aggravated when I decide to work on a file on my laptop and haven’t got the post-it note… This is a simple solution for what can be an annoying problem.

  8. Tim Davis

    This is a great tip and I shall incorporate it into my future projects.

    I have found another trick to help speed up the design process, I get my color palette (#hex(s);) and make a simple html page with them in it, then I use the “Palette Grabber” extension for FireFox and create/import into Photoshop the color palette. This way I can have it right in Photoshop when laying out my mock up.

  9. Pixelslave

    I’ve been doing this for a long time. When you’re working with a large site that may undergo modifications by many different individuals or groups over its lifetime it helps promote consistency–sort of like a style guide for your style sheet.

  10. Pingback: Weird Wonderful Web Links for October 6th | False Positives

  11. James

    This is nuts. What happens as you make adjustments to the CSS? You have colors defined in 2 places, and you have to make sure you keep them in sync, by hand. That’s *work*.

    Better to add comments where the colors are actually used, and have a small shell script parse the file and generate the “color glossary”.

    .error {
    color: #933; /* error text */
    }

    ~10 lines of Ruby or Perl to parse this and create a color guide.

  12. Dave Post author

    Hi James, if you find that way of working easier then that’s fine. As a CSS designer though then I’ll usually find myself working from a Photoshop file so any changes to colour or layout will have already been made at this stage so colours won’t be changing.

    This comment tip is more for the scenario when different colours need to be used across the site so can be useful to specify them at the top of the CSS just for reference.

    You could generate the CSS using variables and a server side language or as you’ve pointed out generate a colour glossary but it seems like a bit of extra work as apposed to simply changing a hex value for the rare occasions that a colour may change from the PSD mockup.