appstoryoAppStoryolapnito.cz s.r.o.blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use/zh-hansHEX、RGB、HSL 与 CMYK：该用哪种颜色格式，什么时候用Lubor Šimůnek21032026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0

HEX、RGB、HSL 和 CMYK 有什么区别？通过实用示例了解网页、印刷、UI 设计和社交媒体分别该用哪种颜色格式。

设计articleAppStoryo同一种颜色，四种不同的语言

随便挑一种颜色——比如一抹温暖的珊瑚色。现在用四种方式来描述它：

HEX： #E8635A

RGB： rgb(232, 99, 90)

HSL： hsl(4, 75%, 63%)

CMYK： 0, 57, 61, 9

这四种写法描述的是完全相同的一种颜色。它们不是互相竞争的标准，而是针对不同场景优化的颜色表示方式。困惑的根源在于不清楚哪种场景该用哪种格式。

本指南用通俗的语言拆解每一种格式：它是什么、如何运作、什么时候该用、什么时候是错误的选择。只要你的工作会接触到颜色——设计、开发、印刷、市场营销——这篇文章都能帮你避免为项目选错格式。

HEX：网页的标准它是什么

HEX（十六进制）是以井号开头的六位字符代码：#E8635A。每两位字符分别以十六进制记法（00 到 FF）表示红、绿、蓝三个通道。

它在功能上与 RGB 完全相同，只是写法不同。#E8635A 就等于 rgb(232, 99, 90)。HEX 只是书写 RGB 数值的一种更紧凑的方式。

什么时候用 HEX

CSS 与网页开发——HEX 是 CSS 中默认的颜色写法，所有浏览器都能识别。color: #E8635A; 是网页上最常见的颜色指定方式。

设计工具——Figma、Sketch、Adobe XD 和 Canva 都以 HEX 作为主要输入格式。设计师说"这个蓝是 #3B82F6"，所有人都明白指的是什么。

品牌规范——数字品牌手册几乎总会列出 HEX 值，因为它简短、无歧义、方便复制粘贴。

快速沟通——在 Slack 消息里说"用 #333"比说"用 rgb(51, 51, 51)"快得多。

什么时候不该用 HEX

需要透明度时——标准的六位 HEX 不支持透明通道。你得用八位 HEX（#E8635A80），可读性更差，不如直接换成 RGBA。

需要以程序方式调整颜色时——"把这个颜色调亮 20%"在 HEX 里几乎无法心算。这类需求 HSL 要好用得多。

印刷制作——印刷厂从来不用 HEX，一次也没有。

实际例子

你正在为落地页写 CSS。设计师给了你一份包含品牌色的风格指南，于是你写下：

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX 在这里非常合适：紧凑、易读，而且到处都支持。

RGB：屏幕的颜色模型它是什么

RGB 代表 Red（红）、Green（绿）、Blue（蓝）——屏幕用来混合出你所见一切颜色的三种光色。每个通道的取值范围是 0 到 255。rgb(232, 99, 90) 表示 232 单位的红、99 单位的绿和 90 单位的蓝。

RGB 是所有数字颜色的基础。HEX 只是 RGB 的另一种写法，HSL 则是对 RGB 做了更贴近人类直觉的转换。屏幕上的一切最终都会变成发送给像素的 RGB 数值。

什么时候用 RGB

需要透明度时——RGBA 增加了一个透明通道：rgba(232, 99, 90, 0.5) 表示 50% 不透明度。这比八位 HEX 清晰得多，并且在 CSS、设计工具和编程语言中获得广泛支持。

编程与应用开发——Swift、Kotlin、Flutter、React Native 等应用框架内部通常直接使用 RGB/RGBA 数值。

LED 与灯光——智能灯具（Philips Hue、LED 灯带）使用 RGB 数值。如果你在为实体灯光装置做设计，RGB 就是原生格式。

颜色运算——混合颜色、插值渐变或用程序生成颜色，在 RGB 中都非常直接。

什么时候不该用 RGB

印刷——屏幕发出光（加色混合），纸张反射光（减色混合）。RGB 无法准确表达印刷机最终输出的效果。

