Input type="color"

by jorgeluis

HTML

<div class="swatch-card">
    <div class="swatch">
        <input type="color" value="#cc3366">
    </div>
    <label for="text-color">Color</label>
</div>
    
    
<div class="swatch-card">
    <div class="swatch">
        <input type="color" value="#dd0000">
    </div>
    <label for="text-color">Color</label>
</div>

CSS

body {
    background-color: #ddd;
}
input[type="color"] {
    opacity: 0;
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border: none;
}
.swatch-card {
    float: left;
    padding: 4px;
    margin: 4px;
    background-color: #fff;
    color: #666;
    text-align: center;
    font: normal 12px/1 sans-serif;
}

JavaScript

var swatches = document.querySelectorAll('.swatch');
Array.prototype.forEach.call(swatches, function(swatch, i){
	var inp = swatch.querySelectorAll('input')[0];
    swatch.style.backgroundColor = inp.value;
    inp.onchange = function() {
        swatch.style.backgroundColor = inp.value;
    }
});