css里颜色的那些事儿(合法颜色值)

css中主要有六种方法指定颜色：

1.十六进制颜色

2.RGB颜色

3.RGBA颜色

4.HSL色彩

5.HSLA颜色

6.预定义/跨浏览器的颜色名称

前三种是我们最常见的，也是用的最多的，而后三种对于初学者来说简直就是“什么鬼？”。但是！不用怕，今天我们就来好好聊聊css中的这六位小成员的事儿。

一、十六进制颜色

      十六进制颜色是个比较温和惹人爱的成员，深受所有浏览器的喜爱，它的组成部分是“#RRGGBB”，其中RR(red红色)，GG(green绿色)，BB(blue蓝色)。但是它也是有限制的，它的所有值必须介于0~9、A~F(a~f)，不区分大小写。

div{
    background-color:#8e236b;
}

下面炒几个特殊颜色的小栗子：

• #ff0000值呈现的是红色，因为红色的组成设置为最高(ff)，而其他设置为0

         (同理#00ff00为绿色，#0000ff为蓝色)

• #000000值为黑色
• #ffffff值为白色

二、RGB颜色

      RGB颜色也是个被所有浏览器宠爱的成员，区别于十六进制颜色的是，RGB颜色值更具体一点，由于值的范围扩大，展现出的颜色也更加丰富一点。它的指定是RGB(红，绿，蓝)。每个参数定义颜色的亮度，取值范围为0~255之间的整数，或者一个从0%~100%之间的整数百分比值。

跟上一位成员一样，当它三个参数中的某个参数达到最高值的时候，它将表现为该参数的纯色。

#word{
    color:rgb(255,255,153);
}

下面上图一个百度爸爸给的附带RGB的十六进制颜色码

三、RGBA颜色

      这个成员就比较挑剔了，是个“不尊爱老人”的主儿，专挑青壮年以下的下手，只有IE9, Firefox3+, Chrome, Safari,和Opera10+能被宠幸。它和上面那个唯一的区别就是它的参数多了一个A：alpha通道的延伸，指定对象的透明度，让原本就多的颜色更多了一个区分通道，自然颜色也多了。

      alpha参数是一个只取小数点后一位，介于0.0(完全透明)和1.0(完全不透明)之间的参数。

下面上一组RGB参数相同，A参数不同的对比图(多余样式我就不写了，主要看效果)

div{
    background: rgba(223,106,95,.3);
}

div{
    background: rgba(223,106,95,.9);
}

注意：当写alpha参数时，小数点前面的0可直接省去。

四、HSL颜色

      说到这个成员就厉害了，作为工业街的一种颜色标准，它的色彩几乎包括了人类实力所能感知的所有颜色，是目前运用最广的颜色系统之一。这么厉害的角色，自然也是有所挑剔的，只有IE9, Firefox, Chrome, Safari,和Opera 10+能支持。

HSL是css3才出现的表现格式，代表色相、饱和度和亮度，使用色彩圆柱坐标表示。下面来看百度爸爸的解释。

1.H(hue)色相：

      代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是0°到360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照60°圆心角的间隔排列。大致按照红橙黄绿青蓝紫的顺序，定好大致颜色后再根据所在角度选取就好啦！

是不是不懂？上图你就明白了

当六种主色排列融合后，我们就能随便写角度选颜色啦~

2.S(saturation)分量

      指的是色彩的饱和度，它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大，颜色中的灰色越少，颜色越鲜艳，呈现一种从理性(灰度)到感性(纯色)的变化。

 

div{
    background-color:hsl(120,65%,75%);
}

div{
    background-color:hsl(120,65%,75%,.5);
}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有