当前位置：首页 > JavaScript

js实现hsv

2026-03-14 02:39:52JavaScript

HSV 颜色模型简介

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

js实现hsv

RGB 转 HSV 的 JavaScript 实现

以下代码将RGB值（范围0-255）转换为HSV值（H范围0-360，S和V范围0-1）：

js实现hsv

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: h, s: s, v: v };
}

HSV 转 RGB 的 JavaScript 实现

以下代码将HSV值转换回RGB值（范围0-255）：

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 - f * s);
    const t = v * (1 - (1 - f) * s);

    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, 100, 50);
console.log(hsv); // 输出类似 { h: 15, s: 0.8, v: 1 }

// HSV转RGB示例
const rgb = hsvToRgb(15, 0.8, 1);
console.log(rgb); // 输出类似 { r: 255, g: 100, b: 50 }