HSL颜色在网站中的三个应用场景

03-29 次

标签 HSL CSS颜色

在某些时候，在CSS中使用HSL颜色会比使用其它颜色模式更有优势。本文将从三个方面来介绍在什么时候应该使用HSL颜色。

为网站颜色方案创建快速原型

HSL颜色非常适合于插件网站的颜色方案，特别是开发者没有很大的把握和色彩理论的时候。HSL颜色通过一些简单的规则就可以创建适应任何需要的颜色模式。

HSL的互补色方案 — hsl complimentary color scheme

例如你想为你的网站快速的创建一个颜色方案，假如你的网站LOGO是橙色的，它对应的HSL颜色值为：hsl(30,90%,29%)。

要生成一个互补色，你可以为色调值增加180度，在这个例子中，得到的HSL颜色的结果是：hsl(210,90%,29%)。

HSL的单色配色方案 — hsl monochromatic color scheme

下面来看看如何创建单色的配色方案：一个简单的方法是将饱和度值减去它的30%。如果我们的基色是hsl(30,90%,29%)，那么另外的两个颜色分别是：hsl(0,90%,29%)和hsl(60,90%,29%)。

另外还可以配置三色方案：将基色的色调值递增120度即可。

上面简单的配置就得到三种网站颜色的配色方案，是不是非常快捷简单呢？

快速调整颜色

如果你的网站使用的颜色模式时RGB模式或HEX颜色模式，那么当你想将网站颜色调整得亮一些的时候，你必须同时调整三个值，这些微调工作是非常烦人的。如果你使用的是HSL颜色模式，那么工作就变得简单了：

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

你只需要调整一些亮度值就可以了

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

如果你使用我们上面所说的HSL颜色方案，那么你就可以非常轻松的调整其它的颜色。

为样式创建快速颜色变体

我们以一个带渐变色的圆点按钮为例子，它的基本样子如右边的所示（只用webkit内核浏览器可以看到正确的样式）。它的CSS3代码如下，注意没有写浏览器厂商的前缀：

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% );
}

如果我们想将按钮渐变的颜色变为蓝色，我们只需要它的色调值即可：

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% );
}

现在，新生成的蓝色光和原来的红色光的亮度和强度是相同的，只是色调值发生了一些变化。你可以非常轻松的将它修改为其它任何颜色。