什么是颜色格式转换?
颜色转换工具在 HEX、RGB、HSL 三种表示之间实时换算,并给出可直接粘贴进样式表的 CSS 写法与相对亮度值。换算在浏览器内完成,可用取色控件或手动输入。
怎么用颜色格式转换?
- 1用取色器选色,或直接输入 HEX、RGB、HSL 任一格式。
- 2其余格式会即时同步更新。
- 3复制需要的写法到样式文件。
- 4需要判断文字可读性时,配合对比度检测工具使用。
在代码里怎么实现?
一次性操作用上面的工具,重复性工作建议固化到脚本或项目里。
CSS
JavaScript
:root {
--brand: #1d6f5c;
--brand-rgb: 29 111 92; /* 便于配合 rgb(var(--brand-rgb) / 0.12) */
--brand-hsl: 165 59% 27%;
}常见问题
HSL 相比 HEX 有什么优势?+
HSL 把颜色拆成色相、饱和度、亮度三个可独立调节的维度,做同色系深浅变体时只改亮度即可,比手算 HEX 直观得多。设计令牌体系里常用 HSL 生成色阶。
三位的 HEX 简写和六位等价吗?+
等价。三位写法是每个通道字符重复一次,#1a2 等于 #11aa22。但它只能表达 4096 种颜色,无法表示任意 RGB 值,因此设计稿导出的精确色值通常是六位。