转换HEX、RGB、HSL、HSV、CMYK — 实时预览、色调、色彩和可访问性对比
颜色代码是数字设计的通用语言。无论您是在构建网站、创建数字艺术、设计移动应用程序，还是选择品牌颜色，理解颜色代码都是必不可少的。屏幕上的每种颜色都是通过数学定义的，作为告诉显示器发出多少红色、绿色和蓝色光的值的组合 — 每个专业设计工具都以多种方言使用这种语言：HEX、RGB、HSL、HSV、CMYK等。
理解颜色代码和颜色空间
什么是颜色代码？
颜色代码是一种标准化的方式，用于将特定颜色表示为数值或数值集合。数字显示器通过以不同强度混合红色、绿色和蓝色光来创建任何可见颜色 — 这称为加法混色。HEX代码以16进制（十六进制）表示这些RGB值：#FF0000表示最大红色（FF），无绿色（00），无蓝色（00）。RGB表示法将相同的值表示为0到255之间的十进制整数。HSL和HSV将色相（颜色类型）与饱和度（颜色丰富度）和亮度或值（亮度）分开，这对人类来说更直观。CMYK用于印刷，采用青色、品红、黄色和黑色墨水进行减法混色。每种格式在数学上是等价的 — 它们都描述相同的颜色集合，只是以不同的符号表示，优化用于不同的使用案例。
颜色转换是如何计算的？
在颜色格式之间转换涉及精确的数学公式。HEX到RGB是直接的：每对十六进制数字（00-FF）使用16进制算术转换为十进制整数（0-255）。RGB到HSL需要将RGB值标准化为0-1，找到最大和最小通道值，计算增量，并根据哪个通道占主导地位推导色相，从增量相对于亮度推导饱和度，以及将最大值和最小值的平均值作为亮度。RGB到CMYK首先识别关键（黑色）成分为1减去最大RGB比率，然后从剩余的墨水中推导C、M、Y。CMYK到RGB则反转这一过程：每个通道计算为255乘以（1减去墨水分数）乘以（1减去黑色分数）。所有转换在可显示颜色的整个范围内保持数学精度。
为什么颜色代码对设计很重要？
一致使用颜色代码是专业设计工作的基础。没有精确的颜色代码，颜色可能在设计工具、浏览器和打印环境之间发生变化，破坏品牌一致性。网页设计师使用HEX和RGB代码确保在浏览器和设备之间实现像素完美的颜色匹配。印刷设计师依赖CMYK值向印刷商传达确切的墨水比率，因为屏幕和打印机使用完全不同的颜色混合方法。可访问性指南（WCAG）要求文本和背景颜色之间的最低对比比率，以确保低视力或色盲人士的可读性 — 检查对比比率是许多组织的法律要求。设计系统使用精确定义的颜色标记（通常是HEX或HSL值）以保持产品之间的一致性，HSL通常更受欢迎，因为它允许程序化调整，例如在不改变色相的情况下将颜色变得亮10%。
颜色空间的限制和考虑
虽然HEX、RGB、HSL和CMYK覆盖了绝大多数实际设计需求，但有一些重要的限制需要理解。RGB颜色模型是设备依赖的 — 相同的RGB值在不同屏幕上可能看起来不同，原因在于显示器校准、颜色配置文件（sRGB与Display P3）和环境光照的变化。此工具中显示的CMYK值是标准sRGB到CMYK转换的近似值；专业印刷工作通常需要使用Adobe Illustrator或InDesign等工具进行颜色配置文件管理，以实现准确的潘通匹配。140种CSS命名颜色由CSS颜色规范定义，并且是精确的 — 然而，“最近命名颜色”功能使用RGB空间中的欧几里得距离，这是感知上的近似。现代颜色空间如OKLCH和OKLAB（未包含在此）提供更感知均匀的渐变，但需要浏览器支持CSS颜色4级。
如何使用颜色代码图表
输入您的颜色
直接在 HEX 字段中输入 HEX 代码（例如，#FF5733），输入十进制 RGB 值（每个 0–255），输入 HSL 或 CMYK 值，或点击颜色色板以打开视觉颜色选择器。您也可以点击“随机颜色”以获得即时灵感。所有输入方法在您输入时会实时更新结果。
查看所有转换格式
结果面板同时显示您的颜色的 HEX、RGB、HSL、HSV、CMYK 和整数格式。每种格式都有一个复制按钮，以便您可以准确获取所需内容。使用“复制所有”按钮一次性复制每种格式，或导出为 CSV 以便文档记录。
生成阴影、色调并检查可访问性
向下滚动结果以查看 9 种阴影（更暗的变体）和 9 种色调（更浅的变体）——点击任意色板以将该变体加载到转换器中。WCAG 对比部分显示与白色和黑色的对比比例，并带有 AA/AAA 通过指示器以验证您的颜色是否符合可访问性标准。
浏览命名颜色参考
切换到“命名颜色图表”选项卡以探索所有 140 种按家族（红色、绿色、蓝色、紫色等）组织的 CSS 命名颜色。每一行显示颜色色板、CSS 名称、HEX 代码和 RGB 值。点击任意行上的“使用颜色”以立即将其加载到转换器中。
常见问题
HEX 和 RGB 颜色代码有什么区别？
HEX 和 RGB 使用不同的表示系统描述完全相同的颜色。RGB 将红色、绿色和蓝色通道分离为三个从 0 到 255 的十进制整数。例如，rgb(59, 130, 246) 是一种中等蓝色。HEX 以十六进制（基数 16）表示这三个相同的值：59 变为 3B，130 变为 82，246 变为 F6，得到 #3B82F6。HEX 更紧凑，是 HTML 和 CSS 的标准格式。RGB 在数学上更易于阅读，并在 CSS 以及图形设计软件中使用。两者是等价的——任何可以用一种格式表达的颜色都可以用另一种格式表达。
为什么 HSL 在设计调整中比 HEX 或 RGB 更好？
HSL（色相、饱和度、亮度）将纯色身份（色相，0–360 度）与其鲜艳程度（饱和度）和明暗程度（亮度）分开。这使得它在设计工作中更直观。例如，要使颜色变得 20% 更亮，您只需将 L 值增加 20——在 HEX 或 RGB 中，相同的操作需要分别计算所有三个通道。HSL 也是人类自然描述颜色的方式：“一种明亮的中浅蓝色”直接映射到高饱和度和中等亮度的蓝色色相。CSS 原生支持 hsl() 表示法，设计工具如 Figma 在内部使用类似 HSL 的模型。许多设计系统因此以 HSL 定义颜色令牌。
什么是 CMYK，何时使用它？
CMYK 代表青色、品红色、黄色和黑色（Key）——用于彩色印刷的四种墨水颜色。与 RGB 不同，RGB 是通过叠加光线（加法混合）来增加光线，而 CMYK 通过叠加吸收特定波长的墨水来减去光线（减法混合）。这就是为什么在屏幕上看起来鲜艳的颜色在打印时可能显得更暗淡——RGB 色域（可显示颜色范围）比 CMYK 打印能够再现的范围更广。在准备专业打印文件时使用 CMYK 值，包括名片、宣传册、海报和包装。大多数专业印刷店和设计软件（Adobe Illustrator、InDesign）在打印项目中使用 CMYK。对于网页和屏幕设计，请坚持使用 HEX 或 RGB。
什么是 WCAG 对比比例，为什么重要？
WCAG（网页内容可访问性指南）对比比例衡量前景色和背景色对低视力或色盲人士的可见程度。它是通过相对亮度计算的——一种感知亮度的度量。1:1 的比例意味着没有对比（相同颜色），而 21:1 是最大对比（黑色在白色上）。WCAG AA 标准要求正常文本为 4.5:1，大文本为 3:1。WCAG AAA 要求 7:1。满足这些标准确保您的网站对视觉障碍用户可读，并且通常是符合 ADA（美国残疾人法案）和 WCAG 2.1/2.2 标准的法律要求。该工具会自动计算您输入的任何颜色与白色和黑色的对比比例。
阴影和色调是如何生成的？
阴影是通过将颜色与黑色混合而创建的——在数学上，通过将每个 RGB 通道乘以小于 1 的因子。例如，红色（255, 0, 0）的 50% 阴影将是（128, 0, 0）。色调是通过与白色混合而创建的——将原始通道值混合到 255。红色的 50% 色调将是（255, 128, 128）。该工具生成 9 种均匀分布的阴影（从接近黑色到原始颜色）和 9 种均匀分布的色调（从原始颜色到接近白色），总共提供 19 种变体。这些条带对于构建设计系统调色板非常有用——例如，Tailwind CSS 为其 22 个颜色家族使用类似的 10 阴影比例，从 50（最浅）到 950（最暗）。
什么是 140 种 CSS 命名颜色？
140 种 CSS 命名颜色是一组在 CSS 颜色规范（CSS Colors Level 4）中定义的颜色关键字。它们包括经典的网页颜色，如“红色”、“蓝色”和“绿色”，以及描述性名称，如“矢车菊蓝”、“淡紫色”和“木瓜奶油”。每个名称映射到一个特定的 HEX/RGB 值，在所有浏览器和操作系统中是一致的。它们起源于 Unix 环境中使用的 X11 颜色系统，后来被标准化为 CSS。虽然对于常见颜色很方便，但命名颜色仅覆盖 1670 万种 24 位 RGB 可表示颜色的一小部分。对于精确的设计工作，始终使用 HEX 或 RGB 值，而不是依赖命名颜色，因为名称可能会产生误导（例如，“灰色”和“灰色”略有不同）。