JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

JavaScript

function hexToRgb(hex){
	hex = hex.toLowerCase().replace(/[^0-9a-f]/gi, '');
  if(hex.length === 3){
  	hex = hex.replace(/([0-9a-f])/g, '$1$1');
  }
  var rgb = hex.match(/[0-9a-f]{2}/g);
  var r = parseInt(rgb[0], 16),
  		g = parseInt(rgb[1], 16),
  		b = parseInt(rgb[2], 16);
  return [r, g, b];
}

function rgbToHsl(r, g, b){
  r /= 255, g /= 255, b /= 255; // Get scales 0 - 1
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2; // Average levels for lightness

  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 * 360,
    s * 100 + '%',
    l * 100 + '%'
  ];
}

function hexToHsl(hex){
	return rgbToHsl.apply(this, hexToRgb(hex));
}

var hex = '#ffcc00';
console.log(hex, hexToRgb(hex), hexToHsl(hex));
//document.body.style.backgroundColor = hex;
//document.body.style.backgroundColor = 'rgba(' + hexToRgb(hex).join(', ') + ', 1)';
//document.body.style.backgroundColor = 'hsla(' + hexToHsl('#ffcc00').join(', ') + ', 1.0)';