HEX vs RGB vs HSL vs CMYK：何时使用哪种颜色格式

同一种颜色，四种不同的语言

看看这个珊瑚色。它是完全相同的颜色，但可以用四种不同的方式书写：

每种格式都有其用途。选择错误的格式不会破坏你的项目，但选择正确的格式会节省时间、避免转换错误，并在所有平台上保持品牌一致性。

本指南通过实例和快速参考表，准确说明何时使用每种格式。

HEX：网页标准

是什么： 一个6位十六进制代码，表示红、绿、蓝值。始终以 # 开头。例如：#FF6F61 表示红色255、绿色111、蓝艨97。

何时使用 HEX

• CSS 样式表 — 这是大多数网页开发者使用和期望的默认格式。
• 设计工具 — Figma、Sketch 和 Canva 在颜色选择器中突出显示 HEX。
• 品牌指南 — 大多数品牌指南以 HEX 列出颜色，因为它简短且易于复制粘贴。
• 沟通 — 当你需要在 Slack 或电子邮件中分享精确颜色时，HEX 被普遍理解。

何时不使用 HEX

• 需要透明度时 — HEX 不原生支持 alpha。可以使用8位 HEX（#FF6F6180），但工具之间的支持不一致。
• 程序化颜色操作 — 加亮或加深 HEX 颜色需要先进行转换。
• 印刷设计 — 印刷使用 CMYK。将 HEX 发送给印刷厂会保证颜色不匹配。

实例：CSS 变量

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB：屏幕颜色模型

是什么： 三个数字（0–255）表示红、绿、蓝 — 屏幕发出的实际光色。例如：rgb(255, 111, 97)。

何时使用 RGB

• 透明度（RGBA） — rgba(255, 111, 97, 0.5) 可以精确控制不透明度。这是 CSS 中半透明颜色最广泛支持的方法。
• 应用开发 — Swift、Kotlin 和 Flutter 内部使用 RGB 值。使用 RGB 工作可避免不必要的转换。
• LED 照明和 IoT — LED 灯带和智能灯泡期望 RGB 值。
• 颜色数学 — 混合两种颜色或在它们之间插值在 RGB 中是简单的算术。

何时不使用 RGB

• 印刷设计 — RGB 值不直接对应油墨混合。发送到印刷厂前始终转换为 CMYK。
• 调整饱和度或亮度 — 在 RGB 中改变饱和度需要复杂的公式。HSL 更简单。

实例：React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL：设计师的格式

是什么： 三个值 — 色相（0–360°，色轮上的位置）、饱和度（0–100%%，从灰色到鲜艳）和亮度（0–100%%，从黑到白）。例如：hsl(5, 100%%, 69%%)。

何时使用 HSL

• 设计系统 — 保持色相和饱和度不变，只改变亮度，即可创建完整的颜色谱。
• 深色模式 — 生成深色变体只需降低亮度。无需猜测，无需公式。
• 程序化颜色生成 — 需要12种等距颜色？保持饱和度和亮度不变，色相每次30°。
• 无障碍设计 — 能直接读取亮度值，检查对比度更直观。

何时不使用 HSL

• 团队沟通 — 大多数人不以色相/饱和度/亮度思考。对话中 HEX 或 RGB 更清晰。
• 印刷工作流 — HSL 在印刷中没有直接等价物。先转换为 CMYK。

实例：使用 Tailwind CSS 创建颜色谱

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK：印刷格式

是什么： 四个值 — 青、品红、黄和黑（Key）。与 RGB（加光）不同，CMYK 是减色的 — 描述多少油墨从白纸上吸收光线。例如：0, 56, 62, 0。

何时使用 CMYK

• 所有印刷品 — 名片、海报、包装、杂志。如果经过印刷厂，必须是 CMYK。
• InDesign 和印刷工作流 — 从一开始就用 CMYK 设计，避免色域外颜色的意外。
• 打样 — 屏幕打样模拟打印机输出 — 这只有在源颜色已经是 CMYK 时才有效。

何时不使用 CMYK

• 屏幕 — 显示器使用光（RGB）。CMYK 值需要转换，转换始终是近似的。
• 照片编辑 — 编辑时用 RGB 工作。仅在印刷时作为最后一步转换为 CMYK。

实例：从 Illustrator 导出

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

快速参考表

速查表：项目类型 → 颜色格式

转换：你需要知道的

• HEX ↔ RGB — 无损转换。是同一颜色模型的不同表示。#FF6F61 完全等于 rgb(255, 111, 97)。
• RGB ↔ HSL — 无损转换。是同一颜色集的不同数学表达。
• RGB → CMYK — 有损转换。CMYK 的色域小于 RGB。屏幕上鲜艳的颜色在印刷时往往变暗淡。
• CMYK → RGB — 结果取决于使用的 ICC 配置文件。相同的 CMYK 值在不同配置文件下可能看起来不同。

Color Picker Camera 应用同时显示四种格式 — 将手机对准现实世界的任何颜色，即时获取 HEX、RGB、HSL 和 CMYK。无需手动转换。

常见错误（以及如何避免）

1. 将 RGB 发送到印刷厂

打印机混合油墨，不是光。如果发送 RGB 文件，印刷厂软件会猜测 CMYK 转换，结果很少与屏幕上看到的一致。始终从一开始就用 CMYK 设计印刷品。

2. 使用 HEX 实现透明度

8位 HEX（#FF6F6180）存在，但许多工具不识别它。使用 rgba() 或 hsla() 获得可靠的透明度。

3. 仅用 HEX 构建设计系统

从 HEX 代码生成浅色和深色色调需要反复试验。HSL 允许直接改变亮度，使颜色谱可预测且一致。

4. CMYK → HEX 转换时期望相同颜色

CMYK 的色域小于 RGB/HEX。转回时颜色被近似，可能看起来暗淡或略有变化。始终进行视觉验证。

常见问题

HEX 和 RGB 有什么区别？

在可用颜色方面没有区别。两者都覆盖相同的1670万种颜色。HEX 只是用十六进制表示 RGB 值的更短方式。#FF6F61 = rgb(255, 111, 97)。唯一的实际区别是透明度支持：RGB 内置了 RGBA，而8位 HEX 支持有限。

什么时候应该使用 CMYK？

当你的设计需要物理印刷时：名片、小册子、海报、包装。如果只在屏幕上查看，使用 HEX、RGB 或 HSL。

HSL 比 RGB 更好吗？

不是更好，是对设计师来说更容易理解。如果需要创建配色方案、生成深色模式主题或检查无障碍对比度，HSL 更直观。对于框架期望 RGB 值的应用开发，使用 RGB。

有没有同时显示4种颜色格式的应用？

有。Color Picker Camera 让你将手机对准现实世界的任何颜色，在一个屏幕上即时查看 HEX、RGB、HSL 和 CMYK 值。支持 iOS 和 Android。

总结

网页用 HEX。应用和屏幕用 RGB。设计系统和主题用 HSL。印刷用 CMYK。

如果你处理现实世界的颜色 — 刷过漆的墙、布料样本、招牌上的标志 — Color Picker Camera 是你的现实世界颜色计算器。对准、捕捉、即时获取四种格式。

下载 iOS 版 下载 Android 版