Color Clock v1

Color based on Hour, Minutes, and Seconds.

by Robert Herring

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div class="text"><span class="1">00</span> : <span class="2">00</span> : <span class="3">00</span></div>
<div class="hex">#000000</div>

CSS

* {
    margin:0;
    padding:0;
}
.text {
    margin:0;
    padding:50px;
    display:block;
    background:#000000;
    color:#FFFFFF;
    font-size:4em;
    text-align:center;
}
.hex {
    margin:-25px 0 0 10px;
    color:#ffffff;
    text-transform: uppercase;
}

JavaScript

var newColor = "#000000",
    divChange = ".text";

function colorChange () {
    var dt = new Date(),
        hr = dt.getHours(),
        mn = dt.getMinutes(),
        se = dt.getSeconds(),
        div12 = 255 / 12,
        div60 = 255 / 60;
    
    if (hr > 12 ){
        hr = hr - 12;
    }
    hr = ((hr = +hr) < 10 ? "0" : "") + hr;
    mn = ((mn = +mn) < 10 ? "0" : "") + mn;
    se = ((se = +se) < 10 ? "0" : "") + se;
    
    $('.text .1').text(hr);
    $('.text .2').text(mn);
    $('.text .3').text(se);
    
    hr = hr * div12;
    mn = mn * div60;
    se = se * div60;
    
    hr = parseInt(hr).toString(16).slice(-2);
    mn = parseInt(mn).toString(16).slice(-2);
    se = parseInt(se).toString(16).slice(-2);
    
    if (hr.length < 2) {
        hr = "0" + hr;
    }
    if (mn.length < 2) {
        mn = "0" + mn;
    }
    if (se.length < 2) {
        se = "0" + se;
    }
    
    newColor = hr + mn + se;
    
    $('.hex').text("#" + newColor);
    
    animateColor(divChange, newColor);
    
    setTimeout(colorChange,100);
}

function animateColor (div, i) {
    $(div).animate({ backgroundColor: "#"+ i}, 50);
}

colorChange();