数字色彩学与色域模型：HEX、RGB、HSL/HSV 转换及 Web 配色系统
在现代 UI/UX 界面设计与前端工程中，颜色不仅仅是像素的视觉装饰，更承载着信息层级、品牌调性与无障碍可读性（WCAG）。然而，不同的终端硬件、设计软件（Figma、Photoshop）与开发框架（CSS3、TailwindCSS）往往采用不同的色彩表示法。理解各色彩空间的底层数学模型与转换原理，是构建现代化设计系统（Design System）的基础。
四大主流色彩模型深度对比
- HEX 十六进制码： 采用
#RRGGBB形式，本质是 24-bit RGB 的十六进制简写（红、绿、蓝各占 2 位，范围00~FF，对应十进制0~255）。8 位 HEX（#RRGGBBAA）最后两位为 Alpha 透明度通道。因其书写紧凑、兼容性强，成为网页中最经典的静态颜色表示法。 - RGB / RGBA（加色模型）： 模拟发光二极管（LED/OLED）红、绿、蓝光束叠加发光。当三色均为 255 时混合为白光，三色均为 0 时为纯黑。在计算线性混合、Canvas 逐像素着色与 WebGL 渲染管线中是不可替代的标准。
- HSL（色相、饱和度、亮度）： 采用圆柱坐标系，将复杂的混色降维为人眼直觉可感知的三个维度：色相（Hue, 0°~360°）代表纯光谱色；饱和度（Saturation, 0%~100%）控制色彩鲜艳度；亮度（Lightness, 0%~100%）控制明暗（0% 为纯黑，50% 为纯色，100% 为纯白）。在设计系统中，只需修改 L 值即可自动派生悬停态（Hover）、暗色模式（Dark Mode）对比色。
- HSV / HSB（色相、饱和度、明度）： 普遍应用于设计软件拾色器。HSV 中的 Value 表示色彩的最大分量亮度，其最大饱和度与最大亮度交汇处即为最纯正的原色，比 HSL 更贴合画师混调颜料的直觉。
常用色彩空间特性速查对照表
| 色彩模型 | 格式语法示例 | 取值范围规范 | 推荐应用场景 |
|---|---|---|---|
| HEX / HEX8 | #6366F1 / #6366F180 | #000000 ~ #FFFFFF | CSS 静态样式声明、SVG 填充、品牌 VI 手册 |
| RGB / RGBA | rgb(99, 102, 241) | 0 ~ 255 (Alpha: 0 ~ 1) | Canvas 图形绘制、底层着色器、三维渲染管线 |
| HSL / HSLA | hsl(239, 84%, 67%) | H: 0~360, S: 0~100%, L: 0~100% | 现代 UI 组件库、CSS 动态主题变量、调色板扩展 |
| HSV / HSB | hsv(239, 59%, 95%) | H: 0~360, S: 0~100%, V: 0~100% | Figma / Sketch / PS 拾色器、数字艺术绘画 |
快速使用步骤指南
- 输入颜色值： 在输入框内输入任意 HEX、RGB 或 HSL 颜色代码，或直接点击取色器拾取屏幕色彩。
- 多格式即时换算： 工具将在毫秒级内将色彩同步换算为 HEX、RGB、HSL、HSV 等全套常用标准格式。
- 探索调色板与渐变： 查看自动衍生的明暗单色阶（Tints & Shades）、互补色方案以及 CSS 双色渐变预览。
- 一键复制色彩代码： 点击对应格式条目右侧的 复制 按钮，直接粘贴至前端 CSS 样式表或设计软件中。
常见问题解答 (FAQ)
Q: 如何利用互补色与类似色搭配出高级的网页界面？
互补色（色相差 180°）对比强烈，非常适合用于主行动号召按钮（CTA Button）、警示角标或重要数据高亮；而类似色（色相相差 ±30°）色彩温和协调，适合用于大面积的网页渐变背景、卡片微阴影以及插画渐层填充。
Q: 为什么屏幕上看起来很鲜艳的青色 (Cyan)，转为 CMYK 印刷后会发灰？
这是由于物理色域（Gamut）覆盖范围不同。电子屏幕的 RGB 属于主动发光体，能呈现高纯度的高亮霓虹色；而印刷纸张依靠油墨对环境光的反射（减色模型），CMYK 印刷色域比 sRGB / Display P3 小得多，溢出色域的超饱和部分会被色彩管理引擎强制压缩至可打印范围。
Q: 8 位十六进制颜色后两位的 Alpha 值是如何计算转换的？
Alpha 值由 0 到 1 的十进制浮点数映射至 0 到 255 的十六进制：Math.round(alpha * 255).toString(16)。例如 50% 透明度为 0.5 × 255 = 127.5 ≈ 128，转换为十六进制为 80；10% 为 1A；完全不透明为 FF。
Q: 本工具支持哪些格式的快捷颜色输入？
输入框支持智能正则自适应解析：无论是带 # 或不带 # 的 3 位 / 6 位 / 8 位 HEX、形如 rgb(255, 100, 50) 的函数式写法，还是纯文本 CSS 颜色名（如 crimson, royalblue, papayawhip），都能瞬间精准识别并驱动调色盘联动。