Comments on: CSS colour tip

By: St. Athanasius

St. Athanasius — Thu, 06 Nov 2008 00:49:33 +0000

Long this is not met.

By: John Faulds

John Faulds — Wed, 24 Oct 2007 13:17:41 +0000

If you’re just referencing colours that you’ve already used in your layout, I find the Colorpicker extension for Firefox does the job for me.

By: Mark

Mark — Mon, 22 Oct 2007 11:51:03 +0000

Great idea.
Simple but very useful.

By: Dave

Dave — Mon, 15 Oct 2007 08:22:40 +0000

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.

By: James

James — Sun, 14 Oct 2007 21:02:02 +0000

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.

By: Weird Wonderful Web Links for October 6th | False Positives

Weird Wonderful Web Links for October 6th | False Positives — Sun, 07 Oct 2007 00:33:39 +0000

[...] CSS colour tip – make 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. [...]

By: Pixelslave

Pixelslave — Sat, 06 Oct 2007 18:53:05 +0000

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.

By: Tim Davis

Tim Davis — Sat, 06 Oct 2007 18:38:44 +0000

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.

By: Tristan

Tristan — Fri, 05 Oct 2007 08:26:44 +0000

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.

By: Dave

Dave — Thu, 04 Oct 2007 09:12:07 +0000

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.