颜色空间转换是将颜色从一种三维坐标系统映射到另一种的数学过程，涉及RGB、HSL和LAB等模型间的公式变换；其中RGB与HSL转换较直观，而LAB需通过XYZ作为中介，包含非线性运算和参考白点校正，广泛应用于色彩管理与图像处理。
颜色空间转换，比如RGB、HSL和LAB之间的数学转换，本质上就是一套将颜色从一种三维坐标系统映射到另一种三维坐标系统的公式集合。这不仅仅是简单的数值替换，它背后是不同颜色模型对颜色感知和表示方式的理解差异。在JavaScript中实现这些转换，我们需要精确地应用这些公式，处理好浮点数精度，才能确保颜色的准确性和一致性。这常常比想象中要复杂一点，因为每种颜色空间都有其独特的数学几何结构。
要实现RGB、HSL与LAB之间的颜色空间转换，我们需要掌握它们各自的数学公式。这其中，RGB和HSL之间的转换相对直观，而LAB则通常需要通过XYZ颜色空间作为中间桥梁，过程会复杂一些，涉及非线性变换和参考白点。
1. RGB 到 HSL 的转换
RGB (Red, Green, Blue) 是加色模型，常用于屏幕显示。HSL (Hue, Saturation, Lightness) 则更符合人类对颜色的直观感知，色相（H）代表颜色种类，饱和度（S）代表颜色纯度，亮度（L）代表颜色明暗。
RGB 到 HSL 公式：
假设 r, g, b 的值都在 [0, 255] 范围内。首先将它们归一化到 [0, 1]：
R = r / 255, G = g / 255, B = b / 255
找到 max = max(R, G, B) 和 min = min(R, G, B)。
delta = max - min
亮度 (L)：L = (max + min) / 2
饱和度 (S)：
如果 delta === 0，则 S = 0 (灰色，无饱和度)。
否则，S = delta / (1 - Math.abs(2 * L - 1))
色相 (H)：
如果 delta === 0，则 H = 0 (无色相，灰色)。
否则：
max === R，H = ((G - B) / delta) % 6
max === G，H = (B - R) / delta + 2
max === B，H = (R - G) / delta + 4
最后，H = H * 60。如果 H < 0，则 H += 360。
H 在 [0, 360]，S 和 L 在 [0, 1] (或 [0, 100%] )。
JavaScript 示例 (RGB to HSL):
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
let max = Math.max(r, g, b);
let min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
} else {
let 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 /= 6;
}
return [h * 360, s * 100, l * 100]; // H [0-360], S [0-100], L [0-100]
}2. HSL 到 RGB 的转换
HSL 到 RGB 公式：
将 H 归一化到 [0, 1] ( H / 360 )，S, L 归一化到 [0, 1] ( S / 100, L / 100 )。
如果 S === 0，则 R = G = B = L (灰色)。
否则，需要一个辅助函数 hue2rgb：
const hue2rgb = (p, q, t) => { ... }q = L < 0.5 ? L * (1 + S) : L + S - L * Sp = 2 * L - q
R = hue2rgb(p, q, H + 1/3)G = hue2rgb(p, q, H)B = hue2rgb(p, q, H - 1/3)
hue2rgb 辅助函数：
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
};JavaScript 示例 (HSL to RGB):
function hslToRgb(h, s, l) {
h /= 360; s /= 100; l /= 100;
let r, g, b;
if (s === 0) {
r = g = b = l; // achromatic
} else {
const hue2rgb = (p, q, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p + (q - p) * 6 * t;
if (t < 1 / 2) return q;
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
return p;
};
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}3. RGB 到 LAB 的转换 (通过 XYZ)
LAB (L, a, b*) 是一种感知均匀的颜色空间，意味着颜色之间的数值距离与人类感知到的颜色差异大致成比例。它独立于设备，通常用于印刷、色彩管理和图像处理。RGB到LAB的转换过程比较复杂，通常需要经过XYZ颜色空间作为中间步骤。
步骤 1: RGB 到 sRGB (线性化)
首先，将 r, g, b 值从 [0, 255] 归一化到 [0, 1]。
然后进行伽马校正的逆运算，将 sRGB 转换为线性 RGB：
const linearRgb = (c) => { return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); };R_linear = linearRgb(r / 255)G_linear = linearRgb(g / 255)B_linear = linearRgb(b / 255)
步骤 2: 线性 RGB 到 XYZ 使用一个固定的转换矩阵将线性 RGB 转换为 XYZ。这个矩阵是基于 D65 标准光源（色温6500K，模拟日光）和 2度观察者。
X = R_linear * 0.4124564 + G_linear * 0.3575761 + B_linear * 0.1804375Y = R_linear * 0.2126729 + G_linear * 0.7151522 + B_linear * 0.0721750Z = R_linear * 0.0193339 + G_linear * 0.1191920 + B_linear * 0.9503041
步骤 3: XYZ 到 LAB
接下来，将 X, Y, Z 值除以 D65 参考白点的 Xn, Yn, Zn 值。D65 的参考白点通常是 Xn = 0.95047, Yn = 1.00000, Zn = 1.08883。
Xr = X / XnYr = Y / YnZr = Z / Zn
然后应用一个非线性函数 f(t)：
const f = (t) => { const delta = 6 / 29; return t > Math.pow(delta, 3) ? Math.cbrt(t) : t / (3 * Math.pow(delta, 2)) + 4 / 29; };
fx = f(Xr)fy = f(Yr)fz = f(Zr)
最后计算 L*, a*, b*：
L = 116 * fy - 16a = 500 * (fx - fy)b = 200 * (fy - fz)
JavaScript 示例 (RGB to LAB):
function rgbToLab(r, g, b) {
r /= 255; g /= 255; b /= 255;
// 1. sRGB to Linear RGB
const linearRgb = (c) => {
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
};
let R = linearRgb(r);
let G = linearRgb(g);
let B = linearRgb(b);
// 2. Linear RGB to XYZ (D65 illuminant)
let X = R * 0.4124564 + G * 0.3575761 + B * 0.1804375;
let Y = R * 0.2126729 + G * 0.7151522 + B * 0.0721750;
let Z = R * 0.0193339 + G * 0.1191920 + B * 0.9503041;
// D65 reference white point
const Xn = 0.95047;
const Yn = 1.00000;
const Zn = 1.08883;
let Xr = X / Xn;
let Yr = Y / Yn;
let Zr = Z / Zn;
// 3. XYZ to LAB
const f = (t) => {
const delta = 6 / 29;
return t > Math.pow(delta, 3) ? Math.cbrt(t) : t / (3 * Math.pow(delta, 2)) + 4 / 29;
};
let fx = f(Xr);
let fy = f(Yr);
let fz = f(Zr);
let L = 116 * fy - 16;
let a = 500 * (fx - fy);
let b_star = 200 * (fy - fz);
return [L, a, b_star]; // L [0-100], a [-128-127], b [-128-127] roughly
}4. LAB 到 RGB 的转换 (通过 XYZ)
这是 RGB 到 LAB 的逆过程。
步骤 1: LAB 到 XYZconst invF = (t) => { const delta = 6 / 29; return t > delta ? Math.pow(t, 3) : 3 * Math.pow(delta, 2) * (t - 4 / 29); };
fy = (L + 16) / 116fx = a / 500 + fyfz = fy - b / 200
Xr = invF(fx)Yr = invF(fy)Zr = invF(fz)
然后乘回 D65 参考白点：
X = Xr * XnY = Yr * YnZ = Zr * Zn
步骤 2: XYZ 到 线性 RGB 使用 XYZ 到线性 RGB 的逆矩阵：
R_linear = X * 3.2404542 + Y * -1.5371385 + Z * -0.4985314G_linear = X * -0.9692660 + Y * 1.8760108 + Z * 0.0415560B_linear = X * 0.0556434 + Y * -0.2040259 + Z * 1.0572252
步骤 3: 线性 RGB 到 sRGB (伽马校正)
最后进行伽马校正，将线性 RGB 转换回 sRGB，并钳制到 [0, 1] 范围，再乘以 255。
const sRgb = (c) => { return c <= 0.0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - 0.055; };
r = Math.round(sRgb(R_linear) * 255)g = Math.round(sRgb(G_linear) * 255)b = Math.round(sRgb(B_linear) * 255)
JavaScript 示例 (LAB to RGB):
function labToRgb(L, a, b_star) {
// D65 reference white point
const Xn = 0.95047;
const Yn = 1.00000;
const Zn = 1.08883;
// 1. LAB to XYZ
const invF = (t) => {
const delta = 6 / 29;
return t > delta ? Math.pow(t, 3) : 3 * Math.pow(delta, 2) * (t - 4 / 29);
};
let fy = (L + 16) / 116;
let fx = a / 500 + fy;
let fz = fy - b_star / 200;
let Xr = invF(fx);
let Yr = invF(fy);
let Zr = invF(fz);
let X = Xr * Xn;
let Y = Yr * Yn;
let Z = Zr * Zn;
// 2. XYZ to Linear RGB
let R_linear = X * 3.2404542 + Y * -1.5371385 + Z * -0.4985314;
let G_linear = X * -0.9692660 + Y * 1.8760108 + Z * 0.0415560;
let B_linear = X * 0.0556434 + Y * -0.2040259 + Z * 1.0572252;
// 3. Linear RGB to sRGB (gamma correction)
const sRgb = (c) => {
const val = Math.max(0, Math.min(1, c)); // Clamp to [0, 1]
return val <= 0.0031308 ? val * 12.92 : 1.055 * Math.pow(val, 1 / 2.4) - 0.055;
};
let r = Math.round(sRgb(R_linear) * 255);
let g = Math.round(sRgb(G_linear) * 255);
let b = Math.round(sRgb(B_linear) * 255);
return [r, g, b];
}我个人觉得，颜色空间转换的需求，很大程度上源于我们对“颜色”这个概念的多元理解和应用场景的差异。RGB直观地对应着屏幕像素的发光三原色，对硬件来说很友好，但你很难直观地告诉设计师“把这个颜色R值加20，G值减10”，因为这通常不会带来一个符合预期的“更亮”或“更蓝”的效果。
HSL或HSV（Hue, Saturation, Value）就解决了这个问题。当你调整一个滑块来改变“色相”，你知道你正在改变颜色的种类，比如从红到黄。调整“饱和度”就是改变颜色的鲜艳程度，而“亮度”或“明度”则控制其明暗。这对于用户界面（UI）设计、颜色选择器以及任何需要直观颜色调整的场景都至关重要。我自己在做一些前端工具时，就发现HSL在颜色主题生成和微调方面比RGB好用太多了，它能让我“思考”颜色，而不是“计算”颜色。
而LAB则完全是另一个层面的东西。它是一种感知均匀的颜色空间，这意味着颜色在LAB空间中的距离，大致与人眼感知到的颜色差异成比例。这在色彩管理、图像处理（比如颜色校正、颜色匹配）以及确保跨设备颜色一致性方面显得尤为重要。想象一下，你希望打印出来的图片颜色和屏幕上看到的一模一样，或者你正在比较两种涂料的颜色差异，LAB就能提供一个更客观、更接近人类感知的度量标准。它不依赖于任何特定的设备，因此在专业领域，它的价值是无可替代的。所以，这些转换不仅仅是数学游戏，它们是连接不同颜色表示方式，满足不同应用需求的桥梁。
在JavaScript中实现这些颜色空间转换，我遇到的挑战主要集中在浮点数精度和公式的准确性上。首先，JavaScript的Number类型是双精度浮点数，这本身就意味着在进行多次乘法、除法、开方等运算后，累积的浮点误差是不可避免的。特别是在LAB这种涉及幂运算和立方根的复杂转换中，微小的误差可能会在最终的RGB值上体现出来，导致颜色略有偏差，尤其是在接近纯色或极亮/极暗的边缘情况。
另一个常见的“坑”是舍入问题。虽然Math.round()可以帮助我们得到整数RGB值，但在中间步骤如果过度舍入，也会影响最终结果的准确性。我通常会尽量在计算的最后一步才
以上就是JS 颜色空间转换方法 - RGB、HSL 与 LAB 之间的数学转换公式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
752
