JSFiddle - React, Tailwind, and code Playground
JavaScript
function hslToRgb(hue, sat, light) {
hue = hue % 360;
if (hue < 0) {
hue += 360;
}
sat /= 100;
light /= 100;
function f(n) {
let k = (n + hue/30) % 12;
let a = sat * Math.min(light, 1 - light);
return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
}
return [f(0), f(8), f(4)];
}
function rgbToHsl (red, green, blue) {
let max = Math.max(red, green, blue);
let min = Math.min(red, green, blue);
let [hue, sat, light] = [NaN, 0, (min + max)/2];
let d = max - min;
if (d !== 0) {
sat = (light === 0 || light === 1)
? 0
: (max - light) / Math.min(light, 1 - light);
switch (max) {
case red: hue = (green - blue) / d + (green < blue ? 6 : 0); break;
case green: hue = (blue - red) / d + 2; break;
case blue: hue = (red - green) / d + 4;
}
hue = hue * 60;
}
return [hue, sat * 100, light * 100];
}
const displayp3RedInSrgb = [1.09306, -0.226721, -0.150111];
const hsldisplayp3red = rgbToHsl(displayp3RedInSrgb[0], displayp3RedInSrgb[1], displayp3RedInSrgb[2]);
const roundtripsrgb = hslToRgb(hsldisplayp3red[0], hsldisplayp3red[1], hsldisplayp3red[2]);
console.log( displayp3RedInSrgb );
console.log( hsldisplayp3red );
console.log( roundtripsrgb );