颜色 表示方法 hsl_您今天应该在网站中使用HSL颜色的三种方法

颜色 表示方法 hsl

There are some areas in which using hsl color in your CSS has so many advantages it’s surprising that more developers don't take advantage of it.

在某些领域中，在CSS中使用hsl颜色具有许多优势，令人惊讶的是，更多的开发人员没有利用它。

为现场配色方案创建快速原型 (Create Rapid Prototypes For Site Color Schemes)

hsl is ideal for the quick creation of site color schemes, especially for developers who may not have a strong grasp of design or color theory. Using a few simple rules can create harmonious color choices that work in every situation.

hsl是快速创建站点配色方案的理想选择，特别是对于可能对设计或颜色理论不了解的开发人员。 使用一些简单的规则可以创建适用于每种情况的和谐色彩选择 。

hsl complimentary color scheme

hsl免费配色方案

As an example, let’s say you have a central tone that you want to use to quickly generate a site’s color scheme. For instance, you might have a burnt orange color derived from a client’s logo, which corresponds to hsl(30,90%,29%).

例如，假设您要使用一种中心色调来快速生成站点的配色方案。 例如，您可能有从客户徽标派生的橙色，这对应于hsl(30,90%,29%) 。

To generate an instant complementary color, just add 180 degrees to the hue value: in our example, that gives a result of hsl(210,90%,29%). Easy!*

要生成即时的互补色 ，只需将色相值增加180度：在我们的示例中，结果为hsl(210,90%,29%) 。 简单！*

hsl monochromatic color scheme

HSL单色配色方案

Create an instant monochromatic color scheme: take the saturation value and subtract thirds from it. Our base color is hsl(30,90%,29%), so the additional colors will be hsl(30,60%,29%) and hsl(30,30%,29%).

创建一个即时的单色配色方案：取饱和度值并从中减去三分之一。 我们的基本颜色是hsl(30,90%,29%) ，因此其他颜色将是hsl(30,60%,29%)和hsl(30,30%,29%) 。

For a neutral color scheme: subtract from and add to the hue value by the same amount, up to 90°. For example, a 30° neutral color split would add the colors hsl(0,90%,29%) and hsl(60,90%,29%).

对于中性配色方案：从色相值中减去并相加相同的值，最大90°。 例如，将30°中性色分割将添加颜色hsl(0,90%,29%)和hsl(60,90%,29%) 。

Triadic color scheme: add 120° to the hue value of the base color.

三色配色方案：将基色的色相值增加120°。

Used well, this eliminates the entire debate of “what color goes with this?”, helping to generate the design of a site very quickly.

如果使用得当，就可以消除“用什么颜色搭配？”的整个争论，从而有助于快速生成网站设计。

快速色彩调整 (Fast Color Adjustment)

How many times do clients ask “can we make the background a little lighter?” If you’ve specified colors in RGB or hexadecimal, that means adjusting three components simultaneously, trying to make sure one doesn’t jiggle up or down more than the others. If you’ve coded the color scheme of your site in hsl, it’s easy. Want the orange background of a page to be darker? Take this:

客户会问多少次“我们可以使背景更浅吗？” 如果您以RGB或十六进制指定颜色，则意味着要同时调整三个分量，以确保一个分量不会比另一个分量上下波动。 如果您已经在hsl中编码了网站的配色方案，那么这很容易。 想要页面的橙色背景变深吗？ 拿着这个：

body {
	background: hsl(60,100%,50%);
}

And just dial down the last number:

只需拨打最后一个电话号码：

body {
	background: hsl(60,100%,40%);
}

Done! And if you’ve used the color scheme technique we discussed above, you can adjust the other colors in the site just as easily.

做完了！ 而且，如果您使用了上面讨论的配色方案技术，则可以轻松地在站点中调整其他颜色。

为新样式创建快速的颜色变体 (Create Rapid Color Variants For New Styles)

I’ve been working on an article that uses a radial gradient to create a tell-tale light in a button element, shown to the right (best seen in Webkit, as of this writing) based on work by simurai. Stripped of vendor prefixes, the CSS looks like this:

我一直在写一篇文章，该文章基于simurai的工作，使用径向渐变在按钮元素中创建了一个讲故事的灯 ，在右边显示(在撰写本文时，这在Webkit中是最好的)。 除去供应商前缀 ，CSS如下所示：

input {
	background-image:
		radial-gradient( 
			hsla(0,100%,90%,1) 0%,
			hsla(0,100%,70%,1) 15%,
			hsla(0,100%,60%,.3) 28%,
			hsla(0,100%,30%,0) 70%
		);
}

If I wanted to make a blue light, all I have to do is rotate the hue component of the HSL code:

如果我想发出蓝光，我所要做的就是旋转HSL代码的色相组件：

input {
	background-image:
		radial-gradient(
			hsla(200,100%,90%,1) 0%,
			hsla(200,100%,70%,1) 15%,
			hsla(200,100%,60%,.3) 28%,
			hsla(200,100%,30%,0) 70%
		);
}

That’s it: the new light has the same intensity and brightness, just in a different hue. No more fiddling with red, green and blue values.

就是这样：新的光具有相同的强度和亮度，只是色调不同。 不再摆弄红色，绿色和蓝色值。

什么时候你应该不使用HSL颜色？ (When Should You Not Use HSL Colors?)

Short answer: when you need the site to be viewed in IE8 or lower. If you want IE support, Sass can automatically translate hsl colors to hexadecimal… so there’s little excuse not to start using the advantages of hsl today.

简短的答案：当您需要在IE8或更低版本中查看网站时。 如果您需要IE支持， Sass可以将hsl颜色自动转换为十六进制 …因此，没有什么借口可以不立即使用hsl的优势。

翻译自: https://thenewcode.com/576/Three-Ways-You-Should-Be-Using-HSL-Color-In-Your-Site-Today

颜色 表示方法 hsl