textures-tones.com » misc

CSS Plaintext Colors

sean x. l. — Tue, 10 Aug 2010 19:27:17 +0000

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'  

    ),

);

Data Loss

sean x. l. — Wed, 04 Aug 2010 00:19:57 +0000

Well…

So says my hosting provider:

“I’m so sorry but file system of the server crashed and we had only one way to solve this situation by restoring all accounts to a different server from the backups.”

That means…I lost the last 5 days worth of posts. SIGH. I dug through all my cache files on my PC, iPad, and Mac and managed to recreate 2 and a half posts…which I’ll re-post soon. And easy way of keeping track is through my Music Project posts. They restored back to Day 31, I should have up to Day 37. I managed to re-create Day 36, 35, and part of 34. Yesterday’s post was short anyways, and it wasn’t that long ago. As far as Day 33 and 32, well, they’re just lost well aren’t they?

I thought my hosting provider had daily backups! WTF man? I guess I’m going to have to start backing up using WordPress everyday now because part of what they also lost was the upgrade to 3.0.1 which means I can’t just backup my DB (which would be easier but need to backup all relevant files as well) because it might be out of sync then with the restored install version. Again…SIGH.

New Layout!

sean x. l. — Thu, 10 Jun 2010 07:03:02 +0000

So I’ve been talking and thinking about this for a while now, and it’s come up in at least one blog post already, if not more, but finally we have a new layout for the blog! It is, for most intents and purposes, exactly the same but with a new color scheme. The old one looked too, grey, and I think Maria described this new one best as “glossy.” I like that, I think. Either way. The other point was to clean up some of the code behind the other one. That had been a theme somebody else developed which I had just heavily modified, but that meant none of the CSS class names were mine, and were actually in Italian of all languages so completely incomprehensible. I’ve tidied it up, translated it into English, simplified it really but to achieve the same results, improves some legibility and whatnot, and hopefully it still validates which I just realized I forgot to do and here I’ve almost closed Dreamweaver even. Either way. Um…so yeah, new layout w00t! I’ll proper blog at a later date I promise, and not “later” in the Chinese sense of the word to mean “never” but Western “later,” as in…later.

[edit]
This was actually also inspired by the fact that I came across this header graphic that I had created many, many years ago for another project that never got off the ground.

[edit 2]
And it validates! And I even went through the trouble of making a screenshot and theme description and meta for the WP Admin.! w00t!

Hurry up and wait.

maria j. g. — Fri, 11 Sep 2009 19:21:02 +0000

Currently, I’m waiting for the woman who called me 50 min ago and told me she’d be here in 15 min to show up. I’m going to show her my car. I intend to sell it tomorrow, although as always events may dictate otherwise. One way or another, though, it needs to get sold soon. I had been about to leave to take care of some retirement-account errands when she called and asked if “now” were a good time to come. Pffffft.

Validation & Countdown: 2 Weeks, 6 Days

sean x. l. — Tue, 01 Sep 2009 08:17:02 +0000

Ok so it’s a little geeky, but I finally got this page to validate, both the html and css. I also transitioned the javascript from mootools and prototype to jquery, which I am more familiar with. I’ve also properly formatted the code in all the pages I’ve edited.

I must say I’m surprised. I really do enjoy this theme that was created already, and it’s been quite easy to customize and tweak and whatnot, but I had at least expected the code to validate on it’s own, out of the box. All of the css classes/IDs are in Italian also, which is a total pain in the ass. Still, I feel good. I’ve implemented some new features, made some minor, probably not noticeable streamlining changes in the backend php. Coming along nicely if I must say so myself.

We have also just passed the three week mark. Only eight business days left of work also, one of which includes the luncheon. Maria got our Visa applications in to the Chinese Consulate today. She’s picking them up on Thursday. Everything is progressing.

Notice to VS Media

sean x. l. — Wed, 19 Aug 2009 06:03:00 +0000

I, Sean X. Luo, henceforth known as The Employee,
do hereby make known, in writing, as prescribed
by the bylaws governing such declarations,
henceforth known as The Declaration, that on
September the Eleventh, the Year of Our Lord Two
Thousand and Nine, he will depart and vacate his
current employment by V.S. Media Inc., henceforth
known as The Company, for all eternity, in
perpetuity through the Universe and for all time,
and that this declaration shall remain binding
and effective throughout all of The Company’s
directors, shareholders, officers, employees,
partners, agents, subsidiaries, affiliates,
subcontractors and assignees and so forth and
all of The Employee’s successors, progeny, affiliates,
and so forth.

The Declaration may be rendered null and void
and can only be rendered null and void upon an
agreement by both The Company and The Employee
at any time.

Signed,
Sean X. Luo (the Employee)
August the tenth
The Year of Our Lord Two Thousand and Nine