Using Imagemagick to rotate hue of CSS style sheet

Post date: Mar 1, 2011 2:30:45 AM

Earlier I mentioned how I skinned the GPLHost DTC control panel using imagemagick to modify the graphics. The one thing that bugged me is I never came up with a semi-automatic way of changing the style sheet... but then I had a brilliant idea. I could use Imagemagic just the same! I think.

The process I thought of was this:

  1. Parse the css for all colours
  2. Make an image using the text input format to imagemagick
  3. Change the image with modulate or similar imagemagic commands and output back to text
  4. Parse the image files and map colour to colour

After a bit of hacking it together, I ended up with something like this:

IFS='

'

i=0

echo "# ImageMagick pixel enumeration: 1,90,255,RGB">img.txt

for colour in `cat skin.css|sed "s/.*\(#[1234567890ABCDEFabcdef]*\).*/\1/g"|sort -u|grep ^#....`;

do red=`echo $colour|awk 'END{print "ibase=16; " toupper(substr($1,2,2))}'|bc`

green=`echo $colour|awk 'END{print "ibase=16; " toupper(substr($1,4,2))}'|bc`

blue=`echo $colour|awk 'END{print "ibase=16; " toupper(substr($1,6,2))}'|bc`

echo "0,$i: ($red,$green,$blue) ${colour}">>img.txt

i=$[i+1]

done

convert txt:img.txt -modulate 100,100,-10 -depth 8 txt:img2.txt

for colour in `cat img.txt|grep "#[1234567890ABCDEFabcdef]"|sed "s/.*\(#[1234567890ABCDEFabcdef]*\).*/\1/g"`

do line=`cat img.txt|grep -n "$colour"|awk 'BEGIN{FS=":"}{print $1}'`

newcolour=`cat img2.txt|awk "NR==$line{print}"|grep "#[1234567890ABCDEFabcdef]"|sed "s/.*\(#[1234567890ABCDEFabcdef]*\).*/\1/g"`

echo "$colour -> $newcolour"

done

Which when run, produces:

#083658 -> #581208

#105278 -> #781610

#1C3135 -> #351C1F

#277193 -> #932827

#30F9FF -> #FF3068

#3381A1 -> #A13334

#3F91AF -> #AF3F42

#547074 -> #745459

#5A5A5A -> #5A5A5A

#7FCEF1 -> #F17F7F

#928E81 -> #818A92

#9FC8D7 -> #D79FA0

#BAC0A2 -> #A2A5C0

#C0DBE5 -> #E5C0C1

#CFCBBF -> #BFC7CF

#CFE3EB -> #EBCFCF

#DADDCB -> #CBCDDD

#DBDDCC -> #CCCFDD

#dbe9ed -> #EDDBDC

#DFEDF2 -> #F2DFDF

#E3E5D8 -> #D8D9E5

#ECEEE5 -> #E5E5EE

#EFF6F8 -> #F8EFEF

#F6F6F2 -> #F2F3F6

#FFFFFF ->

Just need to use sed to change the values in each file and then bam - instant colour hack