MattStypa.com
5Jan/11

Converting CSS colors to grayscale

Last week I was working on integrating punBB into my website and I ran into a small challenge. I needed to make punBB match my blog's color scheme. By default punBB looks like this:

I started editing the CSS file and quickly realized that it is going to take much more time and effort that I was willing to invest at that time. I started analyzing alternative solutions and quickly figured out that converting the default color scheme to grayscale would do the trick. I started looking online for a tool that could do such a thing. I didn't find anything but it didn't seem too hard to write a script that would change all the colors in a css file. Having absolutely no idea how to convert an RGB code from color to grayscale I setup my first experiment.

If RGB code describes intensity of red, green, and blue respectively, if I total the intensity values and then spread them evenly between red, green, and blue I should get gray of the same intensity as the base color. With that assumption in mind, I wrote the following VBScript code. I realize that it's dirty and could be written much better but I had 5 minutes to write it and it worked so don't wine.

'Setting up System File Object
Set objFSO = CreateObject("Scripting.FileSystemObject")
'Opening input css file. 1 = reading
Set inFile = objFSO.OpenTextFile("in.css", 1)
'Opening output css file. 2 = writing
Set outFile = objFSO.OpenTextFile("out.css", 2)

'Main loop
Do Until inFile.AtEndOfStream
	'Read a line from input file
	line = inFile.ReadLine
	'Find position of first "#"
	pos = InStr(line,"#")
	'If "#" was found pos will be larger then 0. The reason this is a while loop is that "#" could occur more then once per line
	while pos > 0
		'Checking if the "#" found could be a 3 digit color code
		if mid(line,pos+4,1)=" " or mid(line,pos+4,1)=";" then
			'Converting rgb values to decimal from hex
			r = CInt("&H" & mid(line,pos+1,1))
			b = CInt("&H" & mid(line,pos+2,1))
			g = CInt("&H" & mid(line,pos+3,1))
			'This is where the conversion to grayscale happens
			t = hex((r+b+g)/3)
			'Rebuilding the line with the new value
			line = mid(line,1,pos) & t & t & t & mid(line,pos+4)

		'Checking if the "#" found could be a 6 digit color code
		elseif mid(line,pos+7,1)=" " or mid(line,pos+7,1)=";" then
			'Converting rgb values to decimal from hex
			r = CInt("&H" & mid(line,pos+1,2))
			b = CInt("&H" & mid(line,pos+3,2))
			g = CInt("&H" & mid(line,pos+5,2))
			'This is where the conversion to grayscale happens
			t = hex((r+b+g)/3)
			'Making sure that t is two digits long and if not add "0" in front
			if t < 2 then
				t = "0" & t
			end if
			'Rebuilding the line with the new value
			line = mid(line,1,pos) & t & t & t & mid(line,pos+7)
		end if
		'Checking for another "#" on this line
		pos = InStr(pos+1,line,"#")
	wend
	'Write to the output file
	outFile.WriteLine(line)
Loop
'Closing files
inFile.Close
outFile.Close
'Done
msgbox("Done")

Amazingly it worked like a charm so enjoy it.

  • Digg
  • Facebook
  • Twitter
Filed under: Code, Web Comments Off
Comments (0) Trackbacks (0)

Sorry, the comment form is closed at this time.

Trackbacks are disabled.