(function( window, document, undefined ) {
  'use strict';

  var hslEl = document.createElement( 'div' );
  hslEl.classList.add( 'hsl' );
  document.body.appendChild( hslEl );

  window.addEventListener( 'mousemove', function( event ) {
    var x = event.pageX,
        y = event.pageY;

    var h = x / window.innerWidth * 360,
        s = ( window.innerHeight - y ) / window.innerHeight * 100,
        l = 50;

    var hsl = 'hsl(' +
      Math.round( h ) + ', ' +
      Math.round( s ) + '%, ' +
      Math.round( l ) + '%)';

    document.body.style.backgroundColor = hsl;
    hslEl.textContent = hsl;
  });
}) ( window, document );

@@ -53,16 +53,111 @@
 rict';%0A%0A
+  function clamp( value, min, max ) %7B%0A    return Math.min( Math.max( value, min ), max );%0A  %7D%0A%0A
   var hs
@@ -266,16 +266,278 @@
 lEl );%0A%0A
+  var h = 0,%0A      s = 50,%0A      l = 50;%0A%0A  function update() %7B%0A    var hsl = 'hsl(' +%0A      Math.round( h ) + ', ' +%0A      Math.round( s ) + '%25, ' +%0A      Math.round( l ) + '%25)';%0A%0A    document.body.style.backgroundColor = hsl;%0A    hslEl.textContent = hsl;%0A  %7D%0A%0A
   window
@@ -643,20 +643,16 @@
 Y;%0A%0A    
-var 
 h = x / 
@@ -674,26 +674,22 @@
 th * 360
-,%0A  
+;%0A
     
-  
 s = ( wi
@@ -741,223 +741,189 @@
  100
-,
+;%0A
 %0A    
-    l = 50;%0A%0A    var hsl = 'hsl(' +%0A      Math.round( h ) + ', ' +%0A      Math.round( s ) + '%25, ' +%0A      Math.round( l ) + '%25)';%0A%0A    document.body.style.backgroundColor = hsl;%0A    hslEl.textContent = hsl
+update();%0A  %7D);%0A%0A  window.addEventListener( 'wheel', function( event ) %7B%0A    event.preventDefault();%0A    l = clamp( l - event.deltaY, 0, 100 );%0A    update();%0A  %7D)
 ;%0A
+%0A
   
-%7D
+update(
 );%0A%7D

Use mouse wheel to control HSL lightness.