JSFiddle - React, Tailwind, and code Playground
HTML
<div id="one">
rgb(250,206,33)
</div>
<div id="two">
rgb(250,206,33)
</div>
CSS
div {
height:100px; width: 100px;
}
JavaScript
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 + 0)*60; break;
case g: h = ((b - r) / d + 2)*60; break;
case b: h = ((r - g) / d + 4)*60; break;
}
}
return [h, s, l];
}
function returnUsableColor(hsl) {
var str = '';
str += Math.round(hsl[0]) + ",";
str += Math.round(hsl[1]*100) + "%,";
str += Math.round(hsl[2]*100) + "%";
return str;
}
$('#one').css('background-color', 'rgb(250,206,33)')
var convertRgbToHsl = returnUsableColor(rgbToHsl(250,206,33));
$('#two').css('background-color', 'hsl('+ convertRgbToHsl +')').text(convertRgbToHsl);