OKLCH ↔ HSL Color Converter

Convert between OKLCH and HSL color spaces with real-time preview

OKLCH Color

#0000ff

HSL Color

#0000ff

JavaScript Implementation

// 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 }