There have been many times where I have been stumped on how I
can allow users to customize the look of my sites, without
sacraficing the quality of the site. The main problem comes
when you want to allow users to change the colors, but you have
Anti-Aliased images. The first thing I would usually do would be
to take the image down to 2 colors, and make one of them transparent.
This left the user with a color that they could not change, and
an image with blocky edges.
Recently, I got an idea to see if I could change the palette of
GIF images dynamically. I looked into the format of GIF's and
got my hands on a Hex editor and found the solution was rather
In this article, I will walk you through the entire process on how
to properly create the GIF images, and then transfer them to my custom
template file format. From there, an ASP page can read these templates,
generate a color palette, and return a GIF image to the browser.
Creating the GIF
For our demonstration, I will create a "Go" button. These can commonly
be used to submit search queries and navigation drop downs. I use 2
colors to make this image. Black (000000) and White (FFFFFF). It is
important to use these two colors so that we can get a full color range
in our palette between the two colors with the highest contrast.
I created an Anti-Aliased circle to prevent the blocky edges, and I
also created the text with Crisp Anti-Aliasing as well. After the image
is finnished, we need to convert the color mode to Indexed Color (256 colors
or less). I prefer to index to 8 colors. It keeps the palette small, yet
retains most of the Anti-Aliasing that we need.
It is important to make sure that the colors are not forced when using
Adobe. This helps our color table to be indexed from the brightest color
to the darkest. If we force the colors, then two colors, Black and White,
will prefix our gradient - making it a little harder for us to work with
the process. Take a look at the color table (Image\Mode\Color Table ...).
To help me identify the colors easier later on when looking at the
binary data of the image, I like to change these colors to the following
Creating a Template
Our image is ready to be saved. I saved mine as "GoButton.gif". The next
step is the fun part. You need to get a Hex Editor to view the binary
data of the image. I like the popular program Ultra Edit. When you
open the file, you should see information displayed simular to that in
the following image.
Notice that I hilighted a specific range of data. If you look at the
colors that I suggested to replace the palette colors, you will see that
they match. Next - open a text editor such as Note Pad and type
in all the characters as you see them. You may want to double check to
make sure you didn't forget any and they are written correctly. It is ok
to use spaces and new lines to help you read the text file easier.
Now we will start adding tags to represent each color. The tags range
from  and incriment to the maximum color. In my case - I chose 8 colors,
to I will replace each one (from lightest to darkest) with a tag. Look
at the image below for a detailed representation.
You may have noticed some extra information in the header of the text file.
The number 8, and two colors FFFFFF and 000000 and they are all delimited
by the semicolin ";" character. The first number represents how many colors
there are in the palette. The second item represents the default color to
display as the first color. And the third itme represents the last default color.
In this case, I chose black and white so that I will see the image in its
original color scheme when it rendures if I do not specify other colors.
Creating the ASP
Our ASP page will need some data passed to it from the query string so that
we know what image to return, and the colors to display it in. I have also
set it up with a Debug flag.
Source of the image. (Can be Physical "C:\GoButton.txt" or a URL "/GoButton.txt")
Hex color to start the color range with
Hex color to end the color range with
Set to True. If viewing the page directly within your browser, you will be able to see custom error/success messages along with the HEX values defined in the template
If our ASP page comes into any errors, such as a non-existing file, a transparent
GIF will be returned so it will look as if the Image didn't load, but it will not
display the common "broken-link" graphics that you would normally see in browsers.
Our page looks for the text file and loads it into memory. If a color was
not specified or invalid, (such as FirstHex or LastHex), then it will
replace that color with the default color.
Our color palette is then created. We attempt to easily phase each part of
the first color (Red, Green, Blue) into the LastHex's color parts. We then
loop through each of the final color range and replace the tags (, , ...)
that were defined in the original text file.
The last part is where we actually return the binary data. We loop through each
hex value and convert it to the byte it represents. The Response.BinaryWrite
method is used along with defining the content type as "image/gif". The browser
understands the content type and rendures the image!
This is an interesting approach to solving custom color problems on websites.
You may want to note however, that this may put a damper on the performance of
your website if it has a lot of traffic. The constant reading files from the
file system will be your bottleneck. The good news is most recent browsers
will cache the images returned as long as the query string matches.
I may have been a little short comming on the workings of the ASP code. You can
view the code in "Image.asp" for more detailed information of the process going
on. Also, a demonstration is included with the zip archive that will let you
dynamically change the image that is loaded along with its color. 4 Other image
templates are included for your enjoyment.