颜色转换器

在 HEX、RGB、HSL、HSV 和 CMYK 格式之间转换单个颜色,实时显示色块并提供可复制的输出。

所有颜色转换均在您的浏览器本地运行。不会将颜色值发送到我们的服务器。

颜色格式转换器

粘贴一个网页颜色并复制所需的格式。

检测到的格式
hex
HEX
#3366FF

支持 HEX、RGB、HSL、HSV 以及基于 sRGB 的简单 CMYK。

已转换的格式

CMYK 为 sRGB 的近似值,并非 ICC 打印色彩管理。

HEX
#3366FF
RGB
rgb(51, 102, 255)
HSL
hsl(225, 100%, 60%)
HSV
hsv(225, 80%, 100%)
CMYK
cmyk(80%, 60%, 0%, 0%)

快速示例

什么是颜色转换器?

颜色转换器将一个颜色值转换为在网页设计、CSS、设计系统和交接说明中常用的格式。单个品牌色在样式指南中可能以 HEX 存储,在设计令牌中以 RGB 表示,在主题编辑器中以 HSL 表示,而在面向印刷的说明中为 CMYK。本工具将这些表示汇集在一起,方便复制正确的版本,而无需手动重新计算。

本转换器设计为紧凑,专注于实用的 sRGB 网页颜色:HEX、RGB、HSL、HSV 以及简单的 CMYK 近似值。它并不试图替代专业的颜色管理软件或 ICC 配置文件工作流。

支持的颜色格式

Format Example 最佳用途
HEX #3366FF CSS、设计令牌、快速视觉交接
RGB rgb(51, 102, 255) CSS 值、画布操作、程序化色彩通道
HSL hsl(225, 100%, 60%) 通过色相、饱和度和明度进行主题调整
HSV hsv(225, 80%, 100%) 拾色器式的工作流程和视觉调优
CMYK cmyk(80%, 60%, 0%, 0%) 用于近似的印刷备注,而非最终印刷的色彩管理

重要限制

  • CMYK 输出是根据 sRGB 值计算的,仅为近似值。
  • CSS 命名颜色、渐变、Lab、LCH、OKLCH 和 Display-P3 超出此紧凑版 v1 的范围。
  • 可解析常见的带 alpha 的 HEX/RGB/HSL 形式,但原生色板预览显示不透明的基础颜色。
  • 不同的设计工具可能对 HSL、HSV 或 CMYK 值进行略微不同的四舍五入。

常见工作流程

CSS 清理

从样式指南粘贴 HEX 颜色,并复制对应的 RGB 或 HSL,用于组件状态、图表调色板或主题变量。

设计交接

当开发者、设计师或内容编辑使用不同工具时,保留多种颜色表示以便一起使用。

令牌审查

在将颜色令牌用于公共界面之前,检查其是否映射到预期的色相和饱和度。

印刷备注

生成用于讨论的近似 CMYK 值,最终印刷输出应由支持配置文件的工具完成。

常见问题

CMYK 输出是精确的吗?

不。CMYK 值是从 sRGB 简单转换得到的,适用于粗略记录。最终印刷工作取决于纸张、油墨、印刷机设置和 ICC 配置文件。

我可以粘贴 CSS 颜色函数吗?

支持常见的 RGB、HSL、HSV 和 CMYK 风格函数语法。较新的色彩空间(如 Lab、LCH、OKLCH 和 Display-P3)故意不在该紧凑工具的适用范围内。

该工具支持 alpha 透明度吗?

它可以解析常见的带 alpha 形式,如 RGBA、HSLA 和八位 HEX,但主色板和复制输出侧重于实用的不透明网页颜色。

为什么数值有时与其他设计工具不同?

小差异通常来自四舍五入规则或颜色管理假设。对于网页 sRGB 颜色,这些差异通常很小。

什么时候应改用对比度检查器?

当需要比较两种颜色的文本可读性时,请使用对比度检查器。本转换器仅在不同格式之间转换单个颜色。