CSS-HSL或RGB(A)颜色 [英] CSS - hsl or rgb(a) colors

问题描述

我将要开始一个新项目，并且我希望它的CSS既一致又高效. 我想知道应该使用哪种颜色单位. 媒体和

I am about to start a new project and I want its CSS to be both consistent and performant. I was wondering which color units I should use. Medium and Trello have different approach advocating rba over hsl and vice versa. I am really struggling to understand the benefits of each other

HSL优于RGB的利弊是什么?

What are the pros/cons of hsl over rgb?

推荐答案

旧问题，但这仍然是我的答案.

Old question, but here's my answer nonetheless.

首先，如果您是一个纯粹的开发人员，并且只想编码并完成项目，请继续使用任何颜色格式，这都没有关系.但是，如果您担心可用性以及是否要移交给更大的团队等等，请继续阅读.

First off, if you're a pure developer and want to just get coding and finish the project, go ahead and use any colour format, it doesn't matter. But if you're worried about usability and hand-off to a larger team and so on, read on.

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

So, formats like hex and rgb are meant to be more machine-readable than human-readable. HSL is the opposite— meant to be understandable by humans better.

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

HSL stands for Hue, Saturation and Lightness. Hue is the value of the actual pure colour, such as Red, Green, Blue, Yellow, Purple and so on, as represented on a colour wheel. The value is in degrees, from 0 to 360.

正如Thomas在评论中正确指出的那样，此处的蓝色度应为240，而不是270.

As Thomas rightfully pointed out in the comments, the degrees for blue here should be 240, not 270.

饱和度是混合物中存在多少这种颜色.这是一个百分比范围，从0％到100％.饱和度为0％时会输出暗灰色，这意味着混合中的色相为0％.

Saturation is how much of that colour is present in the mix. It's a percentage scale, from 0% to 100%. 0% saturation outputs a dull grey, meaning there's 0% of your hue in the mix.

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

Lightness is again a percentage value, from 0% to 100%. 0% means its completely dark, in other words— pure black. 100% is, well, pure white.

HSL是一种模仿真实世界的直观颜色格式.例如，您现在可能正坐在办公桌前.注意桌子的颜色.假设它是一张红木桌子.它的颜色值是-

HSL is an intuitive colour format that mimics the real world. For example, you're probably sitting at a desk right now. Notice the colour of the desk. Let's say its a mahogany desk. It's colour values would be—

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

现在，将您的手放在其上方，就像在表面上方几英寸.现在，您手的阴影使桌面变暗了，对吧?现在，如果不更改颜色本身，就无法用十六进制或rgb表示此颜色更改.但是在hsl中，这绝对是轻而易举的事情-只需降低亮度"值，然后变坏！颜色保持不变，但其中混入了一些黑色-基本上减小了亮度"值.

Now hold your hand above it, like a couple of inches above the surface. Your hand's shadow now makes the desktop a bit darker, right? Now, it's impossible to represent this colour change in hex or rgb, without changing the colour itself. But in hsl, it's a absolute breeze— simply decrease the Lightness value, and bam! The colour remains the same, but with a bit of black mixed in— basically lessen the Lightness value.

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仅更改了一个方面.因此，即时创建配色方案变得很直观.

As you can see, the values of Hex and RGB have completely changed, whereas HSL only one aspect changed. Because of this, it becomes intuitively easy to create colour schemes on the fly.

如果我告诉您网页上的按钮需要为#61904a或rgb(97, 144, 74)，您能猜猜颜色是什么吗?不，除非您是计算机，否则不会.

If I told you the button on the webpage needs to be #61904a or rgb(97, 144, 74), can you guess what the colour could be? Nope, not unless you're a computer.

但HSL中的颜色相同:hsl(100, 32%, 43%). 现在，色相"值为100°，这意味着它接近于120°的纯绿色.所以它是某种绿色. 接下来，它的饱和度为32％，这意味着从暗灰色变为较不饱和的绿色需要32步. 接下来，它从纯黑色变成了43步，反之，从纯白色变成了57台阶.因此，在更黑暗的一面.

But the same colour in HSL: hsl(100, 32%, 43%). Now the Hue value is 100°, meaning it's close to pure Green which is 120°. So its a green of some sort. Next, its 32% saturated, meaning 32 steps from being a dull grey, which a pretty desaturated green. Next, its 43 steps from being pure black, and inversely, 57 steps from being pure white. So, on the darker side.

在悬停"按钮上使按钮变亮，在点击"按钮上使按钮变暗?这很容易，只需增加和减少最后一个值亮度"即可.就这样.如果没有工具或设计师的帮助，使用Hex和RGB不可能做到这一点.

Make the button lighter on Hover, and darker on Click? It's a snap, just increase and decrease the last value, Lightness. That's all. This is impossible to do with Hex and RGB without a tool or a designers help.

通过这种方式，您可以自己使用HSL构建配色方案.希望这能充分回答您的问题.

This way, you can build colour schemes with HSL, all by yourself. Hope this answers your question sufficiently.

这篇关于CSS-HSL或RGB(A)颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！