GUIDE深度 · Deep dive

HEX、RGB、HSL 怎么选?

HEX 和 RGB 是同一组红绿蓝值的两种写法,HSL 只是换了一种坐标。设计交付常用 HEX,CSS 变量可用 RGB 分量,调色时 HSL 更直观。

更新 2026-10-31 · 公式可核验

用途

HEX:#RRGGBB,设计和 CSS 最常用。

RGB:rgb(r,g,b),方便按通道调。

HSL:hsl(h,s%,l%),调亮/暗和饱和度更直观。

转换关系

HEX 每两位是 0–255 的红/绿/蓝。

HSL 的 H 是色相角度,S/L 是百分比;不是另一种颜色,只是表示法。

常见问题

为什么设计稿和浏览器颜色不一样?

可能是色彩配置/显示配置不同;用同一 HEX 值对比。

HSL 调色更好吗?

调亮度和饱和度更直观,但品牌色仍以 HEX 交付。

数据来源

相关计算器

颜色转换器输入 HEX 或选颜色,实时得到 RGB 和 HSL,并预览色块。

更多指南

文字颜色对比度怎么选?阅读指南