Suj*_*ran 86
老问题,但这是我的答案.
首先,如果你是一个纯粹的开发人员,并希望只是编码并完成项目,继续使用任何颜色格式,这没关系.但如果您担心可用性并将其交给更大的团队等等,请继续阅读.
因此,像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, 55%, 8%);
如您所见,Hex和RGB的值已经完全改变,而HSL只改变了一个方面.因此,可以直观地轻松创建颜色方案.
如果我告诉你网页上的按钮需要是#61904a或rgb(97,144,74),你能猜出颜色是什么吗？不,除非你是一台电脑.
但是HSL中的颜色相同:hsl(100%,32%,43%).现在Hue值为100°,这意味着它接近纯绿色120°.所以它是某种绿色.接下来,它的饱和度为32%,意味着暗灰色的32步,这是一种非常不饱和的绿色.接下来,它是纯白色的43步,相反,是纯黑色的57步.所以,在较轻的一面.
点击时按钮打开更亮,点击更暗？这是一个快照,只是增加和减少最后一个值,轻盈.就这样.没有工具或设计师的帮助,这对于Hex和RGB是不可能的.
这样,您可以自己构建HSL配色方案.希望这能充分回答你的问题.
- 极好的答案。用非常容易理解的方式解释。 (8认同)
- 您的图形看起来不错，但是蓝色的值是240而不是270！我将您的图形保存到我的学习资源中，只是注意到:)谢谢 (4认同)
- 精彩的描述性答案...！在StackOverflow中很少找到这样的答案。;） (3认同)
在我看来:
HSL(A):
Pro:HSL在使物体更亮或更暗时更方便,写入速度更快,允许您在不修改颜色本身的情况下修改亮度和饱和度.
缺点:旧浏览器可能不支持HSL(如IE <9).
RGB(A):
优点:RGBA是众所周知的,甚至在旧浏览器中也支持.
缺点:当制作更轻或更暗的东西时,你需要重写颜色.
小智 6
我意识到这个线程已经过时了，但争论仍在继续。我教 Web 开发，甚至当前的教科书在这个问题上仍然不一致。
有有，但是，不同的理由选择了另外一个格式。
- 使用与开发团队其他成员相同的格式。
- 如果您的目标访问者使用严重过时的浏览器来查看您的网站，请使用十六进制。
- 如果您已经熟悉该格式，请使用 RGBa。
- 如果前 3 个选项没有将您带到另一个方向，请使用 HSLa。HSLa 允许您编码 RGBa 所做的透明度，但以一种人类可以访问的方式进行编码，并且此时它已得到足够广泛的支持，因此您并没有真正将许多现有设备排除在查看您的网站之外。
但是，与所有事情一样，请保持灵活性。方法的僵化是开发人员认知严格的标志。
现实情况是，您可以使用任何格式，尽管十六进制有不支持透明度的限制，而 RGBa 有在不使用单独的参考或工具的情况下不易调整的限制。因此，我强烈推荐 HSLa。一旦你学会了色轮，你应该能够猜出你想要创造的任何颜色的代码，并在球场上。尝试使用任何其他格式，您会感到困惑。