调整明度或饱和度——"把这个颜色的饱和度降低 30%"在 RGB 里毫不直观，你得先转换成 HSL。

实际例子

你正在开发一个 React Native 应用，需要一层半透明的遮罩：

backgroundColor: 'rgba(0, 0, 0, 0.6)'

带透明通道的 RGB 是最自然的选择——直接、易读，而且是渲染引擎的原生格式。

HSL：设计师的格式它是什么

HSL 代表 Hue（色相）、Saturation（饱和度）、Lightness（明度）：

色相（0°–360°）——颜色本身，即它在色轮上的位置。0° 是红，120° 是绿，240° 是蓝。

饱和度（0%–100%）——颜色有多鲜艳。0% 是灰色，100% 是该色相最纯粹的形态。

明度（0%–100%）——颜色有多亮或多暗。0% 是黑，100% 是白，50% 才是这个颜色"本来"的样子。

hsl(4, 75%, 63%) 的意思是：偏红的色相（4°）、非常鲜艳（饱和度 75%）、略偏亮（63%）。

什么时候用 HSL

设计系统与主题——HSL 是构建一致色阶的最佳格式。想要主色的十个深浅层级？保持色相不变，把明度从 10% 变到 95% 即可。想要低调一些的版本？把饱和度降下来。这在 HEX 或 RGB 中几乎不可能凭直觉完成。

深色模式 / 浅色模式——切换主题本质上就是调整明度与饱和度，而这正好对应 HSL 的参数。Tailwind CSS、Radix Colors 以及许多现代设计系统都建立在 HSL 之上。

以程序生成颜色——从单一基础色派生出悬停态、禁用态、背景色和边框色，在 HSL 中轻而易举：更亮的变体是 hsl(4, 75%, 73%)，更暗的是 hsl(4, 75%, 43%)。

无障碍设计——当你能直接看到并调整明度时，对比度检查会变得更加直观。

什么时候不该用 HSL

跨团队沟通——大多数人不会用角度和百分比思考颜色。在设计交付时，说"按钮是 hsl(4, 75%, 63%)"远不如说"按钮是 #E8635A"来得清楚。

印刷——和 RGB 一样，HSL 也是屏幕颜色模型。

实际例子

你正在用 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：印刷的格式它是什么

CMYK 代表 Cyan（青）、Magenta（品红）、Yellow（黄）、Key（黑）。它把颜色描述为涂在白纸上的油墨混合。每个数值的范围是 0% 到 100%：0, 57, 61, 9 表示 0% 青、57% 品红、61% 黄和 9% 黑。

与靠叠加光线来成色的 RGB 不同，CMYK 是从白纸上做减法。油墨越多，颜色越暗。这就是它被称为减色颜色模型的原因。

什么时候用 CMYK

印刷设计——名片、宣传册、包装、海报、杂志。任何送去商业印刷厂的文件都应当采用 CMYK 色彩模式。

在 InDesign、Illustrator 中准备印刷文件——这些工具允许你在 CMYK 模式下工作，预览颜色印在纸上的效果（永远不如屏幕上鲜艳）。

色彩打样——检查你设计中的颜色能否用 CMYK 复现。某些鲜艳的 RGB 颜色（尤其是霓虹绿和电光蓝）在物理上根本无法用 CMYK 印出来——它们"超出色域"。

什么时候不该用 CMYK

任何显示在屏幕上的东西——网站、应用、社交媒体、演示文稿、邮件。屏幕使用 RGB。为网站指定 CMYK，就像用海里来指路一样——它确实是个距离单位，但对这段旅程毫无用处。

照片修图——在 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%否低是
对照表：什么工作用什么格式
你的项目使用格式原因
网站 CSSHEX 或 HSL求简洁用 HEX；需要主题的设计系统用 HSL
移动应用（iOS/Android）RGB/RGBA原生框架内部使用 RGB
Figma / Sketch 设计文件HEX设计工具的标准输入格式
设计系统 / 设计令牌HSL在 HSL 中生成色阶和变体极为简单
社交媒体图片HEX 或 RGB纯数字用途；Canva 和 Photoshop 都支持
名片 / 宣传册CMYK要送到实体印刷机上
产品包装CMYK + 潘通色兼顾印刷与品牌色的一致性
邮件模板HEX邮件客户端对 HEX 支持稳定可靠
智能灯 / LEDRGBLED 硬件原生使用 RGB
品牌规范文档四种全都要不同团队需要不同的格式
它们之间可以互相转换吗？

