A Pen by Jerry Reptak.

htIzd.markdown

htIzd

A Pen by Jerry Reptak on CodePen.

License.

index.html

<div id="bg"></div>
<div id="info" class="abs-cent">
	<span id="time"></span>
	<span id="hsl"></span>
</div

script.js

var hue, sat, light,
    hour, min, sec,
    bgEl = document.getElementById('bg'),
    timeEl = document.getElementById('time'),
    hslEl = document.getElementById('hsl');

function updateTime(hour, min, sec) {
  timeEl.innerHTML = "" + hour + ":" + min + ":" 
                        + (sec < 10 ? "0"+sec : sec);
}

function updateHSL(h, s, l) {
  hslEl.innerHTML  = "" + h + " " + s + "% " + l + "%";
}
  
function setHSL(h, s, l) {
	bgEl.style.backgroundColor = "hsl(" + h + "," + s + "%," + l + "%)";
  
  updateHSL(h,s,l);
}

function getHue(second) {
  
}
function getSat(minute) {
  
}
function getLight(hour) {
  // Light should be based on light outside
  // Can use API for this later
  var sunrise = 6,
      sunset = 21;
  
  if (hour <= 6 || hour >= 21) {
    return 0;
  }
  
  var len = sunset - sunrise,
      peak = sunrise + (len/2);
  
  return Math.abs(peak - hour) / (len/2);



window.setInterval(function() {
  var date = new Date();
  
  hour = date.getHours();
  min = date.getMinutes();
  sec = date.getSeconds();
  
  hue = getHue(sec);
  sat = getSat(min);
  light = getLight(hour);
  
  setHSL(hue, sat, light);
  updateTime(hour, min, sec);
 
}, 1000);

style.css

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

#bg {
  width: 100%;
  height: 100%;
  background-color: hsl(330, 40%, 40%);
}

.abs-cent {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

}

#info {
  width: 400px;
  height: 300px;
}

#info span {
  display: block;
  font-size: 32px;
}

#time {

}

#hsl {

}