Or... how to make a color picker in html5Today, Webkit browsers like Chrome and Safari have 3 features that make for a nice and easy color picker:
Color Picker (Webkit Only)
CSS GradientsCSS Gradients look something like this:
background: -webkit-linear-gradient(left, #F00 0%, #0F0 100%);
Change -webkit prefix to -moz -o or -ms for Mozilla, Opera and IE respectively.
<input type="range"/>This one is pretty easy. If you want a slider control, stick in a little bit of this:
<input type="range" min="0" max="360" step="1" value="360"/>
and voila, it renders as a slider in certain browsers. Pity that Mozilla is lagging about 6 years behind.
HSL ColorsIts nice that most browsers now support hsl colors (and hsla, with transparency/opacity). It is far more natural for a human to adjust colors based on Hue, Saturation and Lightness than with RGB values. HSL colors are used like so:
which is red.