在 Web 开发和设计中，颜色是最基础的视觉元素。理解不同的颜色模型及其转换原理，有助于开发者与设计师高效协作，精确控制界面配色。
RGB 模型
RGB 是加色模型，通过红（Red）、绿（Green）、蓝（Blue）三种光的叠加来表示颜色，每种通道取值范围 0-255。这是屏幕显示的基础模型。
rgb(255, 0, 0) // 纯红
rgb(0, 255, 0) // 纯绿
rgb(0, 0, 255) // 纯蓝
rgb(255, 255, 255) // 白色
rgb(0, 0, 0) // 黑色
rgb(255, 128, 0) // 橙色
RGBA 是 RGB 的扩展，增加了 Alpha 通道表示透明度，取值范围 0-1 或 0%-100%。
HEX 格式
HEX 是 RGB 的十六进制表示法，格式为 #RRGGBB，每两位代表一个通道的十六进制值（00-FF）。这是 CSS 中最常用的颜色格式。
#FF0000 // 纯红，等价于 rgb(255, 0, 0)
#00FF00 // 纯绿
#0000FF // 纯蓝
#FFFFFF // 白色
#000000 // 黑色
#F80 // 缩写形式，等价于 #FF8800
// 带透明度（8位HEX）
#FF0000FF // 纯红，不透明
#FF000080 // 纯红，50%透明
三位缩写形式 #RGB 等价于 #RRGGBB，仅当每两位相同时可用，如 #AABBCC 可缩写为 #ABC。
HSL 模型
HSL 是基于人类视觉感知的颜色模型，由色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个维度组成，更符合直觉的调色方式。
- 色相（H）：0-360 度，表示颜色在色轮上的位置。0 为红色，120 为绿色，240 为蓝色
- 饱和度（S）：0%-100%，表示颜色的纯度。0% 为灰色，100% 为纯色
- 亮度（L）：0%-100%，表示颜色的明暗。0% 为黑色，50% 为正常色，100% 为白色
hsl(0, 100%, 50%) // 纯红
hsl(120, 100%, 50%) // 纯绿
hsl(240, 100%, 50%) // 纯蓝
hsl(0, 0%, 50%) // 中灰色
hsl(30, 100%, 50%) // 橙色
// HSLA 带透明度
hsla(0, 100%, 50%, 0.5) // 半透明红色
各模型的使用场景
- HEX：CSS 样式表中最常用，简洁紧凑
- RGB/RGBA：需要动态计算颜色或设置透明度时使用
- HSL/HSLA：设计工具和调色板生成，调整色相或明暗更直观
色彩空间转换原理
HEX 转 RGB：将十六进制字符串按两位分组，转为十进制：
function hexToRgb(hex) {
hex = hex.replace('#', '');
const r = parseInt(hex.substr(0, 2), 16);
const g = parseInt(hex.substr(2, 2), 16);
const b = parseInt(hex.substr(4, 2), 16);
return { r, g, b };
}
// #FF8800 → { r: 255, g: 136, b: 0 }
RGB 转 HSL：数学转换，将笛卡尔坐标转为圆柱坐标：
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const 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 /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
CSS 颜色函数
/* 基础函数 */
color: rgb(255, 128, 0);
color: rgba(255, 128, 0, 0.5);
color: hsl(30, 100%, 50%);
color: hsla(30, 100%, 50%, 0.5);
color: #FF8000;
/* CSS Color Level 4 新语法 */
color: rgb(255 128 0); // 空格分隔
color: rgb(255 128 0 / 50%); // 斜杠分隔透明度
color: hsl(30 100% 50% / 50%);
/* 现代颜色空间（CSS Color Level 4） */
color: oklch(0.7 0.2 30); // OKLCH 颜色空间
color: color(display-p3 1 0 0); // P3 广色域
颜色选择器与调色板
HTML5 提供了原生颜色选择器 <input type="color">，但只支持 HEX 格式。更复杂的需求可使用 JavaScript 实现：
<input type="color" value="#ff8800">
<script>
const input = document.querySelector('input[type="color"]');
input.addEventListener('input', (e) => {
console.log(e.target.value); // #ff8800
});
</script>
调色板生成：基于 HSL 模型可以快速生成和谐配色方案：
- 互补色：色相差 180°，如 0° 和 180°
- 类似色：色相差 30°-60°，如 0°、30°、60°
- 三色配：色相差 120°，如 0°、120°、240°
- 单色配：相同色相，不同饱和度和亮度
配色原则
- 60-30-10 原则：主色 60%、辅助色 30%、强调色 10%
- 对比度：文字与背景对比度至少 4.5:1（WCAG AA 标准）
- 色彩一致性：全站使用统一的色彩变量
- 无障碍：不要仅靠颜色传达信息，辅以文字或图标
- 暗色模式：使用 CSS 变量便于主题切换
:root {
--color-primary: #3b82f6;
--color-text: #1f2937;
--color-bg: #ffffff;
}
[data-theme="dark"] {
--color-primary: #60a5fa;
--color-text: #f3f4f6;
--color-bg: #1f2937;
}
body {
color: var(--color-text);
background: var(--color-bg);
}
使用 Coding Plus 的颜色转换工具，可以在 RGB、HEX、HSL 之间快速互转，并内置颜色选择器，是前端开发和 UI 设计的得力助手。
75+ 工具
免费免注册
本地处理
目录导航