OKLCH ↔ HSV Color Converter

// OKLCH to HSV Conversion Implementation
function oklchToHsv(oklch) {
  const { l, c, h } = oklch;

  // Step 1: OKLCH to RGB conversion
  const rgb = oklchToRgb({ l, c, h });

  // Step 2: RGB to HSV conversion
  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 delta = max - min;

  // Calculate HSV values
  const v = max; // Value is the maximum RGB component
  const s = max === 0 ? 0 : delta / max; // Saturation

  let hue = 0;
  if (delta !== 0) {
    switch (max) {
      case r: hue = ((g - b) / delta) % 6; break;
      case g: hue = (b - r) / delta + 2; break;
      case b: hue = (r - g) / delta + 4; break;
    }
    hue = Math.round(hue * 60);
    if (hue < 0) hue += 360;
  }

  return {
    h: hue,
    s: Math.round(s * 100),
    v: Math.round(v * 100)
  };
}

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

  // Step 1: HSV to RGB conversion
  const rgb = hsvToRgb({ h, s, v });

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

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

// Color picker integration example
function createColorPicker(oklchColor) {
  const hsv = oklchToHsv(oklchColor);

  // Use HSV for intuitive UI controls
  const hueSlider = hsv.h;      // 0-360° for hue wheel
  const saturationSlider = hsv.s; // 0-100% for saturation
  const valueSlider = hsv.v;    // 0-100% for brightness

  return { hueSlider, saturationSlider, valueSlider };
}