robots.design(tm)

Version 0.92


1. Identify image colors

Submit an image file. You can use a screenshot from an existing site, or comp. The image will be deleted immediately after the colors are identified. The image colors are presented in a table, you may click on the cells of the table to choose the colors from you image, or augment the image colors with those in the color picker. You can also run the scripts from Step 2 on an existing site to get the color codes from the site.

Once you select an image, continue to step 2, and submit a list of color attributes from your CSS files (a bash script is provided). The demo will map your image colors into sed commands (step 3). Be sure to click 'Go' after the image is chosen and the color attributes are entered.

The final step (step 4) is to find all the images for your site, and make them easy to see - then you can change them and copy the new images over the old ones.

This tool allows you to very quickly set the color scheme for an application. You may still want to make some adjustments by hand.







2. Identify colors in target CSS files

These commands recursively read all the CSS files and extract the color attributes. To use them, copy the text into a text file, set the permissions to allow execution and run it, or just paste them on the command line. Paste the results in the textarea below.

Three different command sets are offered:

Searches for color

May be good for searching HTML font tags, as well as CSS.

grep -hr color *.css | sed "s/.*color.*:\ *\"\?\([^\"|^\;|^\!]*\)\(.*\)/color:\1/" | grep ":" > raw.colors
sort raw.colors | uniq

Searches for color and background (without -);

Good for CSS. Should find all color, background, and border settings

grep -ihr color *.css | sed "s/.*color.*:\ *\"\?\([^\"|^\;|^\!]*\)\(.*\)/color:\1;/" | grep ";" > 1.colors
grep -ihr "background[^\-]" *.css | sed "s/.*background.*:\ *\"\?\([^\"|^\;|^\!|\S]*\)\(.*\)/color:\1;/" | grep ";" >> 1.colors
grep -ihr "border[^\-]" *.css | sed "s/.*border.*:\ *\"\?\([^\"|^\;|^\!|\S]*\)\(.*\)/color:\1;/" | grep ";" >> 1.colors
grep -v url 1.colors > 2.colors
grep -v "\/\*" 2.colors > 3.colors
sort 3.colors | uniq > 4.colors
more 4.colors

Searches for colon/space hex code

Good for any file with hex color codes. This is what was used for the demo.

grep -Ghir "[:\ ]#\([0-9a-f]\{3,6\}\)" *.css | sed "s/[^#]*\([^\ |^\"|^\;|^\!]*\)\(.*\)/color:\1/" > raw.colors
sort raw.colors | uniq


3. Generate the sed commands

The sed commands listed below will modify your CSS files. If there are no sed commands, the image or CSS colors haven't been submitted. Be very careful, and be sure you have a backup. They will substitute the colors from step 1 for the colors submitted in step 2. To use it, copy the text into a text file, set the permissions to allow execution and run it.

Two mappings are offered, view the maps below to decide which is a better match for your application, and use the corresponding sed commands. Interpret the mapping text as follows: first code is the color from the application CSS, second code is from the image.



4. Update the images

The following bash script will deliver an HTML page listing the images and their attributes. Demo


*. Credits / Information

This is a very powerful utility which reads an image and ultimately generates the sed commands to modify existing CSS files to reflect the colors of that image.

Requisite skills and access: Basic LAMP, SSH access More Information. User assumes all risk for use of this page and its output.

Contact bgamrat at the domain for information. Comments/suggestions welcome.

Copyright © 2008 Betsy Gamrat. All Rights Reserved.

Credits/Resources

This code uses elements from these URLs