--- title: "HEX、RGB、HSL 与 CMYK：该用哪种颜色格式，什么时候用" author: "Lubor Šimůnek" date: 2026-03-21 modified: 2026-08-26 language: "zh-Hans" url: "https://appstoryo.com/zh-hans/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use" publisher: "AppStoryo (lapnito.cz s.r.o.)" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" category: "设计" keywords: ["设计", "article", "AppStoryo"] --- # HEX、RGB、HSL 与 CMYK：该用哪种颜色格式，什么时候用 > 四种颜色格式，四种不同的用途。本指南结合网页设计、印刷、社交媒体和应用开发的真实案例，讲清楚 HEX、RGB、HSL 和 CMYK 各自该在什么时候使用。 ## 同一种颜色，四种不同的语言 随便挑一种颜色——比如一抹温暖的珊瑚色。现在用四种方式来描述它： - **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: 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