Consistent Colour Design
Written by Kelsey   
Thursday, 01 February 2007
chart.pngI'm working on a fairly large real-estate project at the moment which uses some interesting methods for displaying tabular data. Rather than going with the usual technique of alternating between two colours on the table rows, we're using a graduated colour scheme for the most important data; dark to light over the course of five rows, the better to highlight the sorting of the user's data. Those colours also need to fit in with the general look & feel of the site and there's lots of little information widgets which need styling.

With a layout this complex, I eventually realised that I wasn't being as consistent as I'd like with the colour settings across all my widgets.

For years I've been using the technique of putting a little 'colour chart' at the top of my stylesheet, basically an index of the major and minor colours, and a short description of where they go.

The problem with this is that in a really long stylesheet, you've got to scroll all the way to the top to reference your colours, and even then you only get the descriptions and hex values - you can't actually see the colours.

So instead, I'm now using a colour chart that shows every colour I'm using in css. How it works, after the jump:
 The Markup:

<div class="block_container">
<div class="color_block" style="background-color:#000">
<span class="color_info">#000000</span>
</div>
<div style="clear:both;"></div>
</div>
Just copy this block of code multiple times, replacing the 'color_block' style and span text with the hex values of the colour you wish to show. You might also want to your descriptive name for the colour.

To style this nicely, here's my css:

h2 { font-family:"Century Gothic", Verdana, Arial, sans-serif; font-size:1.5em; color:#6088d5; font-weight:bold; padding:0; margin:0 0 5px 0; }
.block_container { padding:5px; }
.color_block { width:20px; height:20px; float:left; margin:0 20px 0 0; }
.color_info { display:block; width:300px; height:20px; font-family:"Century Gothic", Verdana, Arial, sans-serif; font-size:1em; color:#333; font-weight:bold; float:left; margin:0 0 0 30px; line-height:20px; }
Which nicely styles the chart into a series of boxes giving you a visual reference for each colour in addition to the hex value. I load this page in a browser, turn off all toolbars and size the window small enough to float nearby, enabling quick copy-pastes of the hex values as I need them.

 color_chart
 

About thinksync

We're designers. We're not going to blather on about our design philosophy or methods (there'll be enough of that in the blog).

We design websites, create beautiful printed work and build web applications.

It's what we do, what we love and we're here to help.

Current Projects

Web Design

abstract_no_standing.jpgNo Standing dot com - the blog of Rob Stevens.
Read more...
 

Print Design

peter_sheehan_abstract.png Print projects coming soon!
 

Web Applications

profile_abstract.png Profile ›› innovative eMarketing
Read more...
 

Get in touch

 
 
 

Or get in touch directly:

thinksync
0410579149
This email address is being protected from spam bots, you need Javascript enabled to view it