Convert between OKLCH and HSL color spaces with real-time preview
#0000ff
#0000ff
// OKLCH to HSL conversion function
function oklchToHsl(oklch) {
const { l, c, h } = oklch;
// Step 1: Convert OKLCH to RGB first
const rgb = oklchToRgb(oklch);
// Step 2: Convert RGB to HSL
const r = rgb.r / 255;
const g = rgb.g / 255;
const b = rgb.b / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const diff = max - min;
// Calculate lightness
const lightness = (max + min) / 2;
// Calculate saturation
let saturation = 0;
if (diff !== 0) {
saturation = lightness > 0.5
? diff / (2 - max - min)
: diff / (max + min);
}
// Calculate hue
let hue = 0;
if (diff !== 0) {
switch (max) {
case r: hue = ((g - b) / diff) % 6; break;
case g: hue = (b - r) / diff + 2; break;
case b: hue = (r - g) / diff + 4; break;
}
hue = Math.round(hue * 60);
if (hue < 0) hue += 360;
}
return {
h: hue,
s: Math.round(saturation * 100),
l: Math.round(lightness * 100)
};
}
// Example usage
const oklchColor = { l: 0.628, c: 0.258, h: 29.23 };
const hslColor = oklchToHsl(oklchColor);
console.log(hslColor); // { h: 0, s: 100, l: 50 }