Color Tester

by ginpei

HTML

<h1>Color Tester</h1>
<div id="colors">
    <span class="color">#32c8ef</span>
    <span class="color">#3ce</span>
    <span class="color">rgb(50, 200, 239)</span>
    <span class="color">rgb(20%, 78%, 94%)</span>
    <span class="color">rgba(50, 200, 239, 0.8)</span>
    <span class="color">rgba(20%, 78%, 94%, 0.8)</span>
    <span class="color">hsl(192, 86%, 57%)</span>
    <span class="color">hsla(192, 86%, 57%, 0.8)</span>
    <span class="color">red</span>
    <span class="color">green</span>
    <span class="color">transparent</span>
    <span class="color">currentColor</span>
    <span class="color">ActiveBorder</span>
    <span class="color">Highlight</span>
    <span class="color">Menu</span>
    <span class="color">WindowText</span>
</div>

CSS

#colors {
    font-size: 0;
}
.color {
    color: #666;
    display: inline-block;
    font-size: 10px;
    height: 92px;
    line-height: 92px;
    margin: 1px;
    padding: 4px;
    text-align: center;
    text-shadow:
        -1px -1px 0 #fff,
         1px -1px 0 #fff,
         1px  1px 0 #fff,
        -1px  1px 0 #fff;
    overflow: hidden;
    vertical-align: middle;
    width: 100px;
    white-space: nowrap;
}

JavaScript

(function() {
    var colorNodes = document.getElementById('colors').children;
    for (var i=0, l=colorNodes.length; i<l; i++) {
        var nColor = colorNodes[i];
        var color = nColor.innerText;
        nColor.style.backgroundColor = color;
    }
    
    return;
    
    var colors = [
        '#32c8ef',
        '#3ce',
        'rgb(50, 200, 239)',
        'rgb(20%, 78%, 94%)',
        'rgba(50, 200, 239, 0.8)',
        'rgba(20%, 78%, 94%, 0.8)',
        'hsl(192, 86%, 57%)',
        'hsla(192, 86%, 57%, 0.8)',
    ];
    
    var nList = document.getElementById('colors');
    
    var nTemplate = document.createElement('span');
    nTemplate.classList.add('color');
    
    for (var i=0, l=colors.length; i<l; i++) {
        var color = colors[i];
        var nColor = nTemplate.clone();
        nColor.style.backgroundColor = color;
        nColor.innerText = color;
        nList.appendChild(nColor);
    }
})();