随便挑一种颜色——比如一抹温暖的珊瑚色。现在用四种方式来描述它：
这四种写法描述的是完全相同的一种颜色。它们不是互相竞争的标准，而是针对不同场景优化的颜色表示方式。困惑的根源在于不清楚哪种场景该用哪种格式。
本指南用通俗的语言拆解每一种格式：它是什么、如何运作、什么时候该用、什么时候是错误的选择。只要你的工作会接触到颜色——设计、开发、印刷、市场营销——这篇文章都能帮你避免为项目选错格式。
HEX（十六进制）是以井号开头的六位字符代码：#E8635A。每两位字符分别以十六进制记法（00 到 FF）表示红、绿、蓝三个通道。
它在功能上与 RGB 完全相同，只是写法不同。#E8635A 就等于 rgb(232, 99, 90)。HEX 只是书写 RGB 数值的一种更紧凑的方式。
color: #E8635A; 是网页上最常见的颜色指定方式。#E8635A80），可读性更差，不如直接换成 RGBA。你正在为落地页写 CSS。设计师给了你一份包含品牌色的风格指南，于是你写下：
:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }
HEX 在这里非常合适：紧凑、易读，而且到处都支持。
RGB 代表 Red（红）、Green（绿）、Blue（蓝）——屏幕用来混合出你所见一切颜色的三种光色。每个通道的取值范围是 0 到 255。rgb(232, 99, 90) 表示 232 单位的红、99 单位的绿和 90 单位的蓝。
RGB 是所有数字颜色的基础。HEX 只是 RGB 的另一种写法，HSL 则是对 RGB 做了更贴近人类直觉的转换。屏幕上的一切最终都会变成发送给像素的 RGB 数值。
rgba(232, 99, 90, 0.5) 表示 50% 不透明度。这比八位 HEX 清晰得多，并且在 CSS、设计工具和编程语言中获得广泛支持。你正在开发一个 React Native 应用，需要一层半透明的遮罩：
backgroundColor: 'rgba(0, 0, 0, 0.6)'
带透明通道的 RGB 是最自然的选择——直接、易读，而且是渲染引擎的原生格式。
HSL 代表 Hue（色相）、Saturation（饱和度）、Lightness（明度）：
hsl(4, 75%, 63%) 的意思是：偏红的色相（4°）、非常鲜艳（饱和度 75%）、略偏亮（63%）。
hsl(4, 75%, 73%)，更暗的是 hsl(4, 75%, 43%)。你正在用 Tailwind CSS 搭建设计系统，需要一套一致的色阶：
--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);
相同的色相、相同的饱和度、不同的明度。30 秒就能得到完美的色阶。换成 HEX 试试看。
CMYK 代表 Cyan（青）、Magenta（品红）、Yellow（黄）、Key（黑）。它把颜色描述为涂在白纸上的油墨混合。每个数值的范围是 0% 到 100%：0, 57, 61, 9 表示 0% 青、57% 品红、61% 黄和 9% 黑。
与靠叠加光线来成色的 RGB 不同，CMYK 是从白纸上做减法。油墨越多，颜色越暗。这就是它被称为减色颜色模型的原因。
你用 Illustrator 设计了一张海报。送去印刷厂之前，你把文档转换为 CMYK 色彩模式（File → Document Color Mode → CMYK Color），检查超出色域的警告，并调整那些变成浑浊青绿色的电光蓝。最终的 PDF 以 CMYK 保存，并附上印刷厂的 ICC 配置文件。
| 格式 | 最适合 | 取值范围 | 支持透明度 | 人类可读性 | 适合印刷 |
|---|---|---|---|---|---|
| HEX | 网页、CSS、品牌手册 | #000000 – #FFFFFF | 仅八位（#RRGGBBAA） | 中 | 否 |
| RGB | 屏幕、应用、渐变 | 每通道 0–255 | 是（RGBA） | 中 | 否 |
| HSL | 设计系统、主题 | 0°–360°、0%–100%、0%–100% | 是（HSLA） | 高 | 否 |
| CMYK | 印刷、包装 | 每通道 0%–100% | 否 | 低 | 是 |
| 你的项目 | 使用格式 | 原因 |
|---|---|---|
| 网站 CSS | HEX 或 HSL | 求简洁用 HEX；需要主题的设计系统用 HSL |
| 移动应用（iOS/Android） | RGB/RGBA | 原生框架内部使用 RGB |
| Figma / Sketch 设计文件 | HEX | 设计工具的标准输入格式 |
| 设计系统 / 设计令牌 | HSL | 在 HSL 中生成色阶和变体极为简单 |
| 社交媒体图片 | HEX 或 RGB | 纯数字用途；Canva 和 Photoshop 都支持 |
| 名片 / 宣传册 | CMYK | 要送到实体印刷机上 |
| 产品包装 | CMYK + 潘通色 | 兼顾印刷与品牌色的一致性 |
| 邮件模板 | HEX | 邮件客户端对 HEX 支持稳定可靠 |
| 智能灯 / LED | RGB | LED 硬件原生使用 RGB |
| 品牌规范文档 | 四种全都要 | 不同团队需要不同的格式 |
可以——但有前提。
如果需要随时随地快速转换，一款能同时显示四种格式的手机取色应用是最快的工作流。Color Picker Camera: HEX RGB 做的正是这件事——把相机对准任何颜色，就能并排看到 HEX、RGB、HSL 和 CMYK。轻点一下即可复制任意数值。iPhone 和 Android 均可使用。
这是最典型的新手错误。你在 Photoshop 的 RGB 模式下做了一张色彩鲜艳的海报，送到印刷厂后成品却灰蒙蒙的——绿色和蓝色尤为明显。导出印刷文件前务必转换为 CMYK，并检查色域警告。
如果你的设计需要半透明遮罩、阴影或玻璃拟态效果，请改用 RGBA 或 HSLA。标准的六位 HEX 不携带不透明度信息，而八位 HEX 因为难以阅读而很少被使用。
\"#3B82F6 但要亮 20%\"需要转换、计算，再转换回来。而在 HSL 里：把明度加 20% 就行了。设计令牌、主题生成器和现代 CSS 自定义属性在 HSL 下运作得好得多。
为印刷而以 CMYK 定义的品牌色，简单粗暴地转成 HEX 用于网页时会看起来不一样。正确的做法是：在屏幕上视觉匹配印刷成品的颜色，然后为数字用途单独定义 HEX 值。品牌规范应当同时包含两者。
颜色上毫无区别，只是写法不同。HEX 用十六进制书写同样的红/绿/蓝数值。#FF0000 与 rgb(255, 0, 0) 完全相同。HEX 输入更短；RGB 更便于用程序修改，并且支持透明通道（RGBA）。
当你的最终成品会印在实体材料上时——纸张、卡纸、织物、塑料。如果它只停留在屏幕上，就用 RGB（或 HEX/HSL）；如果要付印，就在导出阶段切换到 CMYK。
就设计系统、主题和颜色调整而言，是的。就快速沟通和复制粘贴到各种工具而言，HEX 更实用。它们描述的是同样的颜色，HSL 只是把信息组织成更贴近人类思考颜色的方式（色相 → 鲜艳度 → 明亮度）。
可以。Color Picker Camera: HEX RGB 能从相机或照片中捕捉颜色，并同时显示 HEX、RGB、HSL 和 CMYK。轻点任意数值即可复制。它就像一台面向真实世界的颜色格式计算器——拍一次，四种格式全到手。
网页和快速沟通用 HEX。应用开发和透明度用 RGB。设计系统和颜色调整用 HSL。印刷用 CMYK。
你不需要只选一种——你需要的是在每种场景下用对那一种。而当你需要在它们之间转换，或者想把真实世界的颜色一次性捕捉成四种格式时，手机取色应用就是最快的工具。
" }