HSV to OKLCH Color Converter

JavaScript Implementation

// HSV to OKLCH conversion function
function hsvToOklch(hsv) {
  const { h, s, v } = hsv;

  // Step 1: HSV to RGB
  const sNorm = s / 100;
  const vNorm = v / 100;

  const c = vNorm * sNorm;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = vNorm - c;

  let r, g, b;
  if (h >= 0 && h < 60) {
    [r, g, b] = [c, x, 0];
  } else if (h >= 60 && h < 120) {
    [r, g, b] = [x, c, 0];
  } else if (h >= 120 && h < 180) {
    [r, g, b] = [0, c, x];
  } else if (h >= 180 && h < 240) {
    [r, g, b] = [0, x, c];
  } else if (h >= 240 && h < 300) {
    [r, g, b] = [x, 0, c];
  } else {
    [r, g, b] = [c, 0, x];
  }

  const rgb = {
    r: Math.round((r + m) * 255),
    g: Math.round((g + m) * 255),
    b: Math.round((b + m) * 255)
  };

  // Step 2: RGB to OKLCH
  return rgbToOklch(rgb);
}

// Example usage
const hsvColor = { h: 240, s: 100, v: 50 };
const oklchColor = hsvToOklch(hsvColor);
console.log(oklchColor); // { l: 0.452, c: 0.313, h: 264 }

// Color picker upgrade example
function upgradeColorPicker(hsvColor) {
  const oklch = hsvToOklch(hsvColor);

  // Use OKLCH for perceptually uniform adjustments
  const lightnessControl = oklch.l;  // 0-1 for lightness
  const chromaControl = oklch.c;     // 0-0.4 for chroma
  const hueControl = oklch.h;        // 0-360° for hue

  return { lightnessControl, chromaControl, hueControl };
}