window.onload = function() {
  var ex1 = document.getElementById("ex1");
  var ex2 = document.getElementById("ex2");
  
  document.getElementById("step1").onclick = function() {
    var c = Color("#dda0dd");
    ex1.style.backgroundColor = c.rgb();
  };
  
  document.getElementById("step2").onclick = function() {
    ex1.style.backgroundColor = Color(ex1.style.backgroundColor).setSaturation(60).rgb();
  };
  
  document.getElementById("step3").onclick = function() {
    var c = Color(ex1.style.backgroundColor);
    c.red = c.red - 50;
    ex1.style.backgroundColor = c.rgb();
  };
  
  document.getElementById("step4").onclick = function() {
    ex2.style.backgroundColor = Color(ex1.style.backgroundColor).getComplement().rgb();
  };
  
  document.getElementById("step5").onclick = function() {
    (function fade() {
      var c = Color(ex2.style.backgroundColor);
      var v = c.getValue();
      if (v == 0) {return;} else {
        ex2.style.backgroundColor = c.setValue(v - 1).rgb();
        setTimeout(fade, 100);
      }
    })();
  };
};