颜色是什么
在物理层面，颜色是人眼对可见光（波长约 380-740nm）的感知。不同波长的光刺激视网膜上三种视锥细胞（分别对长波、中波、短波敏感），大脑将其组合为颜色知觉。
但在数字世界里，颜色是一组数值。同一种「红色」在不同软件、不同设备上可能用不同的数值表示，理解这些数值与转换关系，是设计师与前端工程师的基本功。
主流的颜色表示法有 5 种：HEX、RGB、HSL、HSV、CMYK。每种都有自己的适用场景与局限，本文配套的在线颜色格式转换工具可让你边读边试。
HEX：网页最常用的十六进制
HEX 是十六进制颜色表示法，网页标准格式为 #RRGGBB，6 位字符按红、绿、蓝顺序，每两位 00-FF 表示该通道强度（0-255）。例如：
#FF0000 纯红
#00FF00 纯绿
#0000FF 纯蓝
#FFFFFF 纯白
#000000 纯黑
#2B6CFF 品牌蓝也支持简写 #RGB，每位重复一次：#F00 = #FF0000。CSS 还支持 8 位带透明度 #RRGGBBAA，但兼容性不如 rgba() 函数。
优点：紧凑、URL 友好、设计师与开发者都熟悉。 缺点：人眼难以直接读出「这是什么颜色」，调整明暗不如 HSL 直观。
RGB：加色模型
RGB（Red, Green, Blue）是加色模型——三色光相加为白光。这是屏幕显示的物理基础：每个像素由红绿蓝三个发光点组成，分别控制强度合成任意颜色。
CSS 标准格式：
color: rgb(43, 108, 255); /* 整数 0-255 */
color: rgb(17%, 42%, 100%); /* 百分比 0-100% */
color: rgba(43, 108, 255, 0.5); /* 带 alpha 透明度 */新语法用斜杠分隔透明度：rgb(43 108 255 / 50%)，更符合现代 CSS 规范。
优点：与硬件直接对应，转换无歧义。 缺点：调整明暗时三个值要同步变化，不直观。
HSL：人眼直觉的色彩模型
HSL（Hue, Saturation, Lightness）是面向人的颜色表示法：
- H（色相 Hue）：0-360°，色环角度。0=红，60=黄，120=绿，180=青，240=蓝，300=品红
- S（饱和度 Saturation）：0-100%，0% 灰色，100% 纯色
- L（亮度 Lightness）：0-100%，0% 黑，50% 纯色，100% 白
CSS 支持 HSL：
color: hsl(220, 100%, 58%); /* 品牌蓝 */
color: hsla(220, 100%, 58%, 0.5); /* 带透明度 */新语法：hsl(220 100% 58% / 50%)。
优点：调色直觉——保持 H 不变，调 S 控制鲜艳度，调 L 控制明暗。同一个 H 下，不同 S/L 的颜色看起来仍是「同一个色相」。CSS 现代设计系统（如 Tailwind）大量使用 HSL。 缺点：HSL 的 L=50% 并不等于物理上的「中等亮度」，不同色相的视觉亮度差异很大（黄色看起来比蓝色亮）。
HSV：Photoshop 取色器的模型
HSV（Hue, Saturation, Value）也叫 HSB（Brightness），与 HSL 仅差第三维：
- H、S 与 HSL 相同
- V（明度 Value）：0-100%，0% 黑，100% 纯色（不是白）
关键差异：HSL 的纯白在 L=100% 但 S 可任意；HSV 的纯白在 V=100% 但 S=0。
| 颜色 | HSL | HSV |
|---|---|---|
| 纯红 | hsl(0, 100%, 50%) | hsv(0, 100%, 100%) |
| 白色 | hsl(0, 0%, 100%) | hsv(0, 0%, 100%) |
| 黑色 | hsl(0, 0%, 0%) | hsv(0, 0%, 0%) |
| 浅红（加白） | hsl(0, 100%, 75%) | hsv(0, 33%, 100%) |
| 暗红（加黑） | hsl(0, 100%, 25%) | hsv(0, 100%, 50%) |
「加白」与「加黑」在两种模型中调整的字段不同：HSL 改 L（亮度），HSV 改 S（饱和度）或 V（明度）。
CSS 不支持 HSV，但 Photoshop / Figma 的取色器使用 HSV。设计师在软件里调好的 HSV 数值，前端用 CSS 时需转为 HSL 或 RGB。
CMYK：印刷四色减色模型
CMYK（Cyan 青、Magenta 品红、Yellow 黄、Key 黑）是减色模型——油墨吸收光线，三色相加接近黑（实际是浊褐色，故加纯黑 K 提升对比）。
CMYK 是百分比格式：cmyk(83%, 58%, 0%, 0%) 表示青 83%、品红 58%、黄 0%、黑 0%。
优点：直接对应印刷油墨配比。 缺点：色域比 RGB 小，许多亮色无法印刷；网页设计几乎不用 CMYK。
RGB 与 CMYK 不能完全互转：数学上可以转换，但实际印刷前需做色域映射（gamut mapping）+ ICC 配置文件，否则亮色失真变浊。本工具的转换是数学等价，未做色彩管理，仅作参考。
五种格式的转换关系
所有转换以 RGB 为中介：
HEX ⇄ RGB ⇄ HSL
⇅
HSV, CMYK核心算法（简化版）：
// HEX → RGB：每两位解析为 0-255
function hexToRgb(hex) {
const h = hex.replace('#', '');
return {
r: parseInt(h.slice(0, 2), 16),
g: parseInt(h.slice(2, 4), 16),
b: parseInt(h.slice(4, 6), 16),
};
}
// RGB → HSL：归一化后求最大/最小值，按公式计算
function rgbToHsl({ r, g, b }) {
const rN = r / 255, gN = g / 255, bN = b / 255;
const max = Math.max(rN, gN, bN);
const min = Math.min(rN, gN, bN);
const d = max - min;
let h = 0;
if (d !== 0) {
if (max === rN) h = ((gN - bN) / d) % 6;
else if (max === gN) h = (bN - rN) / d + 2;
else h = (rN - gN) / d + 4;
h *= 60;
if (h < 0) h += 360;
}
const l = (max + min) / 2;
const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));
return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
}
// RGB → CMYK：先求 K = 1 - max(rN, gN, bN)，再按比例计算
function rgbToCmyk({ r, g, b }) {
const rN = r / 255, gN = g / 255, bN = b / 255;
const k = 1 - Math.max(rN, gN, bN);
if (k === 1) return { c: 0, m: 0, y: 0, k: 100 }; // 纯黑
return {
c: Math.round((1 - rN - k) / (1 - k) * 100),
m: Math.round((1 - gN - k) / (1 - k) * 100),
y: Math.round((1 - bN - k) / (1 - k) * 100),
k: Math.round(k * 100),
};
}HSL → RGB、HSV → RGB 涉及 6 个色相区间分段函数，代码较长，本文从略。完整实现可参考配套工具的源码（DevTools 即可查看）。
五种和谐配色方案
选定主色后，如何延伸出整套配色？色彩理论给出了 5 种标准方案，对应色相的不同旋转角度：
1. 互补色（Complementary）— ±180°
主色 + 对角色，2 色。对比最强烈，适合「主色 + 强调色」组合。例如蓝色背景配橙色 CTA 按钮，转化率最高的经典搭配。
2. 类似色（Analogous）— ±30°
主色 + 邻近色，3 色。和谐统一，适合背景渐变、数据图表系列。例如品牌主色用蓝紫色，辅助色用蓝色与紫色，过渡自然。
3. 三角色（Triadic）— ±120°
主色 + 两个等距色，3 色。平衡又活泼，适合多区域布局。例如红 / 黄 / 蓝三色，儿童网站常用。
4. 分割互补（Split-Complementary）— 180° ± 30°
主色 + 互补色两侧 30°，3 色。比互补色柔和，对比但不刺眼。例如蓝色 + 黄橙色 + 红橙色，丰富又不冲突。
5. 四角色（Tetradic / Rectangle）— ±90° / ±180°
主色 + 三个等距色，4 色。丰富多样，适合多主题配色。例如红 / 黄 / 绿 / 蓝四色，数据可视化多系列。
所有方案保持当前颜色的饱和度与亮度，仅旋转色相，保证整体明暗一致。
实战建议
网页设计：
- 主色（Primary）选 1 个，对应品牌识别
- 强调色（Accent）选互补色或分割互补色，用于 CTA 按钮
- 中性色（Neutral）用灰色系，不参与色相旋转
- 暗色模式：保持 H 不变，L 调到 20-30% 之间
配色生成流程：
- 在颜色转换工具中输入主色 HEX（或用拾色器选色）
- 查看下方 5 种和谐方案，选最契合产品调性的
- 点击色块设为当前色，再生成下一级配色
- 复制 HEX 到 CSS 变量 / Figma / Sketch
前端实现：
:root {
--color-primary: hsl(220, 100%, 58%); /* 品牌蓝 */
--color-primary-hover: hsl(220, 100%, 48%); /* L 降 10% */
--color-accent: hsl(40, 100%, 58%); /* 互补色 */
--color-bg: hsl(220, 20%, 98%); /* 同色相浅背景 */
--color-text: hsl(220, 20%, 20%); /* 同色相深文字 */
}用 HSL 而不是 HEX 的好处：调明暗只改 L，调色相只改 H，调饱和度只改 S，互不干扰。
常见陷阱速查
| 陷阱 | 原因 | 解决 |
|---|---|---|
| 设计软件颜色和网页不一致 | 用了 Display P3 / Adobe RGB 色域 | 网页用 sRGB，导出前转换色彩空间 |
| HSL 数值和 Photoshop 取色器对不上 | Photoshop 用 HSV，不是 HSL | 用本工具对照转换 |
| CMYK 印刷出来颜色变浊 | RGB 亮色超出 CMYK 色域 | 印刷前用专业软件做色域映射 |
| 互补色对比太刺眼 | 互补色饱和度过高 | 降低互补色饱和度或用分割互补 |
| 暗色模式颜色看起来「灰」 | 直接调低 L 会让 S 也变化 | 保持 S 不变，L 调到 20-30% |
| 文字在彩色背景上看不清 | 没考虑相对亮度 | 用 WCAG 标准，亮背景配黑，暗背景配白 |
| 配色方案看起来杂乱 | 用了过多色相 | 限制在 1 主色 + 1 强调色 + 中性灰 |
小结
- HEX 是网页最常用格式，紧凑但难调；RGB 是硬件原生格式；HSL 面向人直觉调色
- HSL 与 HSV 仅差第三维（L vs V），Photoshop 用 HSV，CSS 用 HSL，数值不能直接互换
- CMYK 是印刷四色，色域比 RGB 小，互转需色彩管理
- 五种格式可通过 RGB 中介互转，本工具已实现完整转换链
- 五种和谐配色方案基于色相旋转：互补（180°）、类似（30°）、三角（120°）、分割互补（150°/210°）、四角（90°/180°/270°）
- 网页设计用 HSL 调色最方便，调明暗只改 L，调色相只改 H
读完本文，可用配套的在线颜色格式转换工具实操：输入一个品牌色，观察五种格式互转，挑选合适的配色方案，复制 HEX 到 CSS 即可。