Color Clock v1.2

HEX Digits change accurately as the color fades smoothly.

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",
    div12 = 255 / 12,
    div60 = 255 / 60;

function getTheTime (e) {
	var dt = new Date(),
	    hr = dt.getHours(),
        mn = dt.getMinutes(),
        se = dt.getSeconds();

    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;

    animateColor(divChange, newColor);

    setTimeout(getTheTime,1000);
}

function changeColor (e) {
	var colorValue = $(divChange).css("backgroundColor");
        
    $('.hex').text(rgb2hex(colorValue));

    setTimeout(changeColor,1);
}

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

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

changeColor();
getTheTime();