在 HEX、RGB 和 HSL 之间换算颜色
同一时间把一个颜色的所有常用记法都显示出来。不用选方向——选一个或粘一个颜色，取你要的那种格式就行。
- HEX
- #2F6FEB
- RGB
- rgb(47, 111, 235)
- HSL
- hsl(220, 82%, 55%)
- CSS 变量
- --brand: #2f6feb;
常用预设
每一个都有自己的页面，说明这个要求是从哪来的、结果会是什么样。
如何使用
- 1用色块选一个颜色，或者粘一个像 #3b82f6 这样的值。
- 2要哪种写法就读哪种——所有写法同时显示。
- 3要把颜色写进样式表的话，直接复制那行 CSS 变量。
常见问题
- 为什么不用选转换方向？
- 因为 HEX、RGB、HSL 是同一个颜色的三种写法，不是三种需要互转的格式。全都同时显示，省掉一次点击，也省掉「我刚才是往哪个方向转」这个问题。
- 什么时候该用 HSL 而不是 HEX？
- 做变体的时候。HSL 把色相、饱和度、亮度分开，于是 hover 态就是「同一个颜色，亮度减十」——一个你能推理的改动。换成 HEX，同样的改动是三个看不出关系的数字。
- HEX 和 RGB 完全等价吗？
- 在两种写法都用的 8 位数值上是等价的：#3b82f6 和 rgb(59, 130, 246) 是同样的 24 个比特换个写法。HSL 是同一空间上的另一套坐标，所以转回来时可能因为取整差一点点。
- 三位的十六进制颜色码是什么？
- 一种缩写：#f00 把每位翻倍，展开成 #ff0000。它只能表示每个通道两位重复的颜色，也就是 1670 万里的 4096 个——临时写个红色够用，写品牌色不行。