虽然这是一个老问题，但我还是会回答。
首先，如果您是纯开发人员，想要只编写代码并完成项目，那么可以使用任何颜色格式，没有关系。但是，如果您担心可用性和对更大团队的交接等问题，请继续阅读。
因此，像十六进制和RGB之类的格式旨在更适合机器阅读，而HSL则相反-旨在更易于人类理解。
HSL代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。 色相是实际纯色的值，例如红色、绿色、蓝色、黄色、紫色等，其在彩色轮上的表示。该值为0至360度。
正如Thomas在评论中指出的那样，这里蓝色的度数应为240，而不是270。
饱和度是混合中存在的该颜色的程度。它是一个百分比比例，从0％到100％。 0％饱和度输出一种沉闷的灰色，意味着混合中没有您的色相。
亮度重新是一个百分比值，从0％到100％。 0％表示完全黑暗，换句话说-纯黑色。 100％是纯白色。
HSL是一种直观的颜色格式，模仿现实世界。例如，您现在可能正坐在桌子前。注意桌子的颜色。假设它是红木桌。它的颜色值将为-
Hex: #4f2017;
RGB: rgb(79, 32, 23);
HSL: hsl(10, 55%, 20%);
现在，把你的手放在它上面，大约离表面几英寸远。你的手影使得桌面变得有点更暗了，对吧？现在，要在十六进制或rgb中表示这种颜色的变化是不可能的，而不改变颜色本身。但在hsl中，这非常容易——只需减少明度值，瞬间完成！颜色保持不变，但混入了一些黑色——基本上降低了亮度值。
OLD VALUES NEW VALUES
Hex: #4f2017; --------------> #200d09;
RGB: rgb(79, 32, 23); ------> rgb(32, 13, 9);
HSL: hsl(10, 55%, 20%); ----> hsl(10, 55%, 8%);
正如您所看到的，十六进制和RGB的值已经完全改变了，而HSL只有一个方面改变了。因此，这使得即时创建色彩方案变得直观容易。
如果我告诉你网页上的按钮需要使用#61904a或者rgb(97, 144, 74)，你能猜出这是什么颜色吗？除非你是一台计算机，否则不行。
但是，同样的颜色用HSL表示：hsl(100, 32%, 43%)。
现在色相值为100度，意味着它接近于纯绿色，而纯绿色的值为120度。因此，它是某种绿色。
接下来，它饱和度为32％，意味着与暗灰色相距32个步骤，是一种相当不饱和的绿色。
然后，它距离纯黑色还有43个步骤，反之，距离纯白色还有57步骤。因此，它比较偏暗。
想让按钮在悬停时变亮，在点击时变暗吗？这非常简单，只需增加和减少最后一个值，即亮度值。就这样。这是使用十六进制和RGB无法做到的，除非使用工具或者向设计师寻求帮助。
这样，您就可以自己构建HSL颜色方案。希望这足以回答您的问题。
7
hsl（30，100％，20％）。 - Aleksandr HovhannisyanHSL(A):
优点： HSL 在调整亮度和饱和度时很方便，且书写速度更快。使用 HSL 可以在不改变颜色本身的情况下修改亮度和饱和度。
缺点： 老旧的浏览器可能不支持 HSL（例如 IE < 9）。
RGB(A):
优点： RGBA即使在旧版浏览器中也广为人知并得到支持。
缺点： 当使颜色变浅或变深时，您需要重新编写颜色代码。
2
我知道这个帖子已经过时了，但争论仍在继续。我教授Web开发，即使现在的教科书在这个问题上仍然存在不一致。
然而，选择一个格式而不是另一个格式有明显的原因。
- 使用开发团队其余成员使用的相同格式。
- 如果您的目标访问者使用严重过时的浏览器来查看您的网站，则使用16进制。
- 如果您已经熟悉RGBa格式，则使用RGBa。
- 如果前三个选项没有引导你去另一个方向，则使用HSLa。 HSLa允许您编写RGBa支持的透明度，但以人类可读的方式进行编码，并且到此时为止，它得到了广泛的支持，因此您不会真正排除许多现有设备来查看您的网站。
然而，像所有事情一样，保持灵活性。方法上的僵化是开发人员认知上“严重僵硬”的标志。
实际上，您可以随意使用任何格式，尽管16进制有不支持透明度的限制，而RGBa则有在没有使用单独的参考或工具的情况下不易调整的限制。出于这个原因，我强烈推荐使用HSLa。一旦你学习了色轮，你应该能够猜测任何颜色的代码并且接近正确。如果您尝试使用其他任何格式，则会感到困惑。
1
就我个人而言，我更喜欢RGB，因为许多绘图应用程序都使用它。我可以使用HSL，但我不喜欢Hex，因为我发现它很难阅读。
1
原文链接