Easy HTML/CSS Color Picker

I was browsing the web for a really simple solution for RGB color selection in a form. But, every example I found seemed to require a ridiculous amount JS. Then I had a genius thought - why not just use CSS and HTML?

So here she is: (as I blog, you'll come to learn that all HTML elements are inherently female)



And here's the code:

<select style="width:50px;"><option style="BACKGROUND: #000000" value="000000"></option><option style="BACKGROUND: #333333" value="333333"></option><option style="BACKGROUND: #666666" value="666666"></option><option style="BACKGROUND: #999999" value="999999"></option><option style="BACKGROUND: #cccccc" value="cccccc"></option><option style="BACKGROUND: #ffffff" value="ffffff"></option><option style="BACKGROUND: #000000" value="000000"></option><option style="BACKGROUND: #000033" value="000033"></option><option style="BACKGROUND: #000066" value="000066"></option><option style="BACKGROUND: #000099" value="000099"></option><option style="BACKGROUND: #0000cc" value="0000CC"></option><option style="BACKGROUND: #0000ff" value="0000FF"></option><option style="BACKGROUND: #003300" value="003300"></option><option style="BACKGROUND: #003333" value="003333"></option><option style="BACKGROUND: #003366" value="003366"></option><option style="BACKGROUND: #003399" value="003399"></option><option style="BACKGROUND: #0033cc" value="0033CC"></option><option style="BACKGROUND: #0033ff" value="0033FF"></option><option style="BACKGROUND: #006600" value="006600"></option><option style="BACKGROUND: #006633" value="006633"></option><option style="BACKGROUND: #006666" value="006666"></option><option style="BACKGROUND: #006699" value="006699"></option><option style="BACKGROUND: #0066cc" value="0066CC"></option><option style="BACKGROUND: #0066ff" value="0066FF"></option><option style="BACKGROUND: #009900" value="009900"></option><option style="BACKGROUND: #009933" value="009933"></option><option style="BACKGROUND: #009966" value="009966"></option><option style="BACKGROUND: #009999" value="009999"></option><option style="BACKGROUND: #0099cc" value="0099CC"></option><option style="BACKGROUND: #0099ff" value="0099FF"></option><option style="BACKGROUND: #00cc00" value="00CC00"></option><option style="BACKGROUND: #00cc33" value="00CC33"></option><option style="BACKGROUND: #00cc66" value="00CC66"></option><option style="BACKGROUND: #00cc99" value="00CC99"></option><option style="BACKGROUND: #00cccc" value="00CCCC"></option><option style="BACKGROUND: #00ccff" value="00CCFF"></option><option style="BACKGROUND: #00ff00" value="00FF00"></option><option style="BACKGROUND: #00ff33" value="00FF33"></option><option style="BACKGROUND: #00ff66" value="00FF66"></option><option style="BACKGROUND: #00ff99" value="00FF99"></option><option style="BACKGROUND: #00ffcc" value="00FFCC"></option><option style="BACKGROUND: #00ffff" value="00FFFF"></option><option style="BACKGROUND: #330000" value="330000"></option><option style="BACKGROUND: #330033" value="330033"></option><option style="BACKGROUND: #330066" value="330066"></option><option style="BACKGROUND: #330099" value="330099"></option><option style="BACKGROUND: #3300cc" value="3300CC"></option><option style="BACKGROUND: #3300ff" value="3300FF"></option><option style="BACKGROUND: #333300" value="333300"></option><option style="BACKGROUND: #333333" value="333333"></option><option style="BACKGROUND: #333366" value="333366"></option><option style="BACKGROUND: #333399" value="333399"></option><option style="BACKGROUND: #3333cc" value="3333CC"></option><option style="BACKGROUND: #3333ff" value="3333FF"></option><option style="BACKGROUND: #336600" value="336600"></option><option style="BACKGROUND: #336633" value="336633"></option><option style="BACKGROUND: #336666" value="336666"></option><option style="BACKGROUND: #336699" value="336699"></option><option style="BACKGROUND: #3366cc" value="3366CC"></option><option style="BACKGROUND: #3366ff" value="3366FF"></option><option style="BACKGROUND: #339900" value="339900"></option><option style="BACKGROUND: #339933" value="339933"></option><option style="BACKGROUND: #339966" value="339966"></option><option style="BACKGROUND: #339999" value="339999"></option><option style="BACKGROUND: #3399cc" value="3399CC"></option><option style="BACKGROUND: #3399ff" value="3399FF"></option><option style="BACKGROUND: #33cc00" value="33CC00"></option><option style="BACKGROUND: #33cc33" value="33CC33"></option><option style="BACKGROUND: #33cc66" value="33CC66"></option><option style="BACKGROUND: #33cc99" value="33CC99"></option><option style="BACKGROUND: #33cccc" value="33CCCC"></option><option style="BACKGROUND: #33ccff" value="33CCFF"></option><option style="BACKGROUND: #33ff00" value="33FF00"></option><option style="BACKGROUND: #33ff33" value="33FF33"></option><option style="BACKGROUND: #33ff66" value="33FF66"></option><option style="BACKGROUND: #33ff99" value="33FF99"></option><option style="BACKGROUND: #33ffcc" value="33FFCC"></option><option style="BACKGROUND: #33ffff" value="33FFFF"></option><option style="BACKGROUND: #660000" value="660000"></option><option style="BACKGROUND: #660033" value="660033"></option><option style="BACKGROUND: #660066" value="660066"></option><option style="BACKGROUND: #660099" value="660099"></option><option style="BACKGROUND: #6600cc" value="6600CC"></option><option style="BACKGROUND: #6600ff" value="6600FF"></option><option style="BACKGROUND: #663300" value="663300"></option><option style="BACKGROUND: #663333" value="663333"></option><option style="BACKGROUND: #663366" value="663366"></option><option style="BACKGROUND: #663399" value="663399"></option><option style="BACKGROUND: #6633cc" value="6633CC"></option><option style="BACKGROUND: #6633ff" value="6633FF"></option><option style="BACKGROUND: #666600" value="666600"></option><option style="BACKGROUND: #666633" value="666633"></option><option style="BACKGROUND: #666666" value="666666"></option><option style="BACKGROUND: #666699" value="666699"></option><option style="BACKGROUND: #6666cc" value="6666CC"></option><option style="BACKGROUND: #6666ff" value="6666FF"></option><option style="BACKGROUND: #669900" value="669900"></option><option style="BACKGROUND: #669933" value="669933"></option><option style="BACKGROUND: #669966" value="669966"></option><option style="BACKGROUND: #669999" value="669999"></option><option style="BACKGROUND: #6699cc" value="6699CC"></option><option style="BACKGROUND: #6699ff" value="6699FF"></option><option style="BACKGROUND: #66cc00" value="66CC00"></option><option style="BACKGROUND: #66cc33" value="66CC33"></option><option style="BACKGROUND: #66cc66" value="66CC66"></option><option style="BACKGROUND: #66cc99" value="66CC99"></option><option style="BACKGROUND: #66cccc" value="66CCCC"></option><option style="BACKGROUND: #66ccff" value="66CCFF"></option><option style="BACKGROUND: #66ff00" value="66FF00"></option><option style="BACKGROUND: #66ff33" value="66FF33"></option><option style="BACKGROUND: #66ff66" value="66FF66"></option><option style="BACKGROUND: #66ff99" value="66FF99"></option><option style="BACKGROUND: #66ffcc" value="66FFCC"></option><option style="BACKGROUND: #66ffff" value="66FFFF"></option><option style="BACKGROUND: #990000" value="990000"></option><option style="BACKGROUND: #990033" value="990033"></option><option style="BACKGROUND: #990066" value="990066"></option><option style="BACKGROUND: #990099" value="990099"></option><option style="BACKGROUND: #9900cc" value="9900CC"></option><option style="BACKGROUND: #9900ff" value="9900FF"></option><option style="BACKGROUND: #993300" value="993300"></option><option style="BACKGROUND: #993333" value="993333"></option><option style="BACKGROUND: #993366" value="993366"></option><option style="BACKGROUND: #993399" value="993399"></option><option style="BACKGROUND: #9933cc" value="9933CC"></option><option style="BACKGROUND: #9933ff" value="9933FF"></option><option style="BACKGROUND: #996600" value="996600"></option><option style="BACKGROUND: #996633" value="996633"></option><option style="BACKGROUND: #996666" value="996666"></option><option style="BACKGROUND: #996699" value="996699"></option><option style="BACKGROUND: #9966cc" value="9966CC"></option><option style="BACKGROUND: #9966ff" value="9966FF"></option><option style="BACKGROUND: #999900" value="999900"></option><option style="BACKGROUND: #999933" value="999933"></option><option style="BACKGROUND: #999966" value="999966"></option><option style="BACKGROUND: #999999" value="999999"></option><option style="BACKGROUND: #9999cc" value="9999CC"></option><option style="BACKGROUND: #9999ff" value="9999FF"></option><option style="BACKGROUND: #99cc00" value="99CC00"></option><option style="BACKGROUND: #99cc33" value="99CC33"></option><option style="BACKGROUND: #99cc66" value="99CC66"></option><option style="BACKGROUND: #99cc99" value="99CC99"></option><option style="BACKGROUND: #99cccc" value="99CCCC"></option><option style="BACKGROUND: #99ccff" value="99CCFF"></option><option style="BACKGROUND: #99ff00" value="99FF00"></option><option style="BACKGROUND: #99ff33" value="99FF33"></option><option style="BACKGROUND: #99ff66" value="99FF66"></option><option style="BACKGROUND: #99ff99" value="99FF99"></option><option style="BACKGROUND: #99ffcc" value="99FFCC"></option><option style="BACKGROUND: #99ffff" value="99FFFF"></option><option style="BACKGROUND: #cc0000" value="CC0000"></option><option style="BACKGROUND: #cc0033" value="CC0033"></option><option style="BACKGROUND: #cc0066" value="CC0066"></option><option style="BACKGROUND: #cc0099" value="CC0099"></option><option style="BACKGROUND: #cc00cc" value="CC00CC"></option><option style="BACKGROUND: #cc00ff" value="CC00FF"></option><option style="BACKGROUND: #cc3300" value="CC3300"></option><option style="BACKGROUND: #cc3333" value="CC3333"></option><option style="BACKGROUND: #cc3366" value="CC3366"></option><option style="BACKGROUND: #cc3399" value="CC3399"></option><option style="BACKGROUND: #cc33cc" value="CC33CC"></option><option style="BACKGROUND: #cc33ff" value="CC33FF"></option><option style="BACKGROUND: #cc6600" value="CC6600"></option><option style="BACKGROUND: #cc6633" value="CC6633"></option><option style="BACKGROUND: #cc6666" value="CC6666"></option><option style="BACKGROUND: #cc6699" value="CC6699"></option><option style="BACKGROUND: #cc66cc" value="CC66CC"></option><option style="BACKGROUND: #cc66ff" value="CC66FF"></option><option style="BACKGROUND: #cc9900" value="CC9900"></option><option style="BACKGROUND: #cc9933" value="CC9933"></option><option style="BACKGROUND: #cc9966" value="CC9966"></option><option style="BACKGROUND: #cc9999" value="CC9999"></option><option style="BACKGROUND: #cc99cc" value="CC99CC"></option><option style="BACKGROUND: #cc99ff" value="CC99FF"></option><option style="BACKGROUND: #cccc00" value="CCCC00"></option><option style="BACKGROUND: #cccc33" value="CCCC33"></option><option style="BACKGROUND: #cccc66" value="CCCC66"></option><option style="BACKGROUND: #cccc99" value="CCCC99"></option><option style="BACKGROUND: #cccccc" value="CCCCCC"></option><option style="BACKGROUND: #ccccff" value="CCCCFF"></option><option style="BACKGROUND: #ccff00" value="CCFF00"></option><option style="BACKGROUND: #ccff33" value="CCFF33"></option><option style="BACKGROUND: #ccff66" value="CCFF66"></option><option style="BACKGROUND: #ccff99" value="CCFF99"></option><option style="BACKGROUND: #ccffcc" value="CCFFCC"></option><option style="BACKGROUND: #ccffff" value="CCFFFF"></option><option style="BACKGROUND: #ff0000" value="FF0000"></option><option style="BACKGROUND: #ff0033" value="FF0033"></option><option style="BACKGROUND: #ff0066" value="FF0066"></option><option style="BACKGROUND: #ff0099" value="FF0099"></option><option style="BACKGROUND: #ff00cc" value="FF00CC"></option><option style="BACKGROUND: #ff00ff" value="FF00FF"></option><option style="BACKGROUND: #ff3300" value="FF3300"></option><option style="BACKGROUND: #ff3333" value="FF3333"></option><option style="BACKGROUND: #ff3366" value="FF3366"></option><option style="BACKGROUND: #ff3399" value="FF3399"></option><option style="BACKGROUND: #ff33cc" value="FF33CC"></option><option style="BACKGROUND: #ff33ff" value="FF33FF"></option><option style="BACKGROUND: #ff6600" value="FF6600"></option><option style="BACKGROUND: #ff6633" value="FF6633"></option><option style="BACKGROUND: #ff6666" value="FF6666"></option><option style="BACKGROUND: #ff6699" value="FF6699"></option><option style="BACKGROUND: #ff66cc" value="FF66CC"></option><option style="BACKGROUND: #ff66ff" value="FF66FF"></option><option style="BACKGROUND: #ff9900" value="FF9900"></option><option style="BACKGROUND: #ff9933" value="FF9933"></option><option style="BACKGROUND: #ff9966" value="FF9966"></option><option style="BACKGROUND: #ff9999" value="FF9999"></option><option style="BACKGROUND: #ff99cc" value="FF99CC"></option><option style="BACKGROUND: #ff99ff" value="FF99FF"></option><option style="BACKGROUND: #ffcc00" value="FFCC00"></option><option style="BACKGROUND: #ffcc33" value="FFCC33"></option><option style="BACKGROUND: #ffcc66" value="FFCC66"></option><option style="BACKGROUND: #ffcc99" value="FFCC99"></option><option style="BACKGROUND: #ffcccc" value="FFCCCC"></option><option style="BACKGROUND: #ffccff" value="FFCCFF"></option><option style="BACKGROUND: #ffff00" value="FFFF00"></option><option style="BACKGROUND: #ffff33" value="FFFF33"></option><option style="BACKGROUND: #ffff66" value="FFFF66"></option><option style="BACKGROUND: #ffff99" value="FFFF99"></option><option style="BACKGROUND: #ffffcc" value="FFFFCC"></option><option style="BACKGROUND: #ffffff" value="FFFFFF"></option></select>