如何转换 CSS 颜色并检查 sRGB 色域?
输入独立 CSS 颜色或使用不透明颜色选择器,转换为 HEX、RGB、HSL 和 OKLCH,检查透明度预览并导出 JSON 或 CSS 自定义属性声明。转换由浏览器 Worker 完成。
具体怎么操作?
- 输入 #ff000080、rgb(255 0 0 / 0.5) 或 oklch(65% 0.3 30) 等 CSS 颜色。
- 选择 JSON 或 CSS 输出并点击“运行”,检查透明度和 sRGB 色域裁剪提示。
- 复制或下载颜色值,再在目标浏览器或设计软件中核对效果。
转换半透明红色
末两位十六进制透明度为 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 通道裁剪不等于感知色域映射。 |
常见问题
需要上传内容或注册账号吗?
不需要。处理在当前浏览器中完成;本站只提供页面和所需静态引擎资源。
为什么修改输入后结果消失?
工具会清除旧输出,避免把上次结果误当成新结果。更改输入或设置后,请重新运行。
参考资料
首次发布:根据当前工具界面核对步骤,补充示例和已知限制。