| classColors.php |
|---|
• Overview:
Although there are over 16 million possible colors for web pages, page designers are advised to restrict their options to the 140 HTML named colors. Furthermore, as this web page illustrates, selecting one dark color and one light color affords opposite background and text color combinations that satisfy all practical needs.
classColors.php creates a triple-nested array (an array of arrays of arrays). At the first level, colors are collected by "class": all colors of the blue family, then all colors of the brown family, and so on through gray, green, orange, pink, purple, red, white and yellow. At the second level, all hues of a color family are listed from dark-to-light as one reads their list from top-to-bottom. Finally, at the third level, all properties of a color hue are listed: the display name of the color, its hexadecimal value (without the # sign), its RGB values (a comma-delimited list) and its hue characteristic (either dark or light). The last property, hue characteristic, affords a check to make sure that two dark or two light colors have not been selected, which would make web pages quite difficult to read.
Since a triple-nested array practically guarantees array offset addressing mistakes, a special function is provided to look up and return the color class (1st level) offset and the named color or hue (2nd level) offset. Using those values as 1st and 2nd level offsets, the programmer need supply only the 3rd level offset in order to obtain desired hue property values.
The purpose of this class is to load a single array with all properties of all 140 HTML named colors. Owing to its size and the time required to access such a complicated array of arrays of arrays (3 levels deep), it should be used only when all colors need to be avaialable, such as during website setup when choosing color combinations. When chosen colors are known, it will be easier and much faster to use the appropriate database flatfile for a color family (e.g., blues, browns, grays, etc.).
Again owing to the colors array complexity, the following illustrates how to instantiate and use the class to obtain all properties of two known colors, one dark and one light. Then a complete test script is presented. Finally, the complete listing of the class appears.
• Invocation:
// Do this at start-up and not inside a function:
require("classColors.php");
$colors=new Colors();
// Define 3rd level offsets into $colors->colorsArray:
$displayNameOffset=0;
$hexNumberOffset=1;
$rgbNumberOffset=2;
$hueOffset=3;
require("classColors.php");
$colors=new Colors();
// Define 3rd level offsets into $colors->colorsArray:
$displayNameOffset=0;
$hexNumberOffset=1;
$rgbNumberOffset=2;
$hueOffset=3;
• Get dark color offsets for class and name (levels 1 and 2):
// if inside a function, declare globals
global $colors, $displayNameOffset, $hexNumberOffset,
$rgbNumberOffset, $hueOffset; $darkColors="gray/darkslategray"; // family / hue $darkColorsOffsetArray= $colors->findColorOffsets($darkColors); $darkColorClassOffset=$darkColorsOffsetArray[0]; $darkColorNameOffset=$darkColorsOffsetArray[1];
global $colors, $displayNameOffset, $hexNumberOffset,
$rgbNumberOffset, $hueOffset; $darkColors="gray/darkslategray"; // family / hue $darkColorsOffsetArray= $colors->findColorOffsets($darkColors); $darkColorClassOffset=$darkColorsOffsetArray[0]; $darkColorNameOffset=$darkColorsOffsetArray[1];
• Get dark color hue characteristics (level 3):
$darkColorDisplayName=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$displayNameOffset];
$darkColorHexNumber=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$hexNumberOffset];
$darkColorRGBNumber=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$rgbNumberOffset];
$darkColorHue=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$hueOffset];
[$darkColorClassOffset][$darkColorNameOffset]
[$displayNameOffset];
$darkColorHexNumber=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$hexNumberOffset];
$darkColorRGBNumber=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$rgbNumberOffset];
$darkColorHue=$colors->colorsArray
[$darkColorClassOffset][$darkColorNameOffset]
[$hueOffset];
• Get light color offsets for class and name (levels 1 and 2):
$lightColors="white/lavenderblush"; // family / hue
$lightColorsOffsetArray=
$colors->findColorOffsets($lightColors);
$lightColorClassOffset=$lightColorsOffsetArray[0];
$lightColorNameOffset=$lightColorsOffsetArray[1];
• Get light color hue characteristics (level 3):
$lightColorDisplayName=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$displayNameOffset];
$lightColorHexNumber=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$hexNumberOffset];
$lightColorRGBNumber=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$rgbNumberOffset];
$lightColorHue=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$hueOffset];
[$lightColorClassOffset][$lightColorNameOffset]
[$displayNameOffset];
$lightColorHexNumber=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$hexNumberOffset];
$lightColorRGBNumber=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$rgbNumberOffset];
$lightColorHue=$colors->colorsArray
[$lightColorClassOffset][$lightColorNameOffset]
[$hueOffset];
• Display values and illustrate their use:
print("Start");
$printLine="<br>dark colors offsets=".
$darkColorsOffsetArray[0]." and ".
$darkColorsOffsetArray[1]; print($printLine);
$printLine="<br>dark color display name=".
$darkColorDisplayName; print($printLine);
$printLine="<br>dark color hex number=#".
$darkColorHexNumber; print($printLine);
$printLine="<br>dark color RGB number=".
$darkColorRGBNumber; print($printLine);
$printLine="<br>dark color hue is=".
$darkColorHue; print($printLine);
$printLine="<br>light colors offsets=".
$lightColorsOffsetArray[0]." and ".
$lightColorsOffsetArray[1]; print($printLine);
$printLine="<br>light color display name=".
$lightColorDisplayName; print($printLine);
$printLine="<br>light color hex number=#".
$lightColorHexNumber; print($printLine);
$printLine="<br>light color RGB number=".
$lightColorRGBNumber; print($printLine);
$printLine="<br>light color hue is=".
$lightColorHue; print($printLine);
// Now exit PHP to HTML
?>
<div
style="width: 3.0in;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color: #<?print($darkColorHexNumber);?>;
color: #<?print($lightColorHexNumber);?>;">
This was made with HEX color values
</div>
<div
style="width: 3.0in; margin-top: 2px;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color:
rgb(<?print($lightColorRGBNumber);?>);
color: rgb(<?print($darkColorRGBNumber);?>);">
This was made with RGB color values
</div>
<div
style="width: 3.0in; margin-top: 2px;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color: <?print(
strtolower($darkColorDisplayName));?>;
color: <?print(
strtolower($lightColorDisplayName));?>;">
This was made with HTML color names
</div>
<?
// Return from HTML to PHP
print("End");
$printLine="<br>dark colors offsets=".
$darkColorsOffsetArray[0]." and ".
$darkColorsOffsetArray[1]; print($printLine);
$printLine="<br>dark color display name=".
$darkColorDisplayName; print($printLine);
$printLine="<br>dark color hex number=#".
$darkColorHexNumber; print($printLine);
$printLine="<br>dark color RGB number=".
$darkColorRGBNumber; print($printLine);
$printLine="<br>dark color hue is=".
$darkColorHue; print($printLine);
$printLine="<br>light colors offsets=".
$lightColorsOffsetArray[0]." and ".
$lightColorsOffsetArray[1]; print($printLine);
$printLine="<br>light color display name=".
$lightColorDisplayName; print($printLine);
$printLine="<br>light color hex number=#".
$lightColorHexNumber; print($printLine);
$printLine="<br>light color RGB number=".
$lightColorRGBNumber; print($printLine);
$printLine="<br>light color hue is=".
$lightColorHue; print($printLine);
// Now exit PHP to HTML
?>
<div
style="width: 3.0in;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color: #<?print($darkColorHexNumber);?>;
color: #<?print($lightColorHexNumber);?>;">
This was made with HEX color values
</div>
<div
style="width: 3.0in; margin-top: 2px;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color:
rgb(<?print($lightColorRGBNumber);?>);
color: rgb(<?print($darkColorRGBNumber);?>);">
This was made with RGB color values
</div>
<div
style="width: 3.0in; margin-top: 2px;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color: <?print(
strtolower($darkColorDisplayName));?>;
color: <?print(
strtolower($lightColorDisplayName));?>;">
This was made with HTML color names
</div>
<?
// Return from HTML to PHP
print("End");
• Complete source listing of test script:
<?
/*
filename: classColorsTest.php
author: Al Olmstead, AlOlmstead.com, Al@AlOlmstead.com
*/
print("Start");
require("classColors.php");
$colors=new Colors();
// 3rd level offsets into $colors->colorsArray:
$displayNameOffset=0;
$hexNumberOffset=1;
$rgbNumberOffset=2;
$hueOffset=3;
// get 1st and 2nd level offsets for dark color:
$darkColors="gray/darkslategray";
$darkColorsOffsetArray=$colors->
findColorOffsets($darkColors);
$printLine="<br>dark colors offsets=".
$darkColorsOffsetArray[0]." and ".
$darkColorsOffsetArray[1]; print($printLine);
$darkColorClassOffset=$darkColorsOffsetArray[0];
$darkColorNameOffset=$darkColorsOffsetArray[1];
$darkColorDisplayName=$colors->
colorsArray[$darkColorClassOffset]
[$darkColorNameOffset][$displayNameOffset];
$printLine="<br>dark color display name=".
$darkColorDisplayName; print($printLine);
$darkColorHexNumber=$colors->
colorsArray[$darkColorClassOffset]
[$darkColorNameOffset][$hexNumberOffset];
$printLine="lt;br>dark color hex number=#".
$darkColorHexNumber; print($printLine);
$darkColorRGBNumber=$colors->
colorsArray[$darkColorClassOffset]
[$darkColorNameOffset][$rgbNumberOffset];
$printLine="<br>dark color RGB number=".
$darkColorRGBNumber; print($printLine);
$darkColorHue=$colors->
colorsArray[$darkColorClassOffset]
[$darkColorNameOffset][$hueOffset];
$printLine="<br>dark color hue is=".
$darkColorHue; print($printLine);
// get 1st and 2nd level offsets for light color:
$lightColors="white/lavenderblush";
$lightColorsOffsetArray=
$colors->findColorOffsets($lightColors);
$printLine="<br>light colors offsets=".
$lightColorsOffsetArray[0]." and ".
$lightColorsOffsetArray[1]; print($printLine);
$lightColorClassOffset=$lightColorsOffsetArray[0];
$lightColorNameOffset=$lightColorsOffsetArray[1];
$lightColorDisplayName=
$colors->colorsArray[$lightColorClassOffset]
[$lightColorNameOffset][$displayNameOffset];
$printLine="<br>light color display name=".
$lightColorDisplayName; print($printLine);
$lightColorHexNumber=
$colors->colorsArray[$lightColorClassOffset]
[$lightColorNameOffset][$hexNumberOffset];
$printLine="<br>light color hex number=#".
$lightColorHexNumber; print($printLine);
$lightColorRGBNumber=
$colors->colorsArray[$lightColorClassOffset]
[$lightColorNameOffset][$rgbNumberOffset];
$printLine="<br>light color RGB number=".
$lightColorRGBNumber; print($printLine);
$lightColorHue=$colors->
colorsArray[$lightColorClassOffset]
[$lightColorNameOffset][$hueOffset];
$printLine="<br>light color hue is=".
$lightColorHue; print($printLine);
// Now exit PHP to HTML
?>
<div
style="width: 3.0in;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color: #<?print($darkColorHexNumber);?>;
color: #<?print($lightColorHexNumber);?>;">
This was made with HEX color values
</div>
<div
style="width: 3.0in; margin-top: 2px;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color:
rgb(<?print($lightColorRGBNumber);?>);
color: rgb(<?print($darkColorRGBNumber);?>);">
This was made with RGB color values
</div>
<div
style="width: 3.0in; margin-top: 2px;
border-style: solid; border-width: 1px;
border-color: black;
text-align: center; font-size: 10pt;
background-color:
<?print(strtolower($darkColorDisplayName));?>;
color:
<?print(strtolower($lightColorDisplayName));?>;">
This was made with HTML color names
</div>
<?
// Return from HTML to PHP
print("End");
?>
• The foregoing test script produces the following display:
• Complete source listing of classColors.php:
<?
/*
filename: classColors.php
author: Al Olmstead, AlOlmstead.com, Al@AlOlmstead.com
dependencies: none
*/
class Colors{
var $colorsArray;
function findColorOffsets($colors) {
$colorError=true;
$returnOffsetArray=array();
$colorArray=explode("/",$colors);
$colorClass=trim(strtolower($colorArray[0]));
$colorName=trim(strtolower($colorArray[1]));
$classOffset=-1;
$colorsArrayCount=count($this->colorsArray);
for($x=0; $x<$colorsArrayCount; $x++) {
if($this->colorsArray[$x][0]==$colorClass) {
$colorError=false;
$classOffset=$x;
break;
} // if()
} // for()
if($colorError) {
$returnOffsetArray=array(false,false);
} else {
$returnOffsetArray=array($classOffset,false);
} // else{}
if(!$colorError) {
$colorNameArrayCount=
count($this->colorsArray[$classOffset]);
for($x=1; $x<$colorNameArrayCount; $x++) {
$workName=trim(strtolower(
$this->colorsArray[$classOffset][$x][0]));
if($colorName==$workName) {
$returnOffsetArray[1]=$x;
break;
} // if()
} // for()
} // if()
return(array_values($returnOffsetArray));
} // findColorOffsets()
function __construct() {
$this->colorsArray=array(
array(
"blue",
array("Aqua","00FFFF","0,255,255","light"),
array("Aquamarine","7FFFD4","127,255,212","light"),
array("Blue","0000FF","0,0,255","dark","light"),
array("CadetBlue","5F9EA0","95,158,160","light"),
array("CornflowerBlue","6495ED","100,149,237",
"light"),
array("Cyan","00FFFF","0,255,255","light"),
array("DarkBlue","00008B","0,0,139","dark"),
array("DarkTurquoise","00CED1","0,206,209",
"light"),
array("DeepSkyBlue","00BFFF","0,191,255","light"),
array("DodgerBlue","1E90FF","30,144,255","light"),
array("LightBlue","ADD8E6","173,216,230","light"),
array("LightCyan","E0FFFF","224,255,255","light"),
array("LightSkyBlue","87CEFA","135,206,250",
"light"),
array("LightSteelBlue","B0C4DE","176,196,222",
"light"),
array("MediumBlue","0000CD","0,0,205","dark"),
array("MediumTurquoise","48D1CC","72,209,204",
"light"),
array("MidnightBlue","191970","25,25,112","dark"),
array("Navy","000080","0,0,128","dark"),
array("PaleTurquoise","AFEEEE","175,238,238",
"light"),
array("PowderBlue","B0E0E6","176,224,230","light"),
array("RoyalBlue","4169E1","65,105,225","light"),
array("SkyBlue","87CEEB","135,206,235","light"),
array("SteelBlue","4682B4","70,130,180","light"),
array("Turquoise","40E0D0","64,224,208","light")),
array(
"brown",
array("Bisque","FFE4C4","255,228,196","light"),
array("BlanchedAlmond","FFEBCD","255,235,205",
"light"),
array("Brown","A52A2A","165,42,42","dark"),
array("BurlyWood","DEB887","222,184,135","dark"),
array("Chocolate","D2691E","210,105,30","dark"),
array("Cornsilk","FFF8DC","255,248,220","light"),
array("DarkGoldenrod","B8860B","184,134,11",
"dark"),
array("Goldenrod","DAA520","218,165,32","dark"),
array("Maroon","800000","128,0,0","dark"),
array("NavajoWhite","FFDEAD","255,222,173",
"light"),
array("Peru","CD853F","205,133,63","dark"),
array("RosyBrown","BC8F8F","188,143,143","dark"),
array("SaddleBrown","8B4513","139,69,19","dark"),
array("SandyBrown","F4A460","244,164,96","dark"),
array("Sienna","A0522D","160,82,45","dark"),
array("Tan","D2B48C","210,180,140","dark"),
array("Wheat","F5DEB3","245,222,179","light")),
array(
"gray",
array("Black","000000","0,0,0","dark"),
array("DarkGray","A9A9A9","169,169,169","dark"),
array("DarkSlateGray","2F4F4F","47,79,79","dark"),
array("DimGray","696969","105,105,105","dark"),
array("Gainsboro","DCDCDC","220,220,220","light"),
array("Gray","808080","128,128,128","dark"),
array("LightGrey","D3D3D3","211,211,211","light"),
array("LightSlateGray","778899","119,136,153",
"dark"),
array("Silver","C0C0C0","192,192,192","light"),
array("SlateGray","708090","112,128,144","dark")),
array(
"green",
array("Chartreuse","7FFF00","127,255,0","light"),
array("DarkCyan","008B8B","0,139,139","dark"),
array("DarkGreen","006400","0,100,0","dark"),
array("DarkOliveGreen","556B2F","85,107,47",
"dark"),
array("DarkSeaGreen","8FBC8F","143,188,143",
"dark"),
array("ForestGreen","228B22","34,139,34","dark"),
array("Green","008000","0,128,0","dark"),
array("GreenYellow","ADFF2F","173,255,47","light"),
array("LawnGreen","7CFC00","124,252,0","light"),
array("LightGreen","90EE90","144,238,144","light"),
array("LightSeaGreen","20B2AA","32,178,170",
"dark"),
array("Lime","00FF00","0,255,0","light"),
array("LimeGreen","32CD32","50,205,50","dark"),
array("MediumAquamarine","66CDAA","102,205,170",
"dark"),
array("MediumSeaGreen","3CB371","60,179,113",
"dark"),
array("MediumSpringGreen","00FA9A","0,250,154",
"light"),
array("Olive","808000","128,128,0","dark"),
array("OliveDrab","6B8E23","107,142,35","dark"),
array("PaleGreen","98FB98","152,251,152","light"),
array("SeaGreen","2E8B57","46,139,87","dark"),
array("SpringGreen","00,FF,7F","0,255,127",
"light"),
array("Teal","008080","0,128,128","dark"),
array("YellowGreen","9ACD32","154,205,50",
"light")),
array(
"orange",
array("Coral","FF7F50","255,127,80","light"),
array("DarkOrange","FF8C00","255,140,0","light"),
array("LightSalmon","FFA07A","255,160,122",
"light"),
array("Orange","FFA500","255,165,0","light"),
array("OrangeRed","FF4500","255,69,0","light"),
array("Tomato","FF6347","255,99,71","light")),
array(
"pink",
array("Pink","FFC0CB","255,192,203","light"),
array("LightPink","FFB6C1","255,182,193","light"),
array("HotPink","FF69B4","255,105,180","light"),
array("DeepPink","FF1493","255,20,147","dark"),
array("MediumVioletRed","C71585","199,21,133",
"dark"),
array("PaleVioletRed","DB7093","219,112,147",
"light")),
array(
"purple",
array("Lavender","E6E6FA","230,230,250","light"),
array("Thistle","D8BFD8","216,191,216","light"),
array("Plum","DDA0DD","221,160,221","light"),
array("Violet","EE82EE","238,130,238","light"),
array("Orchid","DA70D6","218,112,214","light"),
array("Fuchsia","FF00FF","255,0,255","light"),
array("Magenta","FF00FF","255,0,255","light"),
array("MediumOrchid","BA55D3","186,85,211",
"light"),
array("MediumPurple","9370DB","147,112,219",
"light"),
array("BlueViolet","8A2BE2","138,43,226","light"),
array("DarkViolet","9400D3","148,0,211","dark"),
array("DarkOrchid","9932CC","153,50,204","dark"),
array("DarkMagenta","8B008B","139,0,139","dark"),
array("Purple","800080","128,0,128","dark"),
array("Indigo","4B0082","75,0,130","dark"),
array("DarkSlateBlue","483D8B","72,61,139","dark"),
array("SlateBlue","6A5ACD","106,90,205","dark"),
array("MediumSlateBlue","7B68EE","123,104,238",
"dark")),
array(
"red",
array("IndianRed","CD5C5C","205,92,92","dark"),
array("LightCoral","F08080","240,128,128","light"),
array("Salmon","FA8072","250,128,114","light"),
array("DarkSalmon","E9967A","233,150,122","light"),
array("LightSalmon","FFA07A","255,160,122",
"light"),
array("Red","FF0000","255,0,0","dark"),
array("Crimson","DC143C","220,20,60","dark"),
array("FireBrick","B22222","178,34,34","dark"),
array("DarkRed","8B0000","139,0,0","dark")),
array(
"white",
array("AliceBlue","F0F8FF","240,248,255","light"),
array("AntiqueWhite","FAEBD7","250,235,215",
"light"),
array("Azure","F0FFFF","240,255,255","light"),
array("Beige","F5F5DC","245,245,220","light"),
array("FloralWhite","FFFAF0","255,250,240",
"light"),
array("GhostWhite","F8F8FF","248,248,255","light"),
array("Honeydew","F0FFF0","240,255,240","light"),
array("Ivory","FFFFF0","255,255,240","light"),
array("LavenderBlush","FFF0F5","255,240,245",
"light"),
array("Linen","FAF0E6","250,240,230","light"),
array("MintCream","F5FFFA","245,255,250","light"),
array("MistyRose","FFE4E1","255,228,225","light"),
array("OldLace","FDF5E6","253,245,230","light"),
array("Seashell","FFF5EE","255,245,238","light"),
array("Snow","FFFAFA","255,250,250","light"),
array("White","FFFFFF","255,255,255","light"),
array("WhiteSmoke","F5F5F5","245,245,245",
"light")),
array(
"yellow",
array("DarkKhaki","BDB76B","189,183,107","dark"),
array("Gold","FFD700","255,215,0","light"),
array("Khaki","F0E68C","240,230,140","light"),
array("LemonChiffon","FFFACD","255,250,205",
"light"),
array("LightGoldenrodYellow","FAFAD2",
"250,250,210","light"),
array("LightYellow","FFFFE0","255,255,224",
"light"),
array("Moccasin","FFE4B5","255,228,181","light"),
array("PaleGoldenrod","EEE8AA","238,232,170",
"light"),
array("PapayaWhip","FFEFD5","255,239,213","light"),
array("PeachPuff","FFDAB9","255,218,185","light"),
array("Yellow","FFFF00","255,255,0","light")));
} // __construct()
} // class Colors{}
?>