robots.design(tm)

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, you may either continue to step 2, and submit a list of color attributes from your CSS files (a bash script is provided), or leave the attributes listed and view the demo. The demo will map your image colors into a slightly modified asevo skin for b2evolution using sed commands (step 3) and run them on the blog skin. 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.

---

Image file  Save a thumbnail and post it on the blog


You may paste image colors here. Clicking on the color palette on the right will also add colors to the list. Use the following syntax: color:#000000 color:#040F0B color:#06110D color:#090E0C color:#0A120E color:#0A190F color:#0B1514 color:#0C211C color:#0E1915 color:#0E191A color:#0E1D21 color:#0E6995 color:#0F262D color:#0F5D85 color:#11120F color:#1172A5 color:#121614 color:#131916 color:#141C1A color:#151D22 color:#154F6C color:#16211C color:#163B50 color:#16414F color:#172528 color:#175778 color:#18648A color:#191A16 color:#192B34 color:#193847 color:#194359 color:#1A1D1C color:#1C221D color:#1C323B color:#1D2322 color:#222523 color:#231D1A color:#23221D color:#241F22 color:#242A25 color:#246385 color:#252B2A color:#252D33 color:#253A46 color:#266589 color:#27312A color:#274759 color:#28363A color:#285168 color:#285A79 color:#292625 color:#295E83 color:#2A2B25 color:#2A7AA9 color:#2B241D color:#2B2D2B color:#2B6285 color:#2C322D color:#2C617C color:#2C648A color:#2C698D color:#2D3332 color:#2E6C92 color:#312D32 color:#33332D color:#333532 color:#334954 color:#33668C color:#33698E color:#3387B7 color:#342C26 color:#343934 color:#345467 color:#353B3A color:#356993 color:#36281D color:#363D43 color:#365C76 color:#375E81 color:#38627C color:#386788 color:#393633 color:#3A352B color:#3A3B35 color:#3A6D93 color:#3B3D3B color:#3B413A color:#3B7297 color:#3C4344 color:#43433D color:#444543 color:#454A43 color:#456C89 color:#46362B color:#463C36 color:#473E41 color:#485047 color:#487596 color:#49453A color:#494945 color:#4A4D51 color:#4A708F color:#4C4D4B color:#4C5355 color:#4C5B67 color:#4D524B color:#506572 color:#507CA1 color:#53534C color:#535453 color:#543826 color:#553B2D color:#554C45 color:#565854 color:#567B98 color:#574538 color:#5783A5 color:#5A422D color:#5A554B color:#5A829C color:#5C5B53 color:#5C5C5C color:#5C615A color:#605F60 color:#645D55 color:#64625B color:#646464 color:#664B38 color:#675648 color:#677A8E color:#6787A5 color:#686256 color:#694F45 color:#69513C color:#6A6A64 color:#6A7275 color:#6B645B color:#6C6C6C color:#6D4A34 color:#6F8697 color:#747474 color:#756C65 color:#766658 color:#77553C color:#775A46 color:#78736A color:#7890A7 color:#7A624B color:#7B7973 color:#7C7C7C color:#7D827A color:#838383 color:#845C45 color:#847C74 color:#85593C color:#857769 color:#868F97 color:#876449 color:#876A54 color:#898379 color:#8998A8 color:#8A8984 color:#8C8C8B color:#907056 color:#929CAC color:#937763 color:#939393 color:#94877A color:#948C84 color:#95A2AF color:#965A49 color:#976847 color:#987659 color:#988265 color:#999895 color:#99A5B4 color:#9A938A color:#9B653E color:#9B9B9B color:#A3A3A3 color:#A5ACB7 color:#A77453 color:#A7998B color:#A79C94 color:#A88768 color:#AB7C63 color:#ABA399 color:#ABA8A5 color:#ABABAB color:#ABB2BA color:#ABB5C1 color:#AC9590 color:#AF825D color:#B38D71 color:#B4B4B4 color:#B4BAC4 color:#B5A79A color:#B5B9BB color:#B8ACA3 color:#BAB3A9 color:#BBBCBC color:#BBBDC3 color:#BDC0BF color:#BDC2C5 color:#BDC2CA color:#BEC0D0 color:#C1BFC4 color:#C2946F color:#C37861 color:#C3AC9A color:#C3C4C4 color:#C3C5CA color:#C5B5A9 color:#C5CACC color:#C8BCB3 color:#C9C2B9 color:#C9C8C7 color:#CBCCCC color:#CBCDD2 color:#CED1D3 color:#CFD0CF color:#D3C8B5 color:#D4C7BA color:#D4CECA color:#D5D3CC color:#D5D6D5 color:#DADAD5 color:#DCDCDB color:#DDDFE0 color:#DFE0DB color:#E0CEBD color:#E2E3DD color:#E3DDD8 color:#E4D6CA color:#E5E5E3 color:#EAE6DB color:#EAEAE5 color:#ECECEC color:#F2F1EB color:#F4F4F4 color:#F5E9DB color:#FCF7F4 color:#FEFEFE   

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.

