尚硅谷前端基础 (43)

好，有关于我们的颜色单位，最常用的其实就是我们RGB呀，还有这个16进制的这个RGB对吧，还有就是rgba比较常用的，你要透明就是RGBA，其他的就是RGB，还有16进制的啊，这个都是我们开发中最最常用的，但是其实在我们的这个CSS里还给我们提供了一种表示颜色的方式，叫做一个hsla值，还有hsla这个值，那这个HLS sa你就能猜到了，这A还是表示这个透明度，所以A我们就不单独说了，我们直接来说这个HSL这个值，那这个值我们直接来说一下啊，这个颜色其实我个人认为用的不是特别多，用的不是特别多，因为我们可能用这个RGB，至少我已经用习惯了，开发中我第一个想到的，不会想到去用这个HSLHSL这值是在哪会用呢？其实它是一种通用的方式，你像在里，像在这个工业的这种开发设计显示器里面调色。

都是用这个HSL值，所以它在工业设计里面会用的比较多，但是我们前端开发里面其实用的我个人感觉没那么多，但是我们还需要去了解一下啊，HSL也是三个值，分别是HS还有L，它这英文我就不拼了啊拼这估计拼不对是吧，H叫做一个色相啊，色相是吧，色相，然后S叫做一个这个饱和度啊饱和度，还有一个L是我们这个亮度啊亮度这色相是什么意思，色相呢？不是说你瞅，不是说你人那个是吧，瞅你那色相是吧，不是你色眯眯的样子，不是那个色是这个什么呀，颜色那个色相，实际上其实我们在设置颜色的时候，比如说拿这儿举例子，我们刚才说了用我们这个VS扣，你在设置颜色的时候，在这儿是不是会出现这么一个调色板呀，这个调色板其实就是根据HSL那个值去调的，就是根据那个值调的，这里边你看单独有这么一个位置。

这个位置可以干嘛呢？可以上下进行拖动去调这个颜色，你看我是不是可以上下去拖动去调这个颜色呀，这个就叫做色相啊，这个色相这个实际上它的想象，它它的实际效果，它应该是一个这个什么呢？它应该是一个，它应该是一个圆形的啊，是一个圆形的，它是一个色环啊色环红色是第一个，第一个，然后顺着这个色环可以往下转，下边有点像那个彩虹的什么橙色呀，什么黄色呀，什么绿色，什么什么什么什么蓝色，对吧，有点像彩虹那个颜色，它是顺着转的，所以你看这儿，这是不是也是第一个颜色是这红色，然后到最后是不是依然是是红色呀，因为它本身是一个环，它从头到尾它就它就转回来了，所以这个叫做一个色相，也就说你可以先通过色相来指定你要选的是哪个颜色啊，哪个颜色，所以叫做色相，色相的取值范围是一个什么呢？是一个零到三百六啊，零到360，为什么零到三百六呢？是个环。

是实际上是度数，零度360度，零跟三百六是一个一个位置，因为它本身是一个圆，因为你从零到三百六是不是又转回了，哎，转回来它是从零开始的，所以这块我们直接来一个by color，我们来试一下这个HSLHSL，你看这里边就给你写出来了，诶英文我还说我不会拼它，这是你写了第一个就是一个这个色相对吧，一个就是这个色相，HSL色相，它是一个零到360，如果我写一个零，那么它就是一个什么呀，哎，就是一个这个红色，三百六也是红色，那这个具体颜色值你得看这环上的颜色对吧，看这环颜色，所以你像这个东西我就区分不出来了，那你还得找个环对比着一下，对吧，第一个色相，第二个饱和度，饱和度就是你那个色，颜色什么呀，就是我们这个颜色的浓度，颜色一个浓度啊，颜色一个浓度，那它的范围是零啊，零到这个100啊，零到100浓度，就是你这红你是多红诶大。

红小红特别深还是特别浅是吧，那我这可以写一个100，那这就表示是一个深红对吧？最浓最浓的红啊，最浓最浓红，我要写个零，那就没了，就变成什么呀，变成灰色了，那你现在看不出来，因为我们这值没指定出来呢啊没指定出来呢，L叫做一个亮度，亮度就很简单了，那我们显示器就是我们这颜色的一个什么呀，颜色的一个这个亮度啊，颜色亮度也是零到100啊，零到100注意了，零它相当于什么呀，关灯亮度是零，关灯那就变成一个黑色了啊黑色，所以你这写零，你这写了零以后，无论你调什么，这都会是一个黑色，诶怎么没显示出来呀。刷新一下，诶，我们来看一下啊，等于在我这儿这个HSL没有。没有生效，现在是RGB生效了吧，我们来看一下他这块应该是我写百分比吗？哦，那这里边还得注意了，我忘忘事了对吧，那这两个单位是百分比的，所以这百分号你还必须写上，你不写百分号啊，这又不好使，正好是测出来我一个问题，因为我可能没有意识到必须写百分号，而这百分必须写啊，必须写一个百分比啊，所以我这写了一个百分百，这个先看这吧，这表示亮度，零就表示最亮，最不是零就表示没有亮，没有亮就变成了一个黑色，所以你前边设置什么，这只要是零，那都是黑色，懂这意思吧，所以这如果是100呢，100就等于你这个光开到最大，那就是一个白色啊，100就是一个白色，所以这么一效果，所以一般如果你要想设置一个正颜色的话，我们就是一个50%，你看这就变成红色了啊，红色我们先来看色相，你看啊这些色相我们直接调一，它就会一可能变得比较少，我调一个十十是不是稍微有点偏橙了。

哎，我来一个来一个这个60，哎60就是一个黄色的那30呢。30就一个橙色对吧，那我来一个90 90就是一个这个绿色了，来一个这个120 120万，你可以测一下这个这环上的一个这个这个颜色，我再来一个一百一百五，一百二还绿不吧唧的是吧，一百五哎就点又深了，对吧，如果是360，那就是转回来了，总之这个东西就根据这个环来的，这环来的，所以这玩意儿咱们取的也挺费劲的啊，你可以通过这环你自己去调，你自己调这个值就变了啊，就通过这环来的，我这就不演示了啊，就不演示了，这是我们说的，第一个是我们的这个色相，第二个是我们颜色的一个饱和度啊，饱和度现在诶我这它又给我换成RGB了啊，我给他改回来啊，这块还是改成零，第一个是我们色相，第二个是我们饱和度，饱和度现在是100，这颜色是饱和度最佳的，我如果写90%，这颜色就要稍微的稍微的有点发灰一点，我要改成50%，你看这颜色又会稍微深一点，如果我是0%，那就变成。

是一个什么，变成灰色，颜色就没有了，所以这就是颜色一个饱和度啊，如果最大那就是100%，第三一个就是一个亮度啊，就是一个亮度，总之HSL就是这么一玩意儿啊，就这么玩意儿，你用的时候，我估计你自己去整的话，也可能不太好整，所以建议用的话还是用这个RDBA，你看我这一拖，这颜色我这一改啊，它这还能改对吧？它这也能改对吧，这是亮度，你看往上，往上边最亮就变成白色了，往下边最最深就变成黑色了，所以你可以通过这儿去调这个颜色，你再加个透明度，那就变成这个什么了，变成这个，哎，变成这hsla了，是一样的啊，是一样的，所以这我就不多说了，但是告诉你还有一种方式，HSL，当然这种方式用的。

没有那么多啊，没有那么多了解一下，我们这来评一下。