可以——但有前提。

HEX ↔ RGB——无损，它们是同一份数据的不同写法。

RGB ↔ HSL——无损，只是一次数学变换。

RGB → CMYK——有损。某些 RGB 颜色（鲜亮的蓝、霓虹色、明亮的绿）无法在 CMYK 中复现。转换会把它们替换成最接近的可印刷颜色，结果往往显得更暗淡。

CMYK → RGB——技术上可行，但结果取决于所使用的 ICC 配置文件。同一组 CMYK 数值，不同的转换工具可能给出略有差异的 RGB 值。

如果需要随时随地快速转换，一款能同时显示四种格式的手机取色应用是最快的工作流。Color Picker Camera: HEX RGB 做的正是这件事——把相机对准任何颜色，就能并排看到 HEX、RGB、HSL 和 CMYK。轻点一下即可复制任意数值。iPhone 和 Android 均可使用。

常见错误1. 用 RGB 做印刷设计

这是最典型的新手错误。你在 Photoshop 的 RGB 模式下做了一张色彩鲜艳的海报，送到印刷厂后成品却灰蒙蒙的——绿色和蓝色尤为明显。导出印刷文件前务必转换为 CMYK，并检查色域警告。

2. 需要透明度时却用 HEX

如果你的设计需要半透明遮罩、阴影或玻璃拟态效果，请改用 RGBA 或 HSLA。标准的六位 HEX 不携带不透明度信息，而八位 HEX 因为难以阅读而很少被使用。

3. 用 HEX 搭建设计系统

"#3B82F6 但要亮 20%"需要转换、计算，再转换回来。而在 HSL 里：把明度加 20% 就行了。设计令牌、主题生成器和现代 CSS 自定义属性在 HSL 下运作得好得多。

4. 把 CMYK 转成 HEX 用于网页，还指望颜色一样

为印刷而以 CMYK 定义的品牌色，简单粗暴地转成 HEX 用于网页时会看起来不一样。正确的做法是：在屏幕上视觉匹配印刷成品的颜色，然后为数字用途单独定义 HEX 值。品牌规范应当同时包含两者。

常见问题HEX 和 RGB 有什么区别？

颜色上毫无区别，只是写法不同。HEX 用十六进制书写同样的红/绿/蓝数值。#FF0000 与 rgb(255, 0, 0) 完全相同。HEX 输入更短；RGB 更便于用程序修改，并且支持透明通道（RGBA）。

什么时候该用 CMYK 而不是 RGB？

当你的最终成品会印在实体材料上时——纸张、卡纸、织物、塑料。如果它只停留在屏幕上，就用 RGB（或 HEX/HSL）；如果要付印，就在导出阶段切换到 CMYK。

HSL 比 HEX 更好吗？

就设计系统、主题和颜色调整而言，是的。就快速沟通和复制粘贴到各种工具而言，HEX 更实用。它们描述的是同样的颜色，HSL 只是把信息组织成更贴近人类思考颜色的方式（色相 → 鲜艳度 → 明亮度）。

我的手机能同时显示四种格式吗？

可以。Color Picker Camera: HEX RGB 能从相机或照片中捕捉颜色，并同时显示 HEX、RGB、HSL 和 CMYK。轻点任意数值即可复制。它就像一台面向真实世界的颜色格式计算器——拍一次，四种格式全到手。

结论

网页和快速沟通用 HEX。应用开发和透明度用 RGB。设计系统和颜色调整用 HSL。印刷用 CMYK。

你不需要只选一种——你需要的是在每种场景下用对那一种。而当你需要在它们之间转换，或者想把真实世界的颜色一次性捕捉成四种格式时，手机取色应用就是最快的工具。

下载 iPhone 版 Color Picker Camera | 下载 Android 版