当前位置：首页 > JavaScript

js色相实现

2026-04-05 21:26:49JavaScript

色相（Hue）的基本概念

色相是色彩的基本属性之一，指颜色的种类（如红、绿、蓝等），通常用角度表示（0°~360°）。在CSS和JavaScript中，色相常用于HSL（Hue, Saturation, Lightness）或HSV（Hue, Saturation, Value）颜色模型。

js色相实现

在JavaScript中操作色相

使用HSL颜色模型

HSL颜色格式为 hsl(hue, saturation%, lightness%)，其中色相值为0~360的数值：

js色相实现

// 设置一个红色的HSL值（色相0°）
const redHsl = 'hsl(0, 100%, 50%)';

// 动态修改色相（例如调整为蓝色）
const blueHsl = `hsl(240, 100%, 50%)`;

通过RGB转换色相

若需从RGB中提取或修改色相，需先将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];
}

修改色相并转回RGB

function hslToRgb(h, s, l) {
    s /= 100, l /= 100;
    const k = n => (n + h / 30) % 12;
    const a = s * Math.min(l, 1 - l);
    const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
    return [255 * f(0), 255 * f(8), 255 * f(4)];
}

实际应用示例

动态调整DOM元素的色相

const element = document.getElementById('target');
element.style.backgroundColor = `hsl(${currentHue}, 100%, 50%)`;

// 每隔100毫秒增加色相值（颜色渐变效果）
setInterval(() => {
    currentHue = (currentHue + 1) % 360;
    element.style.backgroundColor = `hsl(${currentHue}, 100%, 50%)`;
}, 100);

使用Canvas绘制色相环

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const radius = 100;

for (let angle = 0; angle < 360; angle++) {
    const x = radius * Math.cos(angle * Math.PI / 180);
    const y = radius * Math.sin(angle * Math.PI / 180);
    ctx.fillStyle = `hsl(${angle}, 100%, 50%)`;
    ctx.fillRect(x + radius, y + radius, 5, 5);
}
document.body.appendChild(canvas);