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

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

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:

http://spaghetticoder.org/colors.png Color Picker (Webkit Only)

CSS Gradients

CSS Gradients look something like this:

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

HTML:
1
<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:
1
color: hsl(360,100%,50%);

which is red.

Volgende: Verstrengelde deeltjes 12-07 Verstrengelde deeltjes
Volgende: IE9 and <select/>, why u no work? 11-'11 IE9 and <select/>, why u no work?

Comments


By Tweakers user dcm360, Friday 9 March 2012 16:14

Works almost in Opera too, except Opera doesn't support -webkit-linear-gradient (duh).

By Tweakers user Jaaap, Friday 9 March 2012 16:54

dcm360 wrote on Friday 09 March 2012 @ 16:14:
Works almost in Opera too, except Opera doesn't support -webkit-linear-gradient (duh).
Fixed a little bit for Opera.
There does not appear to be any way to hide the default slider bar, like
Cascading Stylesheet:
1
input[type=range] { -webkit-appearance: none !important;}

does for Webkit.

[Comment edited on Friday 9 March 2012 16:54]


Comments are closed