CURLIES FOR COLOR CODE GENERATION?

A while after reading this, I needed a way to generate websafe colors for my color-matching/color-testing tool and this little guy suddenly jumped at me from nowhere. Can I use this counter for my color tool? If I can get it to create the list of color codes for me, that would be so great since I can improve upon it! I started simply at first and got the list of color codes. Then I added a div to hold the styling elements. Finally I added width, height and background color to the style string and stored the output in a html file with the 216 websafe colors and immediately opened it with the browser all at once. All within the oneliner itself, of course! It was so simple, so easy and so cool. You must try this oneliner and two other variations of it yourself to view the websafe color pages it creates. Don't forget to change the browser if needed!

$ echo \<div\ style=\"width\:100%\;height\:3px\;background\:\#{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<\/div\>>websafe216colors.htm;chrome websafe216colors.htm &

HOW I UNDERSTAND THE RED,GREEN,BLUE[RGB] COLOR SCHEME
Think of a movie screen with 3 lights behind it colored red, green and blue. Assume you have a brightness controller with a slider for each color numbered 0 through 255 for brightness control. Now it is easy to imagine what would happen when you move all three color sliders down to zero [0 0 0]. There would be complete darkness - color black[#000]! With the sliders maxed out[255 255 255], there would be maximum brightness - color white[#fff]! Moving each slider randomly any way you like, you get all the different colors on the color palette. For example with the sliders at [0 100 0] you get dark green, at [255 0 0] you get red etc. One of my todo items is to mix 1 can each of red, green and blue paints to see how white the mixture would be!

Look at the color pairs below. These 8 pairs make up the 16 basic colors. These complement each other really nicely! Lighter shades of these pairs would be my first choice for simple, no-frills color-coordination!

white #ffffff

black #000000

silver #c0c0c0

gray #808080

red #ff0000

maroon #800000

yellow #ffff00

olive #808000

lime #00ff00

green #008000

aqua #00ffff

teal #008080

blue #0000ff

navy #000080

fuchsia #ff00ff

purple #800080

LIST OF 657 NAMED COLORS

Read More
http://en.wikipedia.org/wiki/X11_color_names

DECIMAL COLOR NOTATION

All colors can be noted in the decimal form using digits 0,1,2,3,4,5,6,7,8,9. For example the color black has the decimal form [0 0 0] in the RGB representation, three numbers one for red, green and blue each at the one end of the spectrum. The same way, the color white has the decimal form [255 255 255] at the other end.

HEXADECIMAL COLOR NOTATION

All colors can be noted in the hexadecimal form using the digits 0,1,2,3,4,5,6,7,8,9 and the letters a,b,c,d,e and f. For example the color black has the hexadecimal form [#00 00 00] in the RGB representation, three sets of numbers one for red, green and blue each. The same way, the color white has the hexadecimal form [#ff ff ff].

TRIPLETS

All the doubled up hexadecimal colors can be shrunk to 3digits. For example the color black [#00 00 00] can also be written as #000 using just one zero for every doubled up zero. The same way, the color white [#ff ff ff] can also be written as #fff using just one f for every doubled f. This kind of triplet short form is specified by CSS only so they need to be used within the style strings of CSS only. Some browsers may not respect them.
For more information about web colors, visit
http://en.wikipedia.org/wiki/Web_colors

OKAY WITH COLOR THEORY, LET'S GET BACK TO OUR ONE-LINER

First, count the colors. We should have 216 websafe colors. $ echo {0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}|wc

Good, we have our 216, no problem. Now the color codes themselves.

$ echo {0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}

We just got the skeleton structure for our websafe color list. Let us go ahead and put some flesh on it to make up the html styling.

Insert an empty div tag to hold the styling string. Remember to escape the "<",">","/" characters with "\" since they have special meaning in shell scripting.

$ echo \<div\>{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\>\<\/div\>

Get the style tag in and remember to escape the space character " " and double quote """ escaped with the "\" this time.

$ echo \<div\ style=\"{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<\/div\>

Add the width, height, and background tags and escape the ":" and "#" characters.

$ echo \<div\ style=\"width\:10px\;height\:10px\;background\:\#{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<\/div\>

We're almost done! This in fact is our html content!

Add the code to store the html output in a file and open it with the web browser to view it all at once.

I used Chrome, you change it to match your browser if it is different.

$ echo \<div\ style=\"width\:10px\;height\:3px\;background\:\#{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<\/div\>>websafe216colors.htm;chrome websafe216colors.htm &

Do you see the html output file displayed? Yes but it's so narrow! Let's increase the width to 100% so we can see the colors in all their glory.

THE FINAL ONELINER CODE

$ echo \<div\ style=\"width\:100%\;height\:3px\;background\:\#{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<\/div\>>websafe216colors.htm;chrome websafe216colors.htm &

216 WEBSAFE COLORS. HTML OUTPUT

With a little change to the style string, we can easily create two more variations of the same oneliner.

HORIZONTAL

$ echo \<div\ style=\"width\:200px\;height\:18px\;float\:left\;background\:\#{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<a\ style=\"font-size\:6px\;\"\>\<\/a\>\<\/div\>>websafe216colors.htm;chrome websafe216colors.htm &

VERTICAL

$ echo \<div\ style=\"width\:5px\;height\:800px\;float\:left\;background\:\#{0,3,6,9,c,f}{0,3,6,9,c,f}{0,3,6,9,c,f}\"\>\<a\ style=\"font-size\:6px\;\"\>\<\/a\>\<\/div\>>websafe216colors.htm;chrome websafe216colors.htm &

CREDITS & LINKS

Curly Counter Original Oneliner-Amphetamachine

The wiki article on color coding

ColorZilla Firefox Addon