js实现hsv

HSV 颜色模型简介

HSV（Hue-Saturation-Value）是一种颜色空间模型，通过色相（Hue）、饱和度（Saturation）和明度（Value）描述颜色。相比RGB，HSV更贴近人类对颜色的直观感知。

RGB 转 HSV 的 JavaScript 实现

以下是将RGB值（范围0-255）转换为HSV值（H: 0-360°, S/V: 0-1）的函数：

function rgbToHsv(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, v = max;
  const d = max - min;
  s = max === 0 ? 0 : d / max;

  if (max === min) {
    h = 0; // achromatic
  } else {
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h *= 60;
  }
  return { h: h, s: s, v: v };
}

HSV 转 RGB 的 JavaScript 实现

以下是将HSV值转换回RGB值的函数：

function hsvToRgb(h, s, v) {
  let r, g, b;
  const i = Math.floor(h / 60);
  const f = h / 60 - i;
  const p = v * (1 - s);
  const q = v * (1 - s * f);
  const t = v * (1 - s * (1 - f));

  switch (i % 6) {
    case 0: r = v, g = t, b = p; break;
    case 1: r = q, g = v, b = p; break;
    case 2: r = p, g = v, b = t; break;
    case 3: r = p, g = q, b = v; break;
    case 4: r = t, g = p, b = v; break;
    case 5: r = v, g = p, b = q; break;
  }
  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}

使用示例

// RGB转HSV
const hsv = rgbToHsv(255, 0, 0); // 返回 { h: 0, s: 1, v: 1 }

// HSV转RGB
const rgb = hsvToRgb(0, 1, 1); // 返回 { r: 255, g: 0, b: 0 }

应用场景

HSV模型常用于颜色选择器、图像处理算法、数据可视化等领域。通过调整饱和度或明度，可以轻松实现颜色变暗、去色等效果。