Monday, December 31, 2007

Flash from the past - Web safe color palette

This entry is more of reminder for myself. I needed to generate an array of the old hexadecimal web safe colors. (Do not ask me why I had to do this. I would not tell you under threat of torture). Anyway, I am posting this entry as a reference for myself, in case I ever need to do something similar in the future.

Is that it?
About the only interesting thing I can say about the function is it uses the FormatBaseN function to convert the decimal RGB values (0,51,102,153,204,255) to hexadecimal format (00,33,66,99,cc,ff). Then uses nested loops to construct the array of 216 web safe colors.

So without any fanfare, here it is in all its lame glory. Or would that be a contradiction?

Code


<h1>Old Web Safe Palette Example</h1>
<cfset palette = createWebSafePalette()>
<!--- create web safety palette --->
<cfset palette = createWebSafePalette()>
<!--- show web safety palette --->
<table border="1">
<tr>
<cfoutput>
<cfloop from="1" to="#arrayLen(palette)#" index="x">
<td style="width: 75px; background-color: ###palette[x]#">#palette[x]#</td>
<cfif x MOD 9 EQ 0></tr><tr></cfif>
</cfloop>
</tr>
</cfoutput>
</table>

<cffunction name="createWebSafePalette" returntype="array" access="public" output="false"
hint="Returns an array of hexidecimal color values in web safety palette">
<cfset var palette = ArrayNew(1)>
<cfset var hexValues = ArrayNew(1)>
<!--- cfSearching: use old web safe rgb decimal values --->
<cfset var decValues = listToArray("0,51,102,153,204,255")>
<cfset var x = 0>
<cfset var red = 0>
<cfset var green = 0>
<cfset var blue = 0>
<cfset var totalSize = 0>

<cfscript>
// cfSearching: convert decimal values to hex format
for (x = 1; x LTE arrayLen(decValues); x = x + 1) {
// cfSearching: must pad "0" value
if (decValues[x] EQ 0) {
arrayAppend( hexValues, "0"& FormatBaseN( decValues[x], 16) );
}
else {
arrayAppend( hexValues, FormatBaseN( decValues[x], 16) );
}
}

totalSize = arrayLen(hexValues);

// cfSearching: create safety palette colors from hex values (R-G-B)
for (red = 1; red LTE totalSize; red = red + 1) {
for (green = 1; green LTE totalSize; green = green + 1) {
for (blue = 1; blue LTE totalSize; blue = blue + 1) {
arrayAppend( palette, hexValues[red] & hexValues[green] & hexValues[blue] );
}
}
}
</cfscript>

<cfreturn palette>
</cffunction>

0 comments:

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008

Header image adapted from atomicjeep