Yesterday I wrote a simple function for an upcoming post on working with defined color palettes. The palette of CSS 2.1 colors is small and useful for examples and could also be useful for form validation of a color field.

The following table was easily generated using GetCSS21Colors and HexToRGB from my previous post.

Name Color Hex RGB
BLUE
#0000FF (0, 0, 255)
WHITE
#FFFFFF (255, 255, 255)
FUCHSIA
#FF00FF (255, 0, 255)
MAROON
#800000 (128, 0, 0)
GREEN
#008000 (0, 128, 0)
AQUA
#00FFFF (0, 255, 255)
OLIVE
#808000 (128, 128, 0)
NAVY
#000080 (0, 0, 128)
SILVER
#C0C0C0 (192, 192, 192)
YELLOW
#FFFF00 (255, 255, 0)
BLACK
#000000 (0, 0, 0)
LIME
#00FF00 (0, 255, 0)
ORANGE
#FFA500 (255, 165, 0)
PURPLE
#800080 (128, 0, 128)
RED
#FF0000 (255, 0, 0)
GRAY
#808080 (128, 128, 128)
view plain print about
1<cfset qColors = getCSS21Colors(resultType: 'query')>
2<table>
3 <thead>
4 <th>Name</th>
5 <th>Color</th>
6 <th>Hex</th>
7 <th>RGB</th>
8 </thead>
9 <cfoutput query="qColors">
10 <cfset myrgb = HexToRGB(color)>
11 <tr>
12 <td>#name#</td>
13 <td><div style="background: #color#; height: 20px; width: 100px;"></div></td>
14 <td>#color#</td>
15 <td>
16 (#myrgb.r#,#myrgb.g#,#myrgb.b#)</td>
17 </tr>
18 </cfoutput>
19</table>

The GetCSS21Colors function will return CSS 2.1 colors and color names.  

view plain print about
1<cffunction name="GetCSS21Colors" access="public" output="false" hint="returns 17 colors as defined by CSS 2.1" returntype="any">
2    <cfargument name="resultType" type="string" required="false" default="query" hint="query, list, struct">
3
4    <cfset var colors = structNew()>
5 <cfset var qColors = "">
6 <cfset var color = "">
7 <cfset var retVal = "">
8
9 <!--- http://www.w3.org/TR/CSS21/syndata.html#color-units --->
10
11 <cfset colors.black = "##000000">
12 <cfset colors.silver = "##C0C0C0">
13 <cfset colors.gray = "##808080">
14 <cfset colors.navy = "##000080">
15 <cfset colors.blue = "##0000FF">
16 <cfset colors.aqua = "##00FFFF">
17 <cfset colors.teal = "##008080">
18 <cfset colors.purple = "##800080">
19 <cfset colors.fuchsia = "##FF00FF">
20 <cfset colors.white = "##FFFFFF">
21 <cfset colors.lime = "##00FF00">
22 <cfset colors.green = "##008000">
23 <cfset colors.maroon = "##800000">
24 <cfset colors.red = "##FF0000">
25 <cfset colors.orange = "##FFA500">
26 <cfset colors.yellow = "##FFFF00">
27 <cfset colors.olive = "##808000">
28
29 <cfswitch expression="#resultType#">
30     <cfcase value="struct">
31     <!--- return struct --->
32     <cfset retVal = colors>
33     </cfcase>
34 <cfcase value="list">
35     <!--- return list --->
36 <cfloop collection="#colors#" item="color">
37     <cfset retVal = ListAppend(retVal, colors["#color#"], ',')>
38 </cfloop>
39 </cfcase>
40 <cfdefaultcase>
41            <!--- return query --->
42            <cfset qColors = queryNew("name, color")>
43 <cfloop collection="#colors#" item="color">
44 <cfset queryAddRow(qColors)>
45 <cfset querySetCell(qColors, 'color', colors["#color#"])>
46 <cfset querySetCell(qColors, 'name', color)>
47 </cfloop>
48 <cfset retVal = qColors>
49 </cfdefaultcase>
50 </cfswitch>
51
52 <cfreturn retVal>
53</cffunction>