CSS Plaintext Colors

So I’m writing a web application to display the relative location of wireless sensors within a 2D floor plan. Since everything is dynamic, as in there can be any number of possible sensors to display, I needed some way of color coding them so the points are recognizable in a legend. I looked all around for a simple list of colors, something that I could easily put into my PHP code. A pre-formatted array would have been even better. I found neither. The best I found was a pre-formatted array of RGB values, but I wanted plaintext and hex, and as far as those go the best they got are color charts and tables.

On a completely unrelated bit, I was working on a PHP screen scraper to pull specific data out of web pages. The two projects seemed to work well together actually. I found a page of all the plaintext CSS color words and their appropriate hex codes, used my screen scraper to just grab the name and code, then generated a pre-formatted output and preview, that’s attached to this post :)

I’m using 4 spaces per tab, so a simple Dreamweaver convert-spaces-to-tabs will give you a properly formatted array of valid CSS plaintext colors and their hex codes. It works great in my sensor web application by the way. I’m having it loop through it and randomly getting colors for 15 sensors at the moment.


$COLORS = array(
    '1' => array(
        'name'    => 'aliceblue'
        'hex'    => '#f0f8ff'  
    ),
    '2' => array(
        'name'    => 'antiquewhite'
        'hex'    => '#faebd7'  
    ),
    '3' => array(
        'name'    => 'aqua'
        'hex'    => '#00ffff'  
    ),
    '4' => array(
        'name'    => 'aquamarine'
        'hex'    => '#7fffd4'  
    ),
    '5' => array(
        'name'    => 'azure'
        'hex'    => '#f0ffff'  
    ),
    '6' => array(
        'name'    => 'beige'
        'hex'    => '#f5f5dc'  
    ),
    '7' => array(
        'name'    => 'bisque'
        'hex'    => '#ffe4c4'  
    ),
    '8' => array(
        'name'    => 'black'
        'hex'    => '#000000'  
    ),
    '9' => array(
        'name'    => 'blanchedalmond'
        'hex'    => '#ffebcd'  
    ),
    '10' => array(
        'name'    => 'blue'
        'hex'    => '#0000ff'  
    ),
    '11' => array(
        'name'    => 'blueviolet'
        'hex'    => '#8a2be2'  
    ),
    '12' => array(
        'name'    => 'brown'
        'hex'    => '#a52a2a'  
    ),
    '13' => array(
        'name'    => 'burlywood'
        'hex'    => '#deb887'  
    ),
    '14' => array(
        'name'    => 'cadetblue'
        'hex'    => '#5f9ea0'  
    ),
    '15' => array(
        'name'    => 'chartreuse'
        'hex'    => '#7fff00'  
    ),
    '16' => array(
        'name'    => 'chocolate'
        'hex'    => '#d2691e'  
    ),
    '17' => array(
        'name'    => 'coral'
        'hex'    => '#ff7f50'  
    ),
    '18' => array(
        'name'    => 'cornflowerblue'
        'hex'    => '#6495ed'  
    ),
    '19' => array(
        'name'    => 'cornsilk'
        'hex'    => '#fff8dc'  
    ),
    '20' => array(
        'name'    => 'crimson'
        'hex'    => '#dc143c'  
    ),
    '21' => array(
        'name'    => 'cyan'
        'hex'    => '#00ffff'  
    ),
    '22' => array(
        'name'    => 'darkblue'
        'hex'    => '#00008b'  
    ),
    '23' => array(
        'name'    => 'darkcyan'
        'hex'    => '#008b8b'  
    ),
    '24' => array(
        'name'    => 'darkgoldenrod'
        'hex'    => '#b8860b'  
    ),
    '25' => array(
        'name'    => 'darkgray'
        'hex'    => '#a9a9a9'  
    ),
    '26' => array(
        'name'    => 'darkgreen'
        'hex'    => '#006400'  
    ),
    '27' => array(
        'name'    => 'darkkhaki'
        'hex'    => '#bdb76b'  
    ),
    '28' => array(
        'name'    => 'darkmagenta'
        'hex'    => '#8b008b'  
    ),
    '29' => array(
        'name'    => 'darkolivegreen'
        'hex'    => '#556b2f'  
    ),
    '30' => array(
        'name'    => 'darkorange'
        'hex'    => '#ff8c00'  
    ),
    '31' => array(
        'name'    => 'darkorchid'
        'hex'    => '#9932cc'  
    ),
    '32' => array(
        'name'    => 'darkred'
        'hex'    => '#8b0000'  
    ),
    '33' => array(
        'name'    => 'darksalmon'
        'hex'    => '#e9967a'  
    ),
    '34' => array(
        'name'    => 'darkseagreen'
        'hex'    => '#8fbc8f'  
    ),
    '35' => array(
        'name'    => 'darkslateblue'
        'hex'    => '#483d8b'  
    ),
    '36' => array(
        'name'    => 'darkslategray'
        'hex'    => '#2f4f4f'  
    ),
    '37' => array(
        'name'    => 'darkturquoise'
        'hex'    => '#00ced1'  
    ),
    '38' => array(
        'name'    => 'darkviolet'
        'hex'    => '#9400d3'  
    ),
    '39' => array(
        'name'    => 'deeppink'
        'hex'    => '#ff1493'  
    ),
    '40' => array(
        'name'    => 'deepskyblue'
        'hex'    => '#00bfff'  
    ),
    '41' => array(
        'name'    => 'dimgray'
        'hex'    => '#696969'  
    ),
    '42' => array(
        'name'    => 'dodgerblue'
        'hex'    => '#1e90ff'  
    ),
    '43' => array(
        'name'    => 'firebrick'
        'hex'    => '#b22222'  
    ),
    '44' => array(
        'name'    => 'floralwhite'
        'hex'    => '#fffaf0'  
    ),
    '45' => array(
        'name'    => 'forestgreen'
        'hex'    => '#228b22'  
    ),
    '46' => array(
        'name'    => 'fuchsia'
        'hex'    => '#ff00ff'  
    ),
    '47' => array(
        'name'    => 'gainsboro'
        'hex'    => '#dcdcdc'  
    ),
    '48' => array(
        'name'    => 'ghostwhite'
        'hex'    => '#f8f8ff'  
    ),
    '49' => array(
        'name'    => 'gold'
        'hex'    => '#ffd700'  
    ),
    '50' => array(
        'name'    => 'goldenrod'
        'hex'    => '#daa520'  
    ),
    '51' => array(
        'name'    => 'gray'
        'hex'    => '#808080'  
    ),
    '52' => array(
        'name'    => 'green'
        'hex'    => '#008000'  
    ),
    '53' => array(
        'name'    => 'greenyellow'
        'hex'    => '#adff2f'  
    ),
    '54' => array(
        'name'    => 'honeydew'
        'hex'    => '#f0fff0'  
    ),
    '55' => array(
        'name'    => 'hotpink'
        'hex'    => '#ff69b4'  
    ),
    '56' => array(
        'name'    => 'indianred '
        'hex'    => '#cd5c5c'  
    ),
    '57' => array(
        'name'    => 'indigo '
        'hex'    => '#4b0082'  
    ),
    '58' => array(
        'name'    => 'ivory'
        'hex'    => '#fffff0'  
    ),
    '59' => array(
        'name'    => 'khaki'
        'hex'    => '#f0e68c'  
    ),
    '60' => array(
        'name'    => 'lavender'
        'hex'    => '#e6e6fa'  
    ),
    '61' => array(
        'name'    => 'lavenderblush'
        'hex'    => '#fff0f5'  
    ),
    '62' => array(
        'name'    => 'lawngreen'
        'hex'    => '#7cfc00'  
    ),
    '63' => array(
        'name'    => 'lemonchiffon'
        'hex'    => '#fffacd'  
    ),
    '64' => array(
        'name'    => 'lightblue'
        'hex'    => '#add8e6'  
    ),
    '65' => array(
        'name'    => 'lightcoral'
        'hex'    => '#f08080'  
    ),
    '66' => array(
        'name'    => 'lightcyan'
        'hex'    => '#e0ffff'  
    ),
    '67' => array(
        'name'    => 'lightgoldenrodyellow'
        'hex'    => '#fafad2'  
    ),
    '68' => array(
        'name'    => 'lightgrey'
        'hex'    => '#d3d3d3'  
    ),
    '69' => array(
        'name'    => 'lightgreen'
        'hex'    => '#90ee90'  
    ),
    '70' => array(
        'name'    => 'lightpink'
        'hex'    => '#ffb6c1'  
    ),
    '71' => array(
        'name'    => 'lightsalmon'
        'hex'    => '#ffa07a'  
    ),
    '72' => array(
        'name'    => 'lightseagreen'
        'hex'    => '#20b2aa'  
    ),
    '73' => array(
        'name'    => 'lightskyblue'
        'hex'    => '#87cefa'  
    ),
    '74' => array(
        'name'    => 'lightslategray'
        'hex'    => '#778899'  
    ),
    '75' => array(
        'name'    => 'lightsteelblue'
        'hex'    => '#b0c4de'  
    ),
    '76' => array(
        'name'    => 'lightyellow'
        'hex'    => '#ffffe0'  
    ),
    '77' => array(
        'name'    => 'lime'
        'hex'    => '#00ff00'  
    ),
    '78' => array(
        'name'    => 'limegreen'
        'hex'    => '#32cd32'  
    ),
    '79' => array(
        'name'    => 'linen'
        'hex'    => '#faf0e6'  
    ),
    '80' => array(
        'name'    => 'magenta'
        'hex'    => '#ff00ff'  
    ),
    '81' => array(
        'name'    => 'maroon'
        'hex'    => '#800000'  
    ),
    '82' => array(
        'name'    => 'mediumaquamarine'
        'hex'    => '#66cdaa'  
    ),
    '83' => array(
        'name'    => 'mediumblue'
        'hex'    => '#0000cd'  
    ),
    '84' => array(
        'name'    => 'mediumorchid'
        'hex'    => '#ba55d3'  
    ),
    '85' => array(
        'name'    => 'mediumpurple'
        'hex'    => '#9370d8'  
    ),
    '86' => array(
        'name'    => 'mediumseagreen'
        'hex'    => '#3cb371'  
    ),
    '87' => array(
        'name'    => 'mediumslateblue'
        'hex'    => '#7b68ee'  
    ),
    '88' => array(
        'name'    => 'mediumspringgreen'
        'hex'    => '#00fa9a'  
    ),
    '89' => array(
        'name'    => 'mediumturquoise'
        'hex'    => '#48d1cc'  
    ),
    '90' => array(
        'name'    => 'mediumvioletred'
        'hex'    => '#c71585'  
    ),
    '91' => array(
        'name'    => 'midnightblue'
        'hex'    => '#191970'  
    ),
    '92' => array(
        'name'    => 'mintcream'
        'hex'    => '#f5fffa'  
    ),
    '93' => array(
        'name'    => 'mistyrose'
        'hex'    => '#ffe4e1'  
    ),
    '94' => array(
        'name'    => 'moccasin'
        'hex'    => '#ffe4b5'  
    ),
    '95' => array(
        'name'    => 'navajowhite'
        'hex'    => '#ffdead'  
    ),
    '96' => array(
        'name'    => 'navy'
        'hex'    => '#000080'  
    ),
    '97' => array(
        'name'    => 'oldlace'
        'hex'    => '#fdf5e6'  
    ),
    '98' => array(
        'name'    => 'olive'
        'hex'    => '#808000'  
    ),
    '99' => array(
        'name'    => 'olivedrab'
        'hex'    => '#6b8e23'  
    ),
    '100' => array(
        'name'    => 'orange'
        'hex'    => '#ffa500'  
    ),
    '101' => array(
        'name'    => 'orangered'
        'hex'    => '#ff4500'  
    ),
    '102' => array(
        'name'    => 'orchid'
        'hex'    => '#da70d6'  
    ),
    '103' => array(
        'name'    => 'palegoldenrod'
        'hex'    => '#eee8aa'  
    ),
    '104' => array(
        'name'    => 'palegreen'
        'hex'    => '#98fb98'  
    ),
    '105' => array(
        'name'    => 'paleturquoise'
        'hex'    => '#afeeee'  
    ),
    '106' => array(
        'name'    => 'palevioletred'
        'hex'    => '#d87093'  
    ),
    '107' => array(
        'name'    => 'papayawhip'
        'hex'    => '#ffefd5'  
    ),
    '108' => array(
        'name'    => 'peachpuff'
        'hex'    => '#ffdab9'  
    ),
    '109' => array(
        'name'    => 'peru'
        'hex'    => '#cd853f'  
    ),
    '110' => array(
        'name'    => 'pink'
        'hex'    => '#ffc0cb'  
    ),
    '111' => array(
        'name'    => 'plum'
        'hex'    => '#dda0dd'  
    ),
    '112' => array(
        'name'    => 'powderblue'
        'hex'    => '#b0e0e6'  
    ),
    '113' => array(
        'name'    => 'purple'
        'hex'    => '#800080'  
    ),
    '114' => array(
        'name'    => 'red'
        'hex'    => '#ff0000'  
    ),
    '115' => array(
        'name'    => 'rosybrown'
        'hex'    => '#bc8f8f'  
    ),
    '116' => array(
        'name'    => 'royalblue'
        'hex'    => '#4169e1'  
    ),
    '117' => array(
        'name'    => 'saddlebrown'
        'hex'    => '#8b4513'  
    ),
    '118' => array(
        'name'    => 'salmon'
        'hex'    => '#fa8072'  
    ),
    '119' => array(
        'name'    => 'sandybrown'
        'hex'    => '#f4a460'  
    ),
    '120' => array(
        'name'    => 'seagreen'
        'hex'    => '#2e8b57'  
    ),
    '121' => array(
        'name'    => 'seashell'
        'hex'    => '#fff5ee'  
    ),
    '122' => array(
        'name'    => 'sienna'
        'hex'    => '#a0522d'  
    ),
    '123' => array(
        'name'    => 'silver'
        'hex'    => '#c0c0c0'  
    ),
    '124' => array(
        'name'    => 'skyblue'
        'hex'    => '#87ceeb'  
    ),
    '125' => array(
        'name'    => 'slateblue'
        'hex'    => '#6a5acd'  
    ),
    '126' => array(
        'name'    => 'slategray'
        'hex'    => '#708090'  
    ),
    '127' => array(
        'name'    => 'snow'
        'hex'    => '#fffafa'  
    ),
    '128' => array(
        'name'    => 'springgreen'
        'hex'    => '#00ff7f'  
    ),
    '129' => array(
        'name'    => 'steelblue'
        'hex'    => '#4682b4'  
    ),
    '130' => array(
        'name'    => 'tan'
        'hex'    => '#d2b48c'  
    ),
    '131' => array(
        'name'    => 'teal'
        'hex'    => '#008080'  
    ),
    '132' => array(
        'name'    => 'thistle'
        'hex'    => '#d8bfd8'  
    ),
    '133' => array(
        'name'    => 'tomato'
        'hex'    => '#ff6347'  
    ),
    '134' => array(
        'name'    => 'turquoise'
        'hex'    => '#40e0d0'  
    ),
    '135' => array(
        'name'    => 'violet'
        'hex'    => '#ee82ee'  
    ),
    '136' => array(
        'name'    => 'wheat'
        'hex'    => '#f5deb3'  
    ),
    '137' => array(
        'name'    => 'white'
        'hex'    => '#ffffff'  
    ),
    '138' => array(
        'name'    => 'whitesmoke'
        'hex'    => '#f5f5f5'  
    ),
    '139' => array(
        'name'    => 'yellow'
        'hex'    => '#ffff00'  
    ),
    '140' => array(
        'name'    => 'yellowgreen'
        'hex'    => '#9acd32'  
    ),
);

0 Comments

New Comment