HSL颜色简易指南

最新推荐文章于 2024-09-30 17:39:57 发布

cungui5726

最新推荐文章于 2024-09-30 17:39:57 发布

阅读量1.5k

点赞数

文章标签： java 编程语言 python 大数据数据库

原文链接：https://thenewcode.com/61/An-Easy-Guide-To-HSL-Color

版权

The HSL color method is well-supported in modern browsers but somewhat neglected by coders, partly due to the fact that HSL is quite different from alternative CSS color models:

HSL颜色方法在现代浏览器中得到了很好的支持，但在某种程度上被编码人员所忽略，部分原因是HSL与替代CSS颜色模型有很大不同：

It’s easy to translate from hexadecimal to RGB color codes, but difficult to translate from those color models into HSL.
从十六进制颜色代码转换为RGB颜色代码很容易，但是从这些颜色模型转换为HSL则很困难。
Hex and RGB PhotoShop color values can be directly transferred to your CSS, but PhotoShop’s HSB color model is not the same thing as HSL.
十六进制和RGB PhotoShop的颜色值可直接传递到你的CSS ，但Photoshop的HSB色彩模式是不一样的东西HSL。
HSL doesn’t give you a greater gamut: it works in the same color range as hex and RGB.
HSL不会给您更大的色域：它在与十六进制和RGB相同的颜色范围内工作。

Despite these restrictions, HSL is very much preferred by designers, and I’m about to show you why.

尽管有这些限制，HSL还是深受设计师的青睐，我将向您展示原因。

了解新的色彩系统 (Understanding A New Color System)

First, you need a new mental model for color. Forget sliders: instead, focus on the wheel above. You can see red, green and blue: red, at the top, is at 0 degrees, green is at 120 and blue at 240, dividing the color wheel into thirds. Equidistant between those are yellow, cyan and magenta (from the CMYK color system), at 60, 180 and 300 degrees respectively.

Starting at the top of the wheel and moving clockwise, we proceed through the rainbow hues you recall from school: ROY G BIV. An alternative mnemonic is “Young Guys Can Be Messy Rascals” – Yellow, Green, Cyan, Blue, Magenta and Red, starting at 60° and increasing in equal increments.

从车轮的顶部开始，然后顺时针方向移动，我们继续处理您从学校回忆起的彩虹色：ROY G BIV。另一种助记符是“年轻人可能成为凌乱的捣蛋鬼” –黄色，绿色，青色，蓝色，洋红色和红色，从60°开始并以相等的增量递增。

So the first component of HSL is easy: it’s a specification of how many degrees around on that wheel a particular color is.

因此，HSL的第一个组成部分很容易：它是特定颜色在该轮上围绕多少度的规格。

As an example, purple is halfway between blue (240°) and magenta (300°), so the HSL code for it would be: hsl(270,100%,50%). (Don’t worry about the other numbers yet). Making the purple “more blue” would move it counter-clockwise on the color wheel, giving us hsl(255,100%,50%).

例如，紫色介于蓝色(240°)和洋红色(300°)之间，因此其HSL代码为： hsl(270,100%,50%) 。 (不要担心其他数字)。使紫色“更蓝”将使其在色轮上逆时针移动，从而得到hsl(255,100%,50%) 。

The next component, saturation, is better described as “intensity”. At the outside edge of the wheel, colors are fully saturated: they are as “colorful” as they can possibly be. Moving inwards, colors get closer to grey. So saturation is “how far away is the color from grey?” Any HSL color with a saturation of 0% is the exact same shade of grey, all other things being equal.

下一个成分饱和度可以更好地描述为“强度”。在车轮的外边缘，颜色完全饱和：它们尽可能地“多彩”。向内移动，颜色逐渐接近灰色。因此饱和度是“颜色与灰色的距离有多远？” 在其他所有条件相同的情况下，任何饱和度为0％的HSL颜色都是完全相同的灰色阴影。

HSL饱和度值：hsl(45，x％，50％) (HSL Saturation Values: hsl(45,x%,50%))

hsl(45,0％，50％) hsl(45,25％，50％) hsl(45,50％，50％) hsl(45,75％，50％) hsl(45,100％，50％)

A percentage symbol must be included for both saturation and luminosity in an hsl color for it to work, even if a component has a value of 0.

即使组件的值为0，也必须在hsl颜色中同时包含一个百分比符号，用于饱和度和亮度，以使其起作用。

Luminosity, or “brightness”, specifies how far away the color is from black or white. A brightness level of 50% means the color is perfectly balanced between light and dark, and will essentially remain unchanged. Reducing luminosity darkens the color: all HSL colors with a luminosity level of 0 are pure black. Increasing brightness does exactly that: at the extreme of 100%, all HSL colors are white. Between, you have many possibilities, as illustrated below:

亮度或“亮度”指定颜色与黑色或白色的距离。亮度水平为50％意味着颜色在明暗之间完美平衡，并且基本上保持不变。降低亮度会使颜色变暗：所有亮度级别为0的HSL颜色均为纯黑色。增加亮度的确可以做到：在100％的极限下，所有HSL颜色都是白色。在这两者之间，您有很多可能，如下所示：

HSL光度值：hsl(90,100％，x％) (HSL Luminosity Values: hsl(90,100%,x%))

hsl(90,100％，0％) hsl(90,100％，25％) hsl(90,100％，50％) hsl(90,100％，75％) hsl(90,100％，100％)

With practice, this new mental map of color will become instinctive: you’ll likely find that it is much easier to create and manipulate color specified in HSL in your stylesheet code than hex or RGB. Even if you choose not to use it all the time, HSL has some very specific advantages in certain circumstances, as we’ll see in the next article.

通过实践，这种新的颜色思维图将变得本能：您可能会发现，在样式表代码中创建和操作HSL中指定的颜色比使用十六进制或RGB容易得多。即使您选择不一直使用它，HSL在某些情况下也具有一些非常特殊的优势，我们将在下一篇文章中看到。