<p>Change the hue!</p>

<input type='range' min='0' max='1000'>

html {
  --hue: 150; /* change me! */
}

body {
	background-color: hsl(var(--hue), 100%, 50%);
}



















































































body {
	padding: 30px;
}

var html = document.querySelector('html');
var colorPicker = document.querySelector('input');

function updateHue(input) {
	console.clear();
	console.log(input);
	html.style.setProperty('--hue', this.value);
	// 'this' refers to the input in this case
}

colorPicker.addEventListener('input', updateHue);























































































/* just to show some color contrast */
var dark = document.createElement('div');
dark.classList.add('circle');
dark.style.width = '100px';
dark.style.height = '100px';
dark.style.backgroundColor = 'rgba(0,0,0,.3)';
dark.style.borderRadius = "50%";
dark.style.position = "fixed";
dark.style.bottom = "100px";
dark.style.pointerEvents = 'none';
dark.style.right = "40px";
document.body.appendChild(dark);

var light = document.createElement('div');
light.classList.add('circle');
light.style.width = '200px';
light.style.height = '200px';
light.style.backgroundColor = 'rgba(255,255,255,.5)';
light.style.borderRadius = "50%";
light.style.position = "fixed";
light.style.bottom = "-20px";
light.style.right = "100px";
light.style.pointerEvents = 'none';
document.body.appendChild(light);

// 100% serious ^ this is the most document.createElement type code I've written in my entire career... in one sitting...  - @sheriffderek
// this is not likely to be how you create DOM

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.