html – CSS – hsl或rgb(a)颜色

首先,如果您是一名纯粹的开发人员,并希望获得编码并完成项目,请继续使用任何颜色格式,这无关紧要.但如果您担心可用性并将其交给更大的团队等等,请继续阅读.

因此,像hex和rgb这样的格式意味着比人类可读的机器更易读. HSL是相反的 – 人类可以更好地理解.

HSL代表色调,饱和度和亮度.
色调是实际纯色的值,例如红色,绿色,蓝色,黄色,紫色等,如色轮上所示.该值以度为单位,从0到360.

饱和度是混合物中存在多少颜色.这是一个百分比范围,从0％到100％. 0％饱和度输出暗灰色,表示混音中有0％的色调.

亮度再次是百分比值,从0％到100％. 0％表示完全黑暗,换句话说 – 纯黑色. 100％是纯白色.

HSL是一种模仿现实世界的直观颜色格式.例如,你现在可能正坐在办公桌前.注意桌子的颜色.让我们说它是桃花心木桌子.它的颜色值是 –

Hex: #4f2017;
RGB: rgb(79,32,23);
HSL: hsl(10,55%,20%);

现在把手放在它上面,就像在表面上方几英寸处.你的手的影子现在使桌面更暗,对吧？现在,在不改变颜色本身的情况下,不可能用十六进制或rgb表示这种颜色变化.但是在hsl中,这是一个绝对的微风 – 简单地减少亮度值,然后是bam！颜色保持不变,但有一点黑色混合 – 基本上减少了亮度值.

Hex: #200d09;
RGB: rgb(32,13,9);
HSL: hsl(10,8%);

如您所见,Hex和RGB的值已经完全改变,而HSL只改变了一个方面.因此,可以直观地轻松创建颜色方案.

如果我告诉你网页上的按钮需要是#61904a或rgb(97,144,74),你能猜出颜色是什么吗？不,除非你是一台电脑.

但HSL中的颜色相同：hsl(100,32％,43％).
现在Hue值为100°,这意味着它接近纯绿色120°.所以它是某种绿色.
接下来,它的饱和度为32％,意味着暗灰色的32步,这是一种非常不饱和的绿色.
接下来,它是纯白色的43步,相反,是纯黑色的57步.所以,在较轻的一面.

点击时按钮打开更亮,点击更暗？这是一个快照,只是增加和减少最后一个值,轻盈.就这样.没有工具或设计师的帮助,这对于Hex和RGB是不可能的.

这样,您可以自己构建HSL配色方案.希望这能充分回答你的问题.