颜色代码转换器全格式

欢迎使用 颜色代码转换器全格式，这是一个免费的在线工具，可以一次性将任何颜色值转换为所有常用格式。粘贴 HEX 代码、RGB 三元组、HSL 或 HSV 定义、CMYK 四元组，甚至 CSS 命名颜色 — 即可立即读取等效值、查看实时预览色块、检查 WCAG 无障碍对比度，并探索由互补色、三色、近似色、色调和阴影生成的专业设计师色板。

为什么要使用一体化颜色转换器？

互联网上的大多数颜色转换器只能处理单一方向（HEX 到 RGB，或 RGB 到 CMYK），迫使您在需要全面信息时串联使用多个工具。此转换器在单个字段中接受所有常见格式，自动检测您输入的格式，并同时返回所有五种格式及实时预览 — 在 Web、移动端、印刷和设计工具之间架起桥梁时，为您省去了多个步骤。

支持的输入格式

HSL 和 HSV 颜色模型有什么区别？

HSL 和 HSV 都通过三个直观的通道描述颜色 — 色相、饱和度和第三个与亮度相关的值 — 但它们在第三个通道上有所不同。

• HSL — 色相、饱和度、亮度：亮度范围从 0%（纯黑）到 50%（该色相最鲜艳的版本）再到 100%（纯白）。HSL 在 CSS 中更受青睐，因为它使颜色的变亮或变暗变得对称且可预测。
• HSV / HSB — 色相、饱和度、明度 (亮度)：明度范围从 0%（纯黑）到 100%（该色相最饱满、最饱和的版本）。HSV 是 Photoshop、Figma 和大多数桌面设计工具中颜色选择器背后的模型。

例如，完全饱和的红色在 HSL 中是 hsl(0, 100%, 50%)，而在 HSV 中是 hsv(0, 100%, 100%)。同一种颜色处于两种不同的心理模型中 — 两者都很有用，取决于您是像 CSS 作者还是像画家一样思考。

为什么我的 CMYK 值看起来与打印软件略有不同？

RGB 是屏幕使用的加色模型，而 CMYK 是打印机使用的减色模型。此工具执行的数学转换是一个快速近似值，不包含任何 ICC 颜色配置文件、油墨覆盖率限制或纸张特定调整。对于生产印刷工作，请始终依赖设计软件的色彩管理 CMYK 配置文件（例如 US Web Coated SWOP v2 或 Coated FOGRA39）。当您只需要一个在早期设计讨论中“足够接近”的 CMYK 四元组时，请使用此转换器作为快速参考。

WCAG 对比度检查是如何工作的？

Web 内容无障碍指南（WCAG）根据两种颜色的相对亮度定义了它们之间的对比度 — 这是一种感知亮度模型，对绿色的权重高于红色，对红色的权重高于蓝色。对比度从 1:1（完全没有对比）到 21:1（纯黑对纯白）。

• AAA — 比例 ≥ 7:1，满足正文文本最严格的无障碍级别
• AA — 比例 ≥ 4.5:1，大多数法规中正文文本的最低要求
• AA Large — 比例 ≥ 3:1，对于大号文本（18pt+ 或 14pt 加粗）和图形 UI 元素已足够
• Fail (失败) — 比例 < 3:1，请勿将此组合用于文本

该工具计算针对纯白色和纯黑色的对比度，然后在将该色相用作背景时，突出显示更好的选择作为默认文本颜色。

转换器会生成色板吗？

是的。每次转换后，该工具都会根据相同色相构建设计师色板，包括：

• 互补色 — 色轮上正对着的颜色（色相旋转 180°），适用于高对比度强调
• 三色 — 两个均匀间隔 120° 的颜色，平衡且充满活力
• 近似色 — ±30° 的相邻色相，适用于和谐的渐变和背景
• 色调 — 三种较浅的变体（相同色相，更高亮度）
• 阴影 — 三种较深的变体（相同色相，更低亮度）

点击任何色板色块即可立即将其加载到转换器中作为新的起点 — 非常适合快速迭代品牌颜色、图标集或 UI 主题。

如何使用此工具

1. 输入或选择颜色 — 在输入字段中键入任何值（HEX、RGB、HSL、HSV、CMYK 或 CSS 颜色名称），或点击小颜色块以打开浏览器的原生颜色选择器。
2. 转换 — 点击转换按钮。该工具会自动检测您提供的格式并计算所有其他格式。
3. 复制所需内容 — 点击格式值旁边的任何一键复制按钮。按钮会短暂显示一个复选标记，以确认该值已存在于您的剪贴板中。
4. 检查无障碍性 — 查看针对纯白色和纯黑色的 WCAG 对比度，以确认该颜色作为文本或背景是否具有可读性。
5. 探索色板 — 点击设计师色板部分的任何色块进行转换，无需离开页面即可扩展您的设计探索。

实际用例

对于 Web 开发人员

• 将 Figma 稿件中的 HEX 转换为 hsl()，以便与 CSS 自定义属性和现代主题系统一起使用
• 直接从品牌 HEX 颜色生成用于半透明叠加层的 rgba() 值
• 在交付前验证品牌颜色在白色背景上是否符合 WCAG AA 标准

对于平面设计师

• 将网站上的 CSS 颜色转换为印刷模型的 CMYK 近似值
• 从单个起始色相构建色调阶梯（色调和阴影）
• 无需离开浏览器即可找到互补或三色强调色

对于 UI 和产品设计师

• 在记录设计令牌时，在 HSV（Figma 选择器）和 HSL（CSS）之间进行对照转换
• 自动为任何背景识别最佳文本颜色（黑色 vs 白色）
• 通过结果页面的 URL 快速书签或分享转换后的颜色

获得最佳结果的提示

• 灵活使用分隔符 — 解析器接受括号内的逗号、空格或斜杠，因此 rgb(79 70 229) 和 rgb(79, 70, 229) 效果一样好。
• 在适当的地方使用百分比 — rgb(31%, 27%, 90%) 是有效的；工具内部会将百分比转换为 0–255。
• 尝试 CSS 命名颜色 — 支持 140 多种名称，包括 rebeccapurple 等现代添加的名称。
• 观察通道条 — 红色/绿色/蓝色和 CMYK 通道的视觉分解让您轻松查看哪些油墨在颜色的印刷版本中占主导地位。
• 仅将 CMYK 作为参考 — 在色彩管理的印刷软件中打开结果，以获得最终、准确的值。

常见问题

输入 HEX 值时需要包含 # 符号吗？

不需要。#4f46e5 和 4f46e5 均被接受。前导 # 是可选的。

支持 4 位和 8 位 HEX 值（带 Alpha）吗？

解析器会接受它们，但 Alpha 通道在转换过程中会被丢弃，因为经典形式的 RGB、HSL、HSV 和 CMYK 不携带 Alpha。该工具仅专注于颜色部分。

我可以分享或书签已转换的颜色吗？

是的。表单通过 GET 提交，因此 URL 包含您转换的颜色。转换后复制页面 URL 即可分享或书签准确的结果页面。

为什么有些 HEX 值以大写字母显示？

输出将 HEX 规范化为大写（例如 #4F46E5），这是许多设计和品牌风格指南中使用的惯例。如果您愿意，可以将其粘贴回小写 — 两者是等效的。

它在移动设备上可以工作吗？

是的。界面完全采用响应式设计，表单、色板和对比度卡片在较小屏幕上会重排为单列布局，以提供舒适的触摸体验。

其他资源

• HSL and HSV - 维基百科
• CMYK 颜色模型 - 维基百科
• WCAG 2.1 对比度 (最低) 要求