Question

我即将开始一个新项目，我希望它的CSS既一致又高效。我想知道我应该使用哪种颜色单位。 Medium和Trello有不同的方法提倡rba而不是hsl，反之亦然。我真的很难理解彼此的好处

hsl优于rgb的优缺点是什么？

Answer 1

老问题，但这是我的答案。

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

因此，像hex和rgb这样的格式意味着比人类可读的机器更易读。 HSL与人类可以理解的相反 -

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

正如托马斯在评论中正确指出的那样，蓝色的度数应该是240，而不是270。

饱和度是混合物中存在多少颜色。这是百分比，从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配色方案。希望这能充分回答你的问题。

Answer 2

在我看来：

HSL(A):

临：当物体更亮或更暗，写入更快，允许您修改亮度和饱和度而不修改颜色本身时，HSL很方便。

缺点：旧版浏览器可能不支持HSL（如IE＆lt; 9）。

RGB(A):

优点：即使在较旧的浏览器中，RGBA也是众所周知的。

缺点：当使东西变浅或变暗时，你需要重写颜色。

Answer 3

我意识到这个话题很老，但是争论仍然存在。我教Web开发，甚至当前的教科书在此问题上仍然不一致。

有，但是有不同的原因选择一种格式而不是另一种格式。

使用开发团队其余成员使用的相同格式。
如果目标访问者使用严重过时的浏览器来查看您的网站，请使用十六进制。
如果您已经熟悉RGBa格式，请使用它。
如果前三个选项没有使您转向另一个方向，请使用HSLa。 HSLa允许您编写RGBa可以实现的透明性编码，但是可以人类访问，并且得到广泛支持到此时，您已经足够将您排除在浏览网站之外了。

尽管如此，保持灵活性。方法的刚性是开发人员认知 rigor mortis 的标志。

现实是，您可以使用任何格式，尽管hex的局限性是不支持透明度，而RGBa的局限性在于不使用单独的参考或工具就不容易调整。因此，我的强烈建议是HSLa 。一旦学习了色轮，您就应该能够猜出您希望创建并出现在球场上的任何颜色的代码。尝试使用其他任何格式，您都会被弄糊涂了。

Answer 4

事实是，两种型号都没有优点或缺点。两种型号都可以创建相同的颜色。这完全取决于你的色彩心理模型。您是否更容易将颜色视为红色，绿色和蓝色的组合，或者将某种颜色视为具有亮度和价值的特定色调？如果你习惯了一个模型，那么使用那个模型显然会更好。

我个人更喜欢RGB，因为这是许多绘图应用程序使用的。我可以使用HSL而我不喜欢Hex，因为我觉得很难阅读。