输入颜色
视觉颜色选择器
输入一个6位的HEX代码，可以带或不带#前缀
输入要转换的颜色
输入HEX代码，输入RGB或HSL值，使用颜色选择器，或点击“随机颜色”开始。所有格式实时更新。
如何使用颜色代码图表
输入您的颜色
直接在 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 值，而不是依赖命名颜色，因为名称可能会产生误导（例如，“灰色”和“灰色”略有不同）。