JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<label>
Pick a color:
<br>
<input id="inp" type="color" value="#00b0ef">
</label>
<br>
<br>
<br>
<button id="btn">Some Text</button>

CSS

button {
  border: none;
  border-radius: 5px;
  background: gray;
  padding: 10px 15px;
  outline: none;
  font-weight: 600;
}

JavaScript

var input = document.querySelector('#inp'),
		button = document.querySelector('#btn');


function hexToHSL(H, lighten) {
  var ln;

  if(typeof lighten === 'number'){
    toRange(lighten, 0, 100).toFixed(1);
  }

  // Convert hex to RGB first
  let r = 0, g = 0, b = 0;
  if (H.length == 4) {
    r = "0x" + H[1] + H[1];
    g = "0x" + H[2] + H[2];
    b = "0x" + H[3] + H[3];
  } else if (H.length == 7) {
    r = "0x" + H[1] + H[2];
    g = "0x" + H[3] + H[4];
    b = "0x" + H[5] + H[6];
  }
  // Then to HSL
  r /= 255;
  g /= 255;
  b /= 255;
  let cmin = Math.min(r,g,b),
      cmax = Math.max(r,g,b),
      delta = cmax - cmin,
      h = 0,
      s = 0,
      l = 0;

  if (delta == 0)
    h = 0;
  else if (cmax == r)
    h = ((g - b) / delta) % 6;
  else if (cmax == g)
    h = (b - r) / delta + 2;
  else
    h = (r - g) / delta + 4;

  h = Math.round(h * 60);

  if (h < 0)
    h += 360;

  l = (cmax + cmin) / 2;
  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
  s = +(s * 100).toFixed(1);
  l = +(l*100).toFixed(1);
	console.log((typeof lighteen));
  if(typeof lighten === 'function'){
    ln = lighten(l);
  }

  if(ln){
    l = ln;
  }

  return "hsl(" + h + "," + s + "%," + l + "%)";
}


function lighteenFn(colorLighteen){
/*   return colorLighteen >= 80 ? 70 : 95; */
	return 95;
}

function textLighteenFn(colorLighteen){
  return Math.min(30, colorLighteen);
}

function handleInputColor(){
	var color = input.value,
  		textColor =  hexToHSL(color, textLighteenFn),
  		backgroundColor = hexToHSL(color, lighteenFn);
  console.log('handleInputColor', color, textColor, backgroundColor);
  button.style.color = textColor;
  button.style.backgroundColor = backgroundColor;
}


input.onchange = handleInputColor;

handleInputColor();