免费在线颜色转换器 — HEX, RGB, HSL, CMYK

即时在 HEX、RGB、HSL 和 CMYK 格式之间转换颜色。这款免费颜色转换器提供实时预览和双向转换功能，适用于网页设计、印刷和图形设计工作流程。

什么是颜色转换器？

颜色转换器在数字和印刷设计中使用的不同格式之间转换颜色值。网页开发者使用 HEX 和 RGB，设计师通常使用 HSL 进行直观的颜色调整，而印刷生产则依赖于 CMYK。

无需手动计算转换或打开设计工具，这款转换器一次性为您提供所有格式——实时预览让您直观看到正在处理的颜色。

如何使用此颜色转换器

输入颜色 — 键入 HEX 值，或输入 RGB、HSL 或 CMYK 数字。
查看所有格式 — 所有其他格式会立即更新。
复制所需内容 — 点击任何格式旁边的复制按钮。
使用预览 — 颜色色块显示精确颜色及其对比度标签。

关键功能

功能	优势
支持四种格式	HEX、RGB、HSL、CMYK — 一次性全部显示
双向转换	编辑任何格式，其余格式会自动更新
实时预览	直接查看精确颜色并显示其 HEX 标签
按格式复制按钮	每种格式一键复制
印刷就绪的 CMYK	获取印刷生产的准确 CMYK 值

颜色格式解析

HEX

十六进制颜色表示法使用六个字符（0-9、A-F）表示红色、绿色和蓝色值：

#FF0000 = 红色最大值
#3B82F6 = Tailwind CSS 的蓝色-500

常见于 CSS、HTML 和设计工具。始终以 # 开头。

RGB（红、绿、蓝）

加法颜色模型，每个通道范围从 0 到 255：

rgb(255, 0, 0) = 纯红色
rgb(59, 130, 246) = Tailwind 蓝色-500

用于 CSS（rgb() 函数）和大多数编程场景。

HSL（色相、饱和度、亮度）

一种更直观的颜色调整模型：

色相（0-360）：色轮上的位置（0=红色，120=绿色，240=蓝色）
饱和度（0-100%）：颜色强度（0%=灰色，100%=全色）
亮度（0-100%）：亮度（0%=黑色，50%=正常，100%=白色）

用于 CSS（hsl() 函数），设计师偏爱用于创建颜色调色板。

CMYK（青、品红、黄、黑）

印刷生产中使用的减法颜色模型：

每个值范围从 0% 到 100%
表示纸张上的油墨覆盖率
无法直接用于 CSS（浏览器内部使用 RGB）

准备专业印刷设计时必不可少。

颜色格式对比

格式	使用场景	示例	范围
HEX	网页 CSS、HTML	`#3B82F6`	每个通道 00-FF
RGB	网页 CSS、编程	`rgb(59, 130, 246)`	每个通道 0-255
HSL	设计、CSS	`hsl(217, 91%, 60%)`	H: 0-360, S/L: 0-100%
CMYK	印刷生产	`cmyk(76%, 47%, 0%, 4%)`	每个通道 0-100%

实际应用场景

网页开发

直接将 HEX 或 rgb() 值复制到 CSS 中。HSL 非常适合生成颜色比例（例如，调整亮度用于悬停状态）。

设计系统

在格式之间转换品牌颜色。设计师从 Figma 提供 HSL — 您需要 HEX 用于 CSS。一键完成。

印刷生产

在发送给打印机前将屏幕颜色转换为 CMYK。请注意，某些鲜艳的 RGB 颜色无法在 CMYK 中完美再现（CMYK 的“色域”更小）。

可访问性

使用 HSL 的亮度值检查颜色是否符合 WCAG 对比度要求。亮度接近 50% 的颜色通常具有最高的感知对比度。

颜色工作技巧

技巧	说明
使用 HSL 创建调色板	固定色相，调整饱和度和亮度以创建和谐的颜色比例。
简写 HEX 有效	`#3BF` 是 `#33BBFF` 的简写。此转换器接受两种格式。
注意 CMYK 色域	明亮的蓝色和绿色在转换为 CMYK 时通常会偏移。始终进行印刷样稿检查。
CSS 支持所有格式	现代 CSS 支持 HEX、`rgb()`、`hsl()`，甚至 `hwb()`。使用最易读的格式。
透明度处理	对于透明度，使用 `rgba()` 或 8 位 HEX 格式（`#3B82F680`）。

常见问题

为什么我的 CMYK 颜色在屏幕上看起来不同？

屏幕显示颜色使用 RGB（加法），而印刷使用 CMYK（减法）。某些 RGB 颜色（尤其是鲜艳的蓝色、绿色和橙色）超出 CMYK 色域，在印刷时会显得更暗淡。

我可以将此工具用于 CSS 自定义属性吗？

可以。复制 HEX、rgb() 或 hsl() 值并用于 CSS 变量：--primary: #3b82f6;。

RGB 和 HSL 有什么区别？

RGB 用红、绿、蓝光的量表示颜色。HSL 用色相（色轮上的位置）、饱和度（强度）和亮度（明暗）表示颜色。HSL 更适合调整颜色 — 仅需增加 L 值即可使颜色更亮。

此转换器支持透明度吗？

此转换器处理完全不透明的颜色。对于透明度，请单独使用 CSS rgba() 或 8 位 HEX 格式。

转换是否准确？

HEX、RGB 和 HSL 的转换是数学精确的。CMYK 转换对大多数颜色是准确的，但请注意 RGB 到 CMYK 的映射取决于颜色配置文件（sRGB、Adobe RGB 等），此工具使用标准近似值。

此工具会存储我的数据吗？

不会。所有计算在您的浏览器中完成。不会将任何颜色数据发送到服务器。

颜色转换器