CSS - hsl或rgb（a）颜色

我即将开始一个新项目，我希望它的CSS既是一致的又是高性能的。我想知道我应该使用哪种颜色的单位。 Medium和Trello有不同的方法提倡超过hsl的rba，反之亦然。我真的很难理解对方的好处CSS - hsl或rgb（a）颜色

hsl优于rgb有什么优点/缺点？

2014-09-26 Spearfisher

可能的重复[是否有任何充分的理由使用十六进制十进制的RGB颜色值在CSS？]（http://stackoverflow.com/questions/1171422/are-there-any-good-reasons-for-使用-hex-over-decimal-for-rgb-color-values -in-c） – 2014-09-26 12:14:44

这可能也有帮助http://stackoverflow.com/questions/6797306/performance-differences-between-color-declarations – 2014-09-26 12:15:59

我觉得这个可能会帮助你http://www.ironion.com/colors-on-the-web-rgb-vs-hex-vs-hsla/ – 2014-09-26 12:19:32

在我看来：

HSL:

临：把事情变亮或变暗时 HSL方便，快写，让你修改亮度和饱和度，而无需修改本身的颜色。

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

RGBA:

优点： RGBA是众所周知的，甚至在旧的浏览器的支持。不错的事情是不透明是一个单独的价值。

缺点：当使事情变得更轻或更暗时，您需要重写颜色。

来源

2014-09-29 14:35:17 GibboK

你的意思是HSL，而不是HEX。 – 2017-01-20 00:28:28

@RoboRobok谢谢，我纠正了错字 – GibboK 2017-01-20 05:21:52

事实是，这两种模式都没有优点或缺点。两种模型都可以创建相同的颜色。这完全取决于你的色彩心理模型。你觉得把颜色想象成红色，绿色和蓝色的组合，或者将某种颜色想象为明亮和价值，会更容易吗？如果您习惯于一个模型，那么使用该模型显然会更好。

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

来源

2014-09-29 15:44:58

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

首先，如果你是一个纯粹的开发人员，并且想要获得编码并完成项目，请继续使用任何颜色格式，这并不重要。但是，如果你担心可用性和交付给更大的团队等等，请继续阅读。

因此，像hex和rgb这样的格式意味着比人类可读的机器可读性更好。 HSL正好相反，意味着人类可以更好地理解它。

HSL代表色调，饱和度和亮度。色调是实际纯色的值，如红色，绿色，蓝色，黄色，紫色等，如色轮上所示。值以度为单位，从0到360.请参阅图像HSL Colour Wheel

饱和度是指混合中存在多少颜色。这是一个百分比范围，从0％到100％。 0％饱和度会输出暗淡的灰色，这意味着混合中色调的0％。

亮度也是一个百分比值，从0％到100％。 0％意味着它完全黑暗，换句话说，纯黑色。 100％是纯白色的。查看图片Saturation and Lightness

HSL是一种模仿真实世界的直观颜色格式。例如，你现在可能正坐在一张桌子上。注意桌子的颜色。假设它是一个红木书桌。它的颜色值将是 -

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

现在握住你的手在它之上，就像表面上方几英寸。你手上的影子现在会让桌面变得更暗，对吗？现在，用hex或rgb代表这种颜色变化是不可能的，而不用改变颜色本身。但是在hsl中，这是一件轻而易举的事情 - 只需减少亮度值，然后砰！颜色保持不变，但有一点黑色混合，基本上减少了亮度值。

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％）。现在色调值为100°，这意味着它接近纯绿色120°。所以它是某种绿色。接下来，它的32％饱和度，意味着从沉闷的灰色，这是一个漂亮的去饱和绿色的32个步骤。接下来，它从纯白色的43个步骤，反过来，从纯黑色的57个步骤。所以，在较轻的一面。

悬停时让按钮更轻，点击时更暗？这是一个快照，只是增加和减少最后一个值，亮度。就这样。如果没有工具或设计人员的帮助，这对Hex和RGB来说是不可能的。

这样，您可以用HSL自行构建配色方案。希望这能够充分回答你的问题。

来源

2017-05-05 03:05:17

CSS - hsl或rgb（a）颜色

回答

相关问题