Color Picker HSLA

HTML5 Color Picker

by secretgspot

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.5.1/build/cssgrids/cssgrids-min.css&amp;3.5.1/build/cssreset/cssreset-min.css&amp;3.5.1/build/cssfonts/cssfonts-min.css&amp;3.5.1/build/cssbase/cssbase-min.css">
<h1>Color Picker HSLA</h1>
    <div class="yui3-g">
        <div class="yui3-u-1-2">
            <div class="content">
            <fieldset>
            <legend><h2>Color Picker</h2></legend>
                <form id="colorpicker">
                  <p>
                      <label for="h">Farbton(Hue)</label>
                      <input  type="range"  id="h" name="h" min="0" max="360" value="0" step="1" >
                      <output id="output_h">0</output>
                  </p>

                  <p>
                      <label for="s">Sättigung(Saturation)</label>
                      <input  type="range"  id="s" name="s" min="0" max="100" value="100" >
                      <output id="output_s">0</output>
                  </p>

                  <p>
                      <label for="l">Helligkeit(Luminance)</label>
                      <input  type="range"  id="l" name="l" min="0" max="100" value="50" >
                      <output id="output_l">0</output>
                  </p>

                  <p>
                      <label for="a">Alpha Transparenz </label>
                      <input  type="range" id="a" name="a" min="0" max="100" value="100" step="10" >
                      <output id="output_a">1</output>
                  </p>

                  <p>
                     <label for="color">HSLA</label>
                     <output id="hsla">0</output>
                  </p>
                  <p>
                     <label>RGBA</label>
                     <output id="rgba">0</output>
                  </p>
                </form>
            </fieldset>
        </div>
    </div>
        <div class="yui3-u-1-2">
            <div class="content">
                <canvas id="output"> </canvas>
            </div>
      ...

CSS

body {
    font-family: verdana, sans-serif;
    margin: auto; /* center in viewport */
    width: 960px;
}


fieldset, canvas{
    width:100%;
    border:1px hsla(337, 0%, 50%, 1) solid;

}

.content{
    padding:1em;
    margin:1em;
}

legend{
    margin-left:1em;
}

canvas{
    min-height:243px;

}


label{
    display:inline-block;
    width:13em;
    text-align:right;
    font-size:108%;
    vertical-align: top;
    line-height:153.9%;
    font-weight:bold;  
}

label:after { 
    content: ':'; 
}

output{
    font-size:108%;
    vertical-align: top;
    line-height:153.9%; 

}

input{
    width:14em;
    display:inline-block;
}

.hidden{
    display:none;
}

JavaScript

"use strict";

var form = document.getElementById('colorpicker'),
    l = document.getElementById('output_l'),
    s = document.getElementById('output_s'),
    h = document.getElementById('output_h'),
    a = document.getElementById('output_a'),
    hsla = document.getElementById('hsla'),
    rgba = document.getElementById('rgba'),
    canvas = document.getElementById('output');

// image Slider
var image_slider = document.getElementById('image_slider'),
    output_image_slider = document.getElementById('output_image_slider'),
    hsl_image = document.getElementById('hsl_image');

form.oninput = function() {

    var i = this.length,
        values = [],
        value = 0;



    while (i--) {
        if (this[i].type === "range") {

            // get the value from the range element. 
            value = this[i].value;

            switch (this[i].name) {
            case "a":
                values.push(value / 100);
                a.value = value / 100;
                break;
            case "h":
                values.push(value);
                h.value = value + "°";
                break;
            case "s":
                values.push(value + "%");
                s.value = value + "%";
                break;
            case "l":
                values.push(value + "%");
                l.value = value + "%";
                break;
            }
        }
    }

    hsla.value = 'hsla(' + values.reverse().join(', ') + ')';
    canvas.style.backgroundColor = hsla.value;
    console.log(hsla.value);
    rgba.value = canvas.style.backgroundColor;


};

form.oninput();


image_slider.addEventListener("change", function() {

    console.log(this.value);


    hsl_image.style.width = this.value + 'px';
    output_image_slider.value = "Das oben gezeigte Bild hat eine Breite von: " + this.value + 'px ';

}, false);