三种格式，一个视图
HEX、RGB 和 HSL 同时可见且可编辑 — 更改其中一个，其他会即时更新。
HEX ↔ RGB ↔ HSL 转换器
在 HEX、RGB 和 HSL 格式之间转换颜色。实时预览、快速预设、复制 CSS 可用值。100% 客户端运行，无需上传。
广告
广告
颜色转换器在网页设计和数字图形中使用的不同格式表示之间转换颜色：HEX（#RRGGBB）、RGB（0-255, 0-255, 0-255）、HSL（色相、饱和度、亮度）和HSV（色相、饱和度、明度）。每种格式以不同方式描述同一颜色——HEX对CSS更紧凑，HSL对创建变体更直观，RGB直接映射到显示硬件。此工具在您输入时即时转换，完全在浏览器中完成。
在浏览器中即时转换颜色
HEX、RGB和HSL——三种格式在您输入或选择时实时更新。一键复制CSS可用值。无需上传，无需注册，没有限制。
实时转换
CSS可用输出
免费无限
使用步骤
- 1
选择颜色
键入 HEX 值，调整 RGB/HSL 数字输入，或点击快速预设。
- 2
查看实时预览
顶部的色块会即时更新以显示当前颜色。
- 3
复制任意格式
使用 HEX、RGB 或 HSL 旁边的“复制”按钮复制 CSS 可用值。
为什么要使用这个颜色转换器？
CSS 可用输出
复制按钮为您提供 `#RRGGBB`、`rgb(r, g, b)` 或 `hsl(h, s%, l%)` 字符串，可直接粘贴到 CSS 中。
快速预设
从 Tailwind CSS 默认调色板或纯黑/纯白开始，然后使用滑块进行微调。
广告
了解颜色格式
HEX、RGB、HSL和HSV详解
HEX（#RRGGBB）是网页设计中最紧凑的颜色格式。每对十六进制数字（00-FF）分别表示红、绿、蓝的强度。值00表示该通道关闭（黑色），FF表示满强度。例如，#FF0000是纯红色，#00FF00是纯绿色，#FFFFFF是白色。HEX是CSS、HTML和设计工具中的标准格式，因为它简短、明确且易于复制粘贴。简写表示法（#RGB）适用于每对都相同的情况，如#F00表示红色。
RGB对相同的三个通道使用十进制值（0-255）。这是显示硬件原生理解的格式——LCD或OLED屏幕上的每个像素都有红、绿、蓝子像素，可以设置为256个亮度级别。RGB也用于JavaScript的canvas API（ctx.fillStyle = 'rgb(255, 0, 0)'）和图像处理库。RGBA添加了alpha通道（0-1或0-255）用于透明度。
HSL（色相、饱和度、亮度）以对人类更直观的方式描述颜色。色相是颜色本身，以色轮上的角度测量（0掳=红色，120掳=绿色，240掳=蓝色）。饱和度是颜色的鲜艳程度（0%=灰色，100%=完全着色）。亮度是暗或亮（0%=黑色，50%=正常，100%=白色）。HSL使创建基础颜色的浅色（增加亮度）、深色（减少亮度）和色调（减少饱和度）变得容易。HSV（色相、饱和度、明度）类似，但使用明度而非亮度——明度=100%表示满亮度颜色，而亮度=100%表示白色。
广告
何时使用每种格式
在CSS和HTML中使用HEX——它是支持最广泛的格式且书写最短。在需要以编程方式操作颜色通道时（例如通过平均RGB值混合两种颜色）或需要alpha透明度时使用RGB。在需要创建颜色变体时使用HSL——例如通过增加亮度10%生成按钮的悬停状态，或通过保持色相恒定并改变饱和度和亮度来创建单色方案。
HSL在CSS自定义属性（CSS变量）中特别强大。您可以定义 --hue: 210，然后在整个样式表中使用 hsl(var(--hue), 70%, 50%)。更改单个变量即可更新整个配色方案——对于HEX或RGB来说，如果不重新计算每个值是不可能的。这就是现代CSS框架如Tailwind v4正在向基于HSL的颜色系统转变的原因。
广告
常见用例
使用 HSL 设计
通过选择基础色相并调整亮度来构建调色板 — 在 HSL 中比在 RGB 中容易得多。
将 Figma 颜色转换为 CSS
Figma 通常显示 HEX；CSS 有时需要 RGB 或 HSL（用于 `color-mix` 或不透明度）。一键获取确切的字符串。
无障碍检查
将此工具与对比度检查器配合使用，以验证您的颜色选择是否满足 WCAG 要求。
主题微调
快速将 Tailwind 预设替换为自定义品牌色，并将生成的 HEX 复制到您的配置中。
与其他颜色转换器的对比
流行的颜色转换工具的并排对比。
| 功能 | NovaTools | RapidTables | W3Schools |
|---|---|---|---|
| HEX 鈫?RGB 鈫?HSL 鈫?HSV | 所有格式 | 有限 | |
| 输入时实时预览 | 即时 | 提交按钮 | |
| 取色器集成 | EyeDropper API | ||
| 隐私（无上传） | 100% 本地 | 服务器端 | |
| 复制CSS可用值 | |||
| 离线可用 |
大多数在线颜色转换器在服务器上处理转换。我们的工具在浏览器中执行所有计算——您的颜色值绝不会传输或存储。
常见问题
支持哪些颜色格式？
HEX（例如 `#2563EB`）、RGB（例如 `rgb(37, 99, 235)`）和 HSL（例如 `hsl(217, 83%, 53%)`）。当您更改任意值时，三者会同时更新。
RGB 和 HSL 有什么区别？
RGB 通过红、绿、蓝分量描述颜色。HSL 通过色相（色轮角度）、饱和度（强度）和亮度描述颜色。HSL 对设计师更直观，因为您可以单独更改亮度而无需重新计算其他值。
该工具支持 3 位 HEX 简写吗？
支持。输入 `#fff` 会自动扩展为 `#FFFFFF`。输出始终使用 6 位形式以获得最大兼容性。
我可以复制 CSS 可用值吗？
可以。每种格式旁边的“复制”按钮会为您提供 `#2563EB`、`rgb(37, 99, 235)` 或 `hsl(217, 83%, 53%)` — 可直接粘贴到 CSS 中。
如果我输入无效的 HEX 值会怎样？
HEX 字段是自由文本，您可以输入任何内容，但只有 HEX 有效时 RGB 和 HSL 值才会更新。这让您可以尝试而不丢失之前的颜色。
如何将 Tailwind CSS 颜色转换为 RGB 或 HSL？
只需在HEX字段中输入Tailwind的HEX值（例如 blue-600 的 #2563EB）。RGB和HSL值会即时更新，您可以一键复制。这在需要将Tailwind颜色用于需要RGB或HSL的场景中非常有用——例如 color-mix(in srgb, rgb(37, 99, 235) 50%, transparent) 或 hsl(217, 83%, 53% / 0.5) 用于不透明度。您也可以使用内置的Tailwind预设调色板从任何标准Tailwind颜色开始。
我可以使用此工具构建调色板吗？
可以。HSL特别适合调色板生成，因为您可以固定色相并改变亮度来创建同一颜色的浅色和深色变体。例如，将色相设为217，饱和度设为83%，然后通过将亮度改为20%、40%、53%、70%和90%来创建五个变体。每个变体都可以复制为HEX值。将此工具与对比度检查器配合使用，以验证您的文字-背景组合是否满足WCAG无障碍标准。
此工具对于专业设计工作准确吗？
准确。转换数学遵循W3C CSS颜色模块Level 4规范，与浏览器内部使用的标准相同。这意味着您从此工具复制的值将在浏览器、Figma和Sketch等设计工具以及Photoshop等图像编辑器中以相同方式渲染。工具不应用伽马校正或色彩空间转换（sRGB到Display P3），因此所有值都在标准sRGB色彩空间中，这是网页设计的默认设置。
您的隐私是我们的优先事项
此工具完全在您的浏览器中运行。您的文件不会被上传到服务器、存储或分析。
- 我们不上传、不存储、不分析您的文件。
- 您处理的一切都保留在您的设备上。
- 没有服务器端处理、没有云存储、没有分析。
即使您的互联网连接断开，您的文件也是安全的。
你可能还喜欢
继续浏览这个主题
相关指南
广告