Color Clock

This is my quick stab at making a "color clock". Seems to be buggy with the colors. Edit: Fixed color bug Edit: Added radial background

by Braden Best

HTML

<div id="bg">
    <div id="face"></div>
</div>
<div class="darken"></div>

CSS

html,body{
    height:100%;
    padding:0;
    margin:0;
}

#bg{
    width:100%;
    height:100%;
    text-align:center;
}
#face{
    color:#ccccee;
    text-shadow:0px 0px 2px #000;
    font:14px arial;
    vertical-align:middle;
    position:absolute;
}
hr{
    background:#ccccee;
    border:none;
    box-shadow:0px 0px 2px #000;
    margin:10px;
    padding:1px;
}
.darken{
    position:absolute;
    left:0;
    top:0;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    background: -webkit-radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.6));
    background: -moz-radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.6));
    cursor:default;
}

JavaScript

function getTime(){
    var d = new Date();
    return [d.getHours(), d.getMinutes(), d.getSeconds()];
}

function getColor(){
    var time = getTime();
    var h = parseInt(time[0] * (0xff/24)).toString(16),
        m = parseInt(time[1] * (0xff/60)).toString(16),
        s = parseInt(time[2] * (0xff/60)).toString(16);
    return (p16(h) + p16(m) + p16(s)).toUpperCase();
}

function p10(n){// apply zero-padding if n < 10
    return n < 10 ? ('0' + n) : n;
};

function p16(n){ // p10() for hexadecimal (part of a bugfix)
    return (parseInt(n,16) < 16 ? ('0' + n) : n).toString(16);
};

(function loop(){
    var t = getTime(),
        time = [p10(t[0]),p10(t[1]),p10(t[2])],
        color = getColor();
    face.innerHTML = time.join(' : ') + '<hr>' + color;
    face.style.fontSize = (window.innerHeight / 6) + 'px';
    face.style.top = ((window.innerHeight / 2) - (face.clientHeight / 2))+'px';
    face.style.left = ((window.innerWidth / 2) - (face.clientWidth / 2))+'px';
    bg.style.backgroundColor = '#' + color;
    setTimeout(loop,1000);
})();