Hopville Blog

It’s difficult trying to standardize colors across a site. I picked up a tip somewhere to keep a legend at the top of a stylesheet, something like this;

/*
HOPVILLE COLORS
F9F9FF off white
4a443c main text
B34700 link text
FF6600 action link text
eeeeee tiger body
*/

Then you have an easy hex color reference right at the top of your main stylesheet. But “easy” becomes relative. On Hopville, I ended up describing shades of green as “medium”, “medium light”, “lightest”, and “extra-lightest”. Extra-lightest green? Which one was that again? And as the site’s color scheme has evolved, the legend has gotten out of date.  Some of the colors on the site aren’t in the legend any more, some of the colors in the legend aren’t in use anymore, and so on.
It just occurred to me that this could be automated, that I could scan all the stylesheets with a script, pull out the color attributes, and generate a color swatch page on the fly.  So when I want “that one shade of green”, I can go look it up and cut and paste the hex value, without having to dig through stylesheets or maintain a color palette legend.  Rails made it easy to generate it on the fly with an erb template (ignoring MVC for simplicity’s sake) and not even have to set up a cronjob.

Dynamic color palette browser created from stylesheets in Rails.

The code:

<%
stylesheet_dir = RAILS_ROOT + '/public/stylesheets'
files = Dir.open(stylesheet_dir)
css_files = []
colors_in_stylesheets = Hash.new {}

files.each do |file|
  if file.match(/\.css$/)
     File.open(stylesheet_dir + '/' + file).each do |line|
        if line.match(/\#([0-9a-f]{3,6})\;/i)
          unless colors_in_stylesheets[file]
            colors_in_stylesheets[file] = {}
          end
          colors_in_stylesheets[file][$1.downcase] = 1
        end
      end
  end
end

block_size = 100
%>

<style type="text/css">
div.swatch-block {
  margin:10px;
  float:left;
  width:<%= block_size %>px;
  height:<%= block_size %>px;
  text-align:center;
  border:1px dotted #ccc;
}
div.swatch-block span {
  background-color:#fff;
  color:#999;
  border:1px dotted #ccc;
  padding:3px;
}
h2 { clear:left; }
</style>

<h1>Color Swatch</h1>
<% colors_in_stylesheets.keys.sort{|a,b|
   colors_in_stylesheets[b].size <=> colors_in_stylesheets[a].size
   }.each do |stylesheet| %>
  <h2><%= stylesheet %></h2>
  <% colors_in_stylesheets[stylesheet].sort.each do |color, garbage| %>
    <div class="swatch-block" style="background-color:#<%= color %>;">
    <span><%= color %></span>
    </div>
  <% end %>
<% end %>

This works great for me since I always use hex colors, but I imagine it could be tweaked to find other color definitions as well.