CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）

一：CSS中的 hsl()函数：

1、定义与用法：hsl() 函数使用色相、饱和度、亮度来定义颜色。

HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0 ~ 100%的数值。
亮度（L），取0 ~ 100%，增加亮度，颜色会向白色变化；减少亮度，颜色会像黑色变化。

HSL是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法，这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB更加直观，通过HSL 的值的逐渐变化，可以得到非常相近的颜色。

.test{background-color:hsl(360,50%,50%);
}

2、支持版本：CSS3

3、语法：hsl(hue,saturation,lightness) 参考链接

值	描述
hue-色相	定义色相（0到360）-0（或360）为红色，120为绿色，240为蓝色
saturation-饱和度	定义饱和度；0%为灰色，100%全白
lightness-亮度	定义亮度0%为暗，50%为普通，100%为白

要理解HSL颜色，你首先需要从另一个角度来理解颜色，注意观察上面的色盘，你可以看到红、绿、蓝三种颜色。红色在最上面，被设置为0度，绿色是120度，蓝色是240度，他们将色盘分为三个部分，在它们的中间分别是黄色、青色和洋红（CMYK颜色系统），他们的角度分别为60度、180度和300度。

从色盘的顶部开始顺时针方向旋转，是彩虹的七彩颜色。从60度开始，分别是：黄色、绿色、青色、蓝色、洋红和红色。

HSL颜色就是指上面颜色色盘中的多少度的颜色值。

例如：紫色在蓝色（240%）和洋红（300%之间），所以他的HSL颜色是hsl(270,100%,50%)。如果想要紫色偏蓝，就要往色盘蓝色方向移动角度值，得到hsl(255,100%,50%)。

你会注意到角度后面还有两个百分比的值，第一个值是颜色的饱和度，也就是值颜色的强度。在色盘的最外层，颜色的饱和度为100%，最外层的颜色是最有 " 色彩 " 的。色盘越往中心移动颜色越灰，所以饱和度可以理解为：颜色距离灰色多远？HSL颜色的饱和度为0%时就变为相同的灰色。

例如：HSL饱和度值：hsl（45，x%，50%）

注：HSL颜色的两个百分比值必须同时包含饱和度和亮度值才能正常显示。

亮度是指颜色偏向于白色还是黑色，50%的亮度值表示颜色位于黑色和白色中间，这时颜色会基本保持原来的颜色不变。减少亮度会增加黑色调：当亮度为0%时颜色变为黑色。增加亮度会增加白色调：当亮度值为100%时颜色变为白色。

例如：HSL亮度值：hsl（90,100%，x%）

当你熟悉了上面色盘的颜色分布的时候，你会发现在CSS中使用HSL颜色会比使用RGB颜色更加容易和便于管理。有时候，使用HSL颜色会有一些优势，下面我们来说一下使用HLS到底会有哪些具体的应用场景呢？

二、HSL颜色在网站中的三个应用场景：参考链接

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

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

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

例如：你想为你的网站快速的创建一个颜色方案，假如你的网站LOGO是橙色的，它对应的HSL颜色值为：hsl(30,90%,29%)
要生成一个互补色，你可以为色调值增加180度，在这个例子中，得到的HSL颜色的结果是：hsl(210,90%,29%)

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

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

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

2、快速调整颜色：

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

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

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

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

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

3、为样式创建快速颜色变体：

我们以一个带渐变色的圆点按钮为例子，它的基本样子如下图所示（只用webkit内核浏览器可以看到正确的样式）。它的CSS3代码如下，注意没有写浏览器厂商的前缀：（下面例子如果不懂可以了解一下radial-gradient()函数）

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

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

4、上面的情况不应该使用HSL颜色吗？

答案是在你的网站必须指出IE8及以下的浏览器的时候，你不能够使用HSL颜色来作为你的网站颜色。Sass可以自动将HSL颜色转换为RGB颜色或HEX颜色。

三：CSS中的 hsla()函数：

1、定义与用法：hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。

HSLA 即：色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。

色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L）取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
透明度（A）取值 0~1 之间，代表透明度。

2、支持版本：CSS3

3、语法：hsla(hue,saturation,lightness,alpha)

值	描述
hue-色相	定义色相(0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度	定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度	定义亮度 0% 为暗, 50% 为普通, 100% 为白
alpha - 透明度	定义透明度 0（透完全明） ~ 1（完全不透明）

其实HSLA() 和 HSL()函数用法基本一致，只不过在HSL()的基础上添加一个透明效果。

感兴趣可以查看一下另一种设置颜色的模式：RGB模式

CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）相关推荐

CSS 的 rgb() 和 rgba() 函数（设置颜色的方式之一）
一.CSS中设置颜色的四种方式: 值描述 color_name 规定颜色值为颜色名称的颜色(如:yellow黄色) hex_number 规定颜色值为16进制颜色值(比如:#ff0000) rgb_ ...
用API函数设置颜色
1.在设置头文件后将要用到的颜色也定义一下例如设置红色:#define SetRed (FOREGROUND_RED|FOREGROUND_INTENSITY) 2.先在设置全局变量时用 Get ...
plot函数设置颜色、字体
官网超棒 1.设置正常中文字体 mpl.rcParams['font.sans-serif'] = ['KaiTi'] mpl.rcParams['font.serif'] = ['KaiTi'] m ...
css透明度为0.2是什么颜色,CSS3颜色不透明度的设置方法【web前端】
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
JavaScript如何给Table行设置颜色？
1.首先,在CSS文件中定义要设置的颜色.比如, .resetrowscolor { background-color: red; } 2.在要显示的页面中引入该CSS文件,比如 <li ...
html怎么设置颜色透明,CSS3如何设置颜色不透明度？
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
CSS 中的 HSL 和 HSLA 与 RGB 和 RGBA
CSS 中的 HSL 颜色已经存在了十多年,但我发现它们仍然经常未被充分利用. 尽管它非常实用,但由于浏览器支持有限,许多开发人员避免使用 HSL CSS 功能. 随着浏览器对 HSL 颜色模型的支持 ...
R语言par函数设置图像个数、边界、颜色等实战
R语言par函数设置图像个数.边界.颜色等实战目录 R语言par函数设置图像个数.边界.颜色等实战 #par函数设置多图可视化
css表格设置行列的颜色,CSS：为表格中的选定行设置颜色
我需要将以下功能添加到我的表中:当用户单击某行(选择它)时,该行用颜色#FFCF8B标记(与hover相同).我试过#newspaper-b tbody tr.selected td,但它不起作用.C ...

CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）

CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）相关推荐

最新文章

热门文章