ASPkey - A Resource Site for Web Developers

	Services
	Portfolio
	Products
	Sample Code
	Quotes
	Blog
	Feedback
	Basket
	Checkout
	Tools
	.net Assemblies

Your basket has: Total items: 0
Subtotal: $0.00

Article
Create your own color chart

Here is an overview about colors that may help the newcomers and perhaps a few experts as well. The code generates a color chart that can produce a variable range of color choices.

Colors are a document property. There are two choices for selecting colors. The first is to use a built in color, that is provided with HTML. This can be either red, blue, green, yellow, lime, gray, fuschia, black, maroon, navy, teal, purple, olive, aqua, silver or white.

If you choose not to use one of the provided colors then there are millions of other color choices. To represent these colors, hexadecimal values are used. Two hex digits are used for each hue of red, green and blue. The description will read out as "rrggbb".
The hues range from 0 to 255. Why 255, because 255 is the most you can get from two hexadecimal digits. In hexadecimal, 255 is "FF", or 15 sixteens and 15 ones.

Using this background information, it is possible to create a range of colors in a chart. Looking at colors to select them is a lot easier than talking about them as numbers.
So here is the code.

Set up your usual page tags

<HTML>
<HEAD>
<TITLE>Color Chart</TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="generator" content="VisualN++">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<CENTER>
<H2>Color Chart</H2>
</CENTER>

Include a form to select the user's preference of color choices. That is to say, how many different colors will be offered as a choice. This form feeds a step size value to a loop. The lower the step size in the loop, the more colors that will be offered.

<%
DIM strScriptName, intStep, strColor, str_rr, str_gg, str_bb

'get the name of the current page
strScriptName = Request.ServerVariables("SCRIPT_NAME")

%>
<Form name="MyForm" Action= "<%=strScriptName%>?key=1" >
Select Step Size: <SELECT Name = "StepSize" SIZE="1">
<OPTION>3</OPTION>
<OPTION>4</OPTION>
<OPTION SELECTED>5</OPTION>
</SELECT>
<INPUT TYPE="Submit" Value="Submit">
</Form>
</CENTER>

The code below is the loop that receives the input parameter and generates the color chart. By incrementing each hue in the "rrggbb" range, a new color can be generated. Using a value greater than 1 is recommended, as the chart can be quite large.

<%
If len(Request("StepSize")) then

intStep= Request("StepSize")

for str_rr = 0 to 15 step intStep
    for str_gg = 0 to 15 step intStep
        Response.write("<TABLE width='100%'><TR>")
        for str_bb = 0 to 15 step intStep
            strColor="#" & hex(str_rr) & hex(str_rr) & _
hex(str_gg) & hex(str_gg) & hex(str_bb) & hex(str_bb)
            Response.write("<TD align='right' width='*'><font face='Courier New' size='2'>" & _
strColor & "</font></TD>")
            Response.write("<TD width='50' bgcolor=" & _
strColor & "></TD>")
        next
        Response.write("</TR>")
    next
next
        Response.write("</TABLE>")
End if
%>

</BODY>
</HTML>

A 'Courier New' font was selected for fixed-width alignment. Enjoy!

Return To Top

Article