js色相实现

色相（Hue）的基本概念

色相是色彩的基本属性之一，表示颜色的类型（如红、黄、蓝）。在JavaScript中，通常通过HSL（Hue, Saturation, Lightness）或HSV（Hue, Saturation, Value）颜色模型来操作色相值，范围一般为0-360度。

通过HSL调整色相

使用CSS或Canvas时，可以直接使用HSL格式定义颜色。例如：

// 设置HSL颜色（色相=120，饱和度=100%，亮度=50%）
const color = 'hsl(120, 100%, 50%)';

动态修改色相值

通过JavaScript动态计算色相变化，例如实现渐变动画：

let hue = 0;
function animateHue() {
  hue = (hue + 1) % 360;
  document.body.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
  requestAnimationFrame(animateHue);
}
animateHue();

RGB与HSL的转换

若需要从RGB转换到HSL以修改色相，可使用以下公式：

function rgbToHsl(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, l = (max + min) / 2;

  if (max === min) {
    h = s = 0; // 灰度
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    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, l * 100];
}

使用第三方库

对于复杂操作，可使用chroma.js或tinycolor等库简化色相处理：

// 使用chroma.js调整色相
const chroma = require('chroma-js');
const color = chroma('red').set('hsl.h', 180).hex();

注意事项

• 色相值超过360时会自动环绕（如361度等同于1度）。
• 在HSV/HSL中，饱和度为0时色相无效（表现为灰度）。