Making a million little color swatches with imagemagick and rake

10/11/2009 ( )

Yesterday I was working on a project, and found myself needing to create a bunch of color swatches. CSS wasn't an option. No. They had to be little 16x16 images.

In such situations, I often resort to a more-or-less socratic dialog:

"Is it not so that you are building this for a client"

"Yes."

"And do clients not inevitably change their minds"

"Very true, they usually do"

"Then would it not make sense to generate these swatches programmatically?"

The Rake Task

Heartily agreeing with myself, I devised the following rake task for creating color swatches, based on input from a YAML file. BTW, You'll need to have imagemagick installed. 

# Rakefile
desc "Create new color swatches"
task :swatches do

        require "yaml"

        YAML.load_file("swatches.yml").each do |name, color|
                p "Creating: #{name} (#{color}) => images/colors/#{name}.png"
                %x[ convert -size 16x16 xc:white -draw "stroke #666666 fill white rectangle 0,0 15,15" -draw "stroke white fill #{color} rectangle 1,1 14,14" "images/colors/#{name}.png" ]
        end

end

The YAML File

Now create a "swatches.yml" file like so: 

# swatches.yml
black:             "#0F0F0F"
blue:              "#3055A0"
gray:              "#949A9F"
green:             "#4D8756"
light_green:       "#92C14F"
navy:              "#304264"
orange:            "#DA7A2D"
red:               "#C31E38"
teal:              "#477D79"
white:             "#FFFFFF"
yellow:            "#FFFF00"

W00t!

Now you can just type in "rake swatches" and feel the magick. 

$ rake swatches

"Creating: white (#FFFFFF) => images/colors/white.png"
"Creating: navy (#304264) => images/colors/navy.png"
"Creating: black (#0F0F0F) => images/colors/black.png"
"Creating: forest_green (#2E5234) => images/colors/forest_green.png"
"Creating: blue (#3055A0) => images/colors/blue.png"
"Creating: orange (#DA7A2D) => images/colors/orange.png"
"Creating: green (#4D8756) => images/colors/green.png"
"Creating: brick (#6F0028) => images/colors/brick.png"
"Creating: red (#C31E38) => images/colors/red.png"
"Creating: light_green (#92C14F) => images/colors/light_green.png"
"Creating: gray (#949A9F) => images/colors/gray.png"
"Creating: teal (#477D79) => images/colors/teal.png"
"Creating: yellow (#FFFF00) => images/colors/yellow.png"
"Creating: school_bus_yellow (#E9AF42) => images/colors/school_bus_yellow.png"
> comment <