<html>

<body>
  <input type="color" id="color" value="#ffffff" /> <button id="random">Random</button>
  <div id="result">
    Hello World!<br />
    <span>Hello Small World.</span>
  </div>
  <dl><dt>Background color</td><dd><input id="bg" readonly /></td>
  <dt>Text color</td><dd> <input id="fg" readonly /></dd></dl>
</body>
</html>
#result {
  height: 200px;
  width: 100%;
  font-size: 50px;
  text-align: center;
  padding: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}

#result span {
  font-size: small;
}

function niceColor(clr) {
	let hsl = rgb2hsl(clr);
  hsl[0] = (hsl[0]+0.5) % 1;
  hsl[1] = (hsl[1]+0.5) % 1;
  hsl[2] = (hsl[2]+0.5) % 1;
  return 'hsl('+(hsl[0]*360)+','+(hsl[1]*100)+'%,'+(hsl[2]*100)+'%)';
}

document.getElementById('color').onchange = function() {
	let res = document.getElementById('result');
  res.style.backgroundColor = this.value;
  res.style.color = niceColor(res.style.backgroundColor);
  document.getElementById('bg').value = res.style.backgroundColor;
  document.getElementById('fg').value = res.style.color;
};
document.getElementById('color').onchange();

document.getElementById('random').onclick = function() {
	let color = document.getElementById('color');
  color.value = randomHex();
  color.onchange();
};

// random borrowed from https://codepen.io/rhymes/pen/VXJabv
function randomColorVal() {
    // Should be 0 to 255 inclusive
    return Math.floor((Math.random() * 256));
}
function toHex(intVal) {
    let hex = intVal.toString(16);
    if (hex.length === 1){
      hex = '0' + hex;
    }
    return hex;
}
function hexFromInts(r, g, b){
    return '#' + toHex(r) + toHex(g) + toHex(b);
}
function randomHex() {
    let r = randomColorVal();
    let g = randomColorVal();
    let b = randomColorVal();
    return hexFromInts(r, g, b);
}

function rgb2hsl(clr) {
	let rgb = clr.substring(4, clr.length-1).replace(/ /g, '').split(',');
  return rgbToHsl(rgb[0],rgb[1],rgb[2]);
}

// https://gist.github.com/mjackson/5311256
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;

  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }

    h /= 6;
  }

  return [ h, s, l ];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.