Home‎ > ‎

Using Imagemagick to rotate hue of CSS style sheet

posted Feb 28, 2011, 6:30 PM by Jayme Snyder   [ updated Apr 28, 2011, 2:59 PM ]
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
 
 
Comments