当前位置：首页 > JavaScript

js实现hsv

2026-04-05 20:47:16JavaScript

HSV颜色模型简介

HSV（Hue-Saturation-Value）是一种基于颜色直观特性的颜色空间模型，常用于颜色选择和图像处理。H代表色相（0-360°），S代表饱和度（0-100%），V代表明度（0-100%）。

RGB转HSV算法

以下JavaScript函数可将RGB值（范围0-255）转换为HSV值（范围H:0-360, S/V:0-100）：

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;
  } 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, s * 100, v * 100];
}

HSV转RGB算法

将HSV值转换回RGB的JavaScript实现：

function hsvToRgb(h, s, v) {
  s /= 100, v /= 100;
  const c = v * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = v - c;
  let r, g, b;

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

  return [
    Math.round((r + m) * 255),
    Math.round((g + m) * 255),
    Math.round((b + m) * 255)
  ];
}

颜色选择器实现示例

基于HSV模型的简易颜色选择器实现：

// 创建HSV色轮
function createColorWheel(canvas, size) {
  const ctx = canvas.getContext('2d');
  canvas.width = canvas.height = size;
  const center = size / 2;
  const radius = center - 10;

  for (let angle = 0; angle < 360; angle++) {
    for (let r = 0; r < radius; r++) {
      const x = center + r * Math.cos(angle * Math.PI / 180);
      const y = center + r * Math.sin(angle * Math.PI / 180);
      const sat = r / radius * 100;
      const [red, green, blue] = hsvToRgb(angle, sat, 100);
      ctx.fillStyle = `rgb(${red},${green},${blue})`;
      ctx.fillRect(x, y, 1, 1);
    }
  }
}