HEX、RGB、HSL 与 CMYK：该用哪种颜色格式，什么时候用 ================================= 四种颜色格式，四种不同的用途。本指南结合网页设计、印刷、社交媒体和应用开发的真实案例，讲清楚 HEX、RGB、HSL 和 CMYK 各自该在什么时候使用。 Author: Lubor Šimůnek Published: 2026-03-21 Category: 设计 同一种颜色，四种不同的语言 随便挑一种颜色——比如一抹温暖的珊瑚色。现在用四种方式来描述它： - 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% | 否 | 低 | 是 对照表：什么工作用什么格式 你的项目 | 使用格式 | 原因 网站 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 品牌规范文档 | 四种全都要 | 不同团队需要不同的格式 它们之间可以互相转换吗？ 可以——但有前提。 - HEX ↔ RGB——无损，它们是同一份数据的不同写法。 - RGB ↔ HSL——无损，只是一次数学变换。 - RGB → CMYK——有损。某些 RGB 颜色（鲜亮的蓝、霓虹色、明亮的绿）无法在 CMYK 中复现。转换会把它们替换成最接近的可印刷颜色，结果往往显得更暗淡。 - CMYK → RGB——技术上可行，但结果取决于所使用的 ICC 配置文件。同一组 CMYK 数值，不同的转换工具可能给出略有差异的 RGB 值。 如果需要随时随地快速转换，一款能同时显示四种格式的手机取色应用是最快的工作流。Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 做的正是这件事——把相机对准任何颜色，就能并排看到 HEX、RGB、HSL 和 CMYK。轻点一下即可复制任意数值。iPhone (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 和 Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 均可使用。 常见错误 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 能从相机或照片中捕捉颜色，并同时显示 HEX、RGB、HSL 和 CMYK。轻点任意数值即可复制。它就像一台面向真实世界的颜色格式计算器——拍一次，四种格式全到手。 结论 网页和快速沟通用 HEX。应用开发和透明度用 RGB。设计系统和颜色调整用 HSL。印刷用 CMYK。 你不需要只选一种——你需要的是在每种场景下用对那一种。而当你需要在它们之间转换，或者想把真实世界的颜色一次性捕捉成四种格式时，手机取色应用就是最快的工具。 下载 iPhone 版 Color Picker Camera (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | 下载 Android 版 (https://play.google.com/store/apps/details?id=com.tomas.color_picker) -- Source: https://appstoryo.com/zh-hans/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) Cite as: Lubor Šimůnek (2026). HEX、RGB、HSL 与 CMYK：该用哪种颜色格式，什么时候用. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/zh-hans/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use