正在准备工作区…
输入
正在准备工作区…
输出
结果将显示在这里。
使用方法
- 输入 HEX、RGB、HSL 或 CSS 命名颜色。
- 检查色块与转换后的数值。
- 使用各自的“复制”按钮复制 HEX、RGB 或 HSL。
一种颜色，三种 CSS 写法
设计令牌可能使用 HEX，而样式表使用 RGB 或 HSL。转换颜色写法，即可复用同一种颜色，无需重新选色。
色块和三种输出会同步更新。rebeccapurple 等命名颜色也能转换为 CSS 数值。
选择颜色写法
HEX 适合简洁的设计令牌；RGB 展示红、绿、蓝通道；HSL 分别表示色相、饱和度和明度。这些是颜色的不同表达方式，并非不同的图像格式。
支持短格式与完整 HEX。可通过支持的 HEX、RGB 或 HSL 语法提供 Alpha 通道。
输入
#2563eb结果
rgb(37, 99, 235)同一种不透明 sRGB 颜色的 HEX 与 RGB 表示。
透明度与精度
透明颜色在转换后会保留 Alpha 通道，其外观仍取决于下方的背景。
工具处理 sRGB 色值，显示时会舍入。不支持 Lab、OKLCH 或 CSS color() 函数的广色域转换。
使用转换后的值
复制按钮导出色值，而非完整的属性声明。可按需用于 color、background-color、border-color 或设计令牌定义。
处理限制
文本输入最大 1 MiB。CSS 和 HTML 转换在工作线程中运行，限时 30 秒。颜色工具使用 sRGB；生成的样式仅供预览，需要在您的布局中测试。
延伸阅读MDN · CSS 色值
?
常见问题
可以输入哪些颜色格式？
可输入支持的 HEX、RGB、HSL 色值或 CSS 命名颜色。不支持的语法会显示错误，不会生成转换结果。
会保留透明度吗？
会。支持的 Alpha 输入会保留在各输出格式中。请结合实际使用的背景检查色块。
为什么输出的写法或精度不同？
显示时会规范化并舍入数值，不保留原始简写、空白或数值的精确拼写。
支持 OKLCH 或 Display P3 吗？
不支持。此工具仅处理 sRGB 颜色表达，不会将更广的色域映射到 sRGB。
色值会被上传吗？
不会。转换和预览均在浏览器中完成。“复制”仅将所选输出写入剪贴板。