查找工具

↑↓ 选择 Enter 打开

不知道工具名称时,可输入“格式化”或“计数”等任务词。

如何转换 CSS 颜色并检查 sRGB 色域?

发布与核对日期 · 作者 KitLumi Engineering

输入独立 CSS 颜色或使用不透明颜色选择器,转换为 HEX、RGB、HSL 和 OKLCH,检查透明度预览并导出 JSON 或 CSS 自定义属性声明。转换由浏览器 Worker 完成。

打开免费工具 →

具体怎么操作?

  1. 输入 #ff000080、rgb(255 0 0 / 0.5) 或 oklch(65% 0.3 30) 等 CSS 颜色。
  2. 选择 JSON 或 CSS 输出并点击“运行”,检查透明度和 sRGB 色域裁剪提示。
  3. 复制或下载颜色值,再在目标浏览器或设计软件中核对效果。

转换半透明红色

末两位十六进制透明度为 128/255,约等于 0.50196,并非恰好 0.5。预览把颜色绘制在棋盘格背景上。

输入:
#ff000080

输出:
HEX: #ff000080
RGB: rgb(255 0 0 / 0.50196)
HSL: hsl(0 100% 50% / 0.50196)

什么时候适合使用?

转换单个颜色值、检查透明度时使用本工具。对于超出色域的颜色,应明确选择原始 OKLCH 或裁剪后的 sRGB 备用值。选择正文和背景颜色时,仍需另用对比度检查工具。

结果有哪些边界?

输入最多 2000 字符。小数输出保留五位,HEX 透明度量化为 8 位。超出色域时,HEX/RGB/HSL 和预览采用 sRGB 通道裁剪,OKLCH 保留原色。颜色选择器生成不透明 sRGB 颜色。不进行对比度、无障碍、印刷色彩配置或显示器校准评估。导出的 CSS 是需放入规则块的属性声明。

遇到问题怎么办?

问题处理方法
无法解析颜色。输入格式有误,或使用了 currentColor、var(--brand) 等依赖页面上下文的值。 填写具体的独立 CSS 颜色,十六进制颜色带上 #。本工具不解析整份样式表。
HEX 与原始广色域颜色看起来不同。HEX、RGB 和 HSL 以 sRGB 为目标,部分 OKLCH 或 Display-P3 颜色超出此范围。 检查裁剪提示。OKLCH 保留原色;sRGB 通道裁剪不等于感知色域映射。

常见问题

需要上传内容或注册账号吗?

不需要。处理在当前浏览器中完成;本站只提供页面和所需静态引擎资源。

为什么修改输入后结果消失?

工具会清除旧输出,避免把上次结果误当成新结果。更改输入或设置后,请重新运行。

参考资料

首次发布:根据当前工具界面核对步骤,补充示例和已知限制。

颜色转换 →