The aim of this post is to see some characteristics of the recommendation of the color module in CSS3, specified in http://www.w3.org/TR/css3-color/.
The main change in the color use in CSS3 is the possibility of using models in rgb, rgba, hsl and hsla color. One of the principal vantages of this color models is that they ease the management of the different properties of the colors, besides applying an opacity level to color. The hsl model, which is the one I want to stand out, is a more intuitive model as it indicates the hue, saturation and brightness values and it allow us to create color palettes in a more simple way by doing variations in some of the values of the hsl model. The saturation value is represented by an angle of the color wheel, which is measured in degrees, although only the number is specified from 0 to 360, where the red=0=360. The saturation and brightness are specified in percentages.
|
1 |
div { color: hsl(120, 100%, 75%) } |
Now I am going to make an example in order to show how easy can be to create a color selector on the basis of the hsl model. To do this, I use the ‘input’ tag of range type, to ease the selection of the different values. This type will only work in some of the latest versions of the different browsers, given that it is a novelty in html5 forms http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-(type=range). If not specified, the ‘min’ and ‘max’ attributes of the range type will be 0 and 100, respectively, and we can assign to it a step scale factor, ‘step’, which is 1 by default. Next we create a JavaScript function which collects and update each of ‘input’ values.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function update(){ var hinput = document.getElementById("hinput") var htxt = document.getElementById("htxt") var h = hinput.value; htxt.innerHTML = h; var sinput = document.getElementById("sinput") var stxt = document.getElementById("stxt") var s = sinput.value; stxt.innerHTML = s; var linput = document.getElementById("linput") var ltxt = document.getElementById("ltxt") var l = linput.value; ltxt.innerHTML = l; var col = document.getElementById("col") col.setAttribute("style", "background-color: hsl("+h+", "+s+"%, "+l+"%)"); } document.addEventListener("change", update, false); window.addEventListener("load", update, false); |
Besides the hsl model, we can use the hsla model, where ‘a’ specifies the color alpha value. This alpha value will be a number between 0.0 and 1.0 and it will be used as follows.
|
1 |
div { color: hsla(120, 100%, 75%, 0.5) } |
I will add to the previous example the use of the alpha value. To simulate the transparency of the way other image editing programs do it, as Photoshop or Fireworks, instead of using an image as background, I have used a pattern entirely done with CSS3. Many of us know this technique thanks to the Lea Verou patterns gallery.
|
1 2 3 |
background-image: -webkit-linear-gradient(45deg, #DFDFDF 25%, transparent 25%, transparent 75%, #DFDFDF 75%, #DFDFDF), -webkit-linear-gradient(45deg, #DFDFDF 25%, transparent 25%, transparent 75%, #DFDFDF 75%, #DFDFDF); background-size: 16px 16px; background-position: 0 0, 8px 8px; |
Finally, using JavaScript we convert the different values into rgb and hexadecimal models.
Tags: color CSS
