什么是 CSS 颜色转换器？

它是一款浏览器内工具，能读取任意 HEX、rgb()/rgba()、hsl()/hsla() 或常见 CSS 颜色名称，并将其一起转换为 HEX、RGB 和 HSL，同时提供实时色块预览。

如何用本工具把 HEX 转为 RGB 和 HSL？

将像 #3b82f6 这样的十六进制代码粘贴到颜色框中，CSS 颜色转换器会立即在结果行中显示对应的 rgb() 和 hsl() 值。

CSS 颜色转换器支持透明度和 alpha 通道吗？

支持。rgba()、hsla() 以及带 alpha 值的 8 位十六进制都会被解析，并且 alpha 会在每种输出格式中保留。

我可以粘贴 CSS 颜色名称而不是代码吗？

可以，像 blue、teal、gold 和 indigo 这样的标准名称都会被识别并转换为 HEX、RGB 和 HSL。

它接受简写十六进制代码吗？

是的，像 #f00 或 #f00a 这样的 3 位和 4 位简写十六进制会在转换前自动展开。

我输入的颜色值会被上传到任何地方吗？

不会。CSS 颜色转换器完全在你的浏览器中运行，因此你输入的值在本地处理，绝不会离开你的设备。

CSS 颜色转换工具

在 HEX、RGB 和 HSL 之间转换，并实时显示色样。

你输入的每个颜色都在浏览器中本地转换，不会上传到任何服务器。

在检查可读性？试试对比度检查工具。

关于 CSS 颜色转换工具

这款 CSS 颜色转换器能一次性将任意颜色值转换为 HEX、RGB 和 HSL，并带有实时色块预览，让你在输入时即可看到确切的色调。粘贴十六进制代码、rgb() 或 hsl() 值，或像 blue、teal、gold 这样常见的 CSS 颜色名称，它会立即把输入归一化为这三种格式。它同样处理透明度，包括 rgba()、hsla() 和带 alpha 通道的 8 位十六进制。无论你是为设计令牌做 hex 转 rgb 运算、为样式表把 rgb 转 hex，还是在调色板时核对某个 hsl 值，它都会让每种格式保持同步。它专为每天都要处理多种颜色格式的前端开发者、设计师和 QA 工程师打造。所有处理都在你的浏览器本地完成，因此你输入的值不会离开你的设备。

功能特性

从单个输入一次性转换 HEX、RGB 和 HSL
识别常见的 CSS 颜色名称，如 blue、teal 和 gold
通过 rgba()、hsla() 和 8 位十六进制 alpha 支持透明度
实时色块预览随输入即时更新
接受 3 位和 4 位简写十六进制代码
归一化百分比和 0-255 的 RGB 通道值
无法解析某个值时显示清晰的内联错误
在你的浏览器本地处理

如何使用 CSS 颜色转换工具

在颜色输入框中输入或粘贴一个颜色。
可使用十六进制代码、rgb()、hsl() 或像 blue 这样的 CSS 颜色名称。
在结果行中查看转换后的 HEX、RGB 和 HSL 值。
查看输入旁的色块以预览确切的颜色。

示例

输入

#3b82f6

输出

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

一个十六进制值被转换为 RGB 和 HSL，并附带匹配的实时色块。

常见错误与故障排除

输入某个值后出现“无法解析该颜色”。 — 请使用有效的十六进制代码、rgb()/rgba()、hsl()/hsla() 或受支持的 CSS 颜色名称；多余的字符或缺失的括号会破坏解析。
像 “salmon” 这样的 CSS 颜色名称未被识别。 — 仅支持一组精选的常见名称。请改为输入等效的十六进制或 rgb() 值。
转换后丢失了 alpha。 — 请在输入中包含 alpha 通道，例如 rgba(0,0,0,0.5) 或像 #00000080 这样的 8 位十六进制，它会延续到所有格式中。
高于 255 的 RGB 值或百分比看起来不对。 — 通道值会被限制在有效范围内；请传入 0-255 的数字或 0%-100% 的百分比以获得预期结果。

常见问题

什么是 CSS 颜色转换器？: 它是一款浏览器内工具，能读取任意 HEX、rgb()/rgba()、hsl()/hsla() 或常见 CSS 颜色名称，并将其一起转换为 HEX、RGB 和 HSL，同时提供实时色块预览。
如何用本工具把 HEX 转为 RGB 和 HSL？: 将像 #3b82f6 这样的十六进制代码粘贴到颜色框中，CSS 颜色转换器会立即在结果行中显示对应的 rgb() 和 hsl() 值。
CSS 颜色转换器支持透明度和 alpha 通道吗？: 支持。rgba()、hsla() 以及带 alpha 值的 8 位十六进制都会被解析，并且 alpha 会在每种输出格式中保留。
我可以粘贴 CSS 颜色名称而不是代码吗？: 可以，像 blue、teal、gold 和 indigo 这样的标准名称都会被识别并转换为 HEX、RGB 和 HSL。
它接受简写十六进制代码吗？: 是的，像 #f00 或 #f00a 这样的 3 位和 4 位简写十六进制会在转换前自动展开。
我输入的颜色值会被上传到任何地方吗？: 不会。CSS 颜色转换器完全在你的浏览器中运行，因此你输入的值在本地处理，绝不会离开你的设备。