Fun with input[type=range], hsl colors and CSS gradients

By Jaaap on Friday 9 March 2012 15:17 - Comments (2)
Category: -, Views: 6.204

Or... how to make a color picker in html5

Today, Webkit browsers like Chrome and Safari have 3 features that make for a nice and easy color picker:
  1. CSS Gradients
  2. <input type="range"/>
  3. HSL colors in CSS
Combine the 3 ingredients above into a color picker that lets you input any CSS color and then play with Hue, Saturation and Lightness: Color Picker (Webkit Only)

CSS Gradients

CSS Gradients look something like this:

Cascading Stylesheet:
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 Colors

Its 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:

Cascading Stylesheet:
color: hsl(360,100%,50%);

which is red.