颜色格式转换

HEX、RGB、HSL 与 CSS 变量互转

浏览器内运算Color Converter工具型08图片与颜色

什么是颜色格式转换

颜色转换工具在 HEX、RGB、HSL 三种表示之间实时换算,并给出可直接粘贴进样式表的 CSS 写法与相对亮度值。换算在浏览器内完成,可用取色控件或手动输入。

怎么用颜色格式转换

  1. 1用取色器选色,或直接输入 HEX、RGB、HSL 任一格式。
  2. 2其余格式会即时同步更新。
  3. 3复制需要的写法到样式文件。
  4. 4需要判断文字可读性时,配合对比度检测工具使用。

在代码里怎么实现?

一次性操作用上面的工具,重复性工作建议固化到脚本或项目里。

: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 值,因此设计稿导出的精确色值通常是六位。

相关工具

全部工具