Convert between HSV and OKLCH color spaces with real-time preview
HEX Color
#000080
hsl(240, 100%, 25%)
oklch(0.452 0.313 264)
hsv(240, 100%, 50%)
// HSV to OKLCH Conversion Implementation
function hsvToOklch(hsv) {
const { h, s, v } = hsv;
// Step 1: HSV to RGB conversion
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 conversion
return rgbToOklch(rgb);
}
// 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
return rgbToHsv(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 };
}