The colors in the textarea are those of the demo, if you would like to skin your own application, you must paste the colors from it into the textarea.

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

color:#000 color:#000000 color:#003399 color:#0066CC color:#00f color:#010101 color:#041527 color:#080008 color:#0f0 color:#101010 color:#111 color:#112536 color:#142D0E color:#195408 color:#1a2b3c color:#215485 color:#222 color:#253161 color:#2860f5 color:#2D2333 color:#2c3e49 color:#313931 color:#333 color:#3A3C3B color:#3c6992 color:#444 color:#48A42E color:#490101 color:#5480a2 color:#555 color:#564A5A color:#58595b color:#5A5A5A color:#5f94c0 color:#6287c2 color:#666 color:#666666 color:#667d92 color:#6B2E7C color:#6B6B6B color:#777 color:#793a02 color:#79757B color:#7B7B7B color:#818891 color:#888 color:#900 color:#909090 color:#949C94 color:#990000 color:#999 color:#999999 color:#9C94A0 color:#9d1500 color:#9d9 color:#9e9286 color:#ADADAD color:#C6C1CE color:#C6C6C6 color:#CECECE color:#DEDEDE color:#E7E7E7 color:#EFEFEF color:#EFF7E7 color:#F7F7EF color:#F7F7F7 color:#F825F1 color:#FFFFFF color:#a10000 color:#aaa color:#acb7c7 color:#b1c6d7 color:#b51a00 color:#bbb color:#cb480c color:#ccc color:#cccccc color:#d0ddeb color:#d5e1ed color:#d91 color:#d99 color:#ddd color:#dddddd color:#e8edf4 color:#eee color:#eeeeee color:#f2fbee color:#f6f9f9 color:#fa9 color:#fbb color:#fbf2ee color:#fcfdfd color:#feb color:#ff0000 color:#ff8400 color:#ffa92f color:#ffb244 color:#ffcc33 color:#ffce31 color:#ffce47 color:#ffd30d color:#ffe8af color:#fff color:#ffffcc color:#ffffff

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 co mmands. Interpret the mapping text as follows: first code is the color from the application CSS, second code is from the image. Demo is from the second map.

4. Update the images

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

#!/bin/bash # All .gif files FILES="*.gif" # Create image list from CSS files #FILES=`grep -h ".jpe\?g\|.gif\|.png" *.css | sed "s/[^(|^\"|^\']*[(|\"|\']*\([^\"|^\'|^)|^\;]*\).*/\1/"` echo "<a name=\"top\" />" for f in $FILES do echo "<a href=\"#$f\">$f</a>  " done for f in $FILES do echo "<hr /><a name=\"$f\" /><a href=\"#top\">Top</a><br />" identify -format "Image: \<strong\>%f\</strong\>\<br /\>Size: %b\<br /\>Dimensions: %w X %h (width X height)\<br /\>\<img src=\"$f\" width=\"%wpx\" height=\"%hpx\" / \>\n" "$f" done

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

• Image Color
• Mike Heuss' ColorToy