Things about color in css (legal color values)

There are six main ways to specify colors in css:

1. Hexadecimal color

2.RGB color

3.RGBA color

4.HSL color

5.HSLA color

6.Predefined/cross-browser color name

The first three are the most common ones and the most used ones, while the last three are simply "what the hell?" for beginners. but! Don’t be afraid, today we are going to talk about these six little members in CSS.

1. Hexadecimal color

Hexadecimal color is a relatively gentle and lovable member, loved by all browsers The favorite, its components are "#RRGGBB", where RR (red), GG (green), BB (blue). But it is also limited. All its values ​​must be between 0~9, A~F(a~f), and are not case-sensitive.

p{
    background-color:#8e236b;
}

Let’s fry some small chestnuts of special colors:

• #The ff0000 value appears red because the red component is set to the highest (ff), while the others are set to 0

(Similarly #00ff00 is green, #0000ff is blue)

• #000000 value is black

• #ffffff value is white

2. RGB color

RGB color is also a favorite member of all browsers. The difference from hexadecimal color is that RGB The color value is more specific. Due to the expanded range of values, the colors displayed are also richer. Its designation is RGB (red, green, blue). Each parameter defines the brightness of the color, and the value range is an integer between 0 and 255, or an integer percentage value between 0% and 100%.

Same as the previous member, when one of its three parameters reaches the highest value, it will appear as the solid color of that parameter.

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

The picture below is a 16 with RGB given by Baidu Dad Base color code

##3. RGBA color

This member is quite picky, he is a " The master who "does not respect the elderly" specializes in targeting those under young adults. Only IE9, Firefox3+, Chrome, Safari, and Opera10+ can be favored. The only difference between it and the one above is that its parameter has an extra A: the extension of the alpha channel, which specifies the transparency of the object, giving the already many colors one more distinguishing channel, and more natural colors.

The alpha parameter is a parameter that takes only one decimal place and is between 0.0 (completely transparent) and 1.0 (completely opaque).

The following is a comparison chart of the previous set of RGB parameters with the same RGB parameters and different A parameters (I won’t write the redundant styles, mainly focus on the effect)

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

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

Note: When writing the alpha parameter, the 0 before the decimal point can be omitted directly.

4. HSL Color

Speaking of this member, it is amazing, as a color standard for industrial streets , its colors include almost all colors that humans can perceive, and it is one of the most widely used color systems currently. Such a powerful character is naturally picky. Only IE9, Firefox, Chrome, Safari, and Opera 10+ can support it.

HSL is a representation format that only appeared in CSS3. It represents hue, saturation and brightness, and is represented by color cylinder coordinates. Let’s take a look at Baidu Dad’s explanation.

1.H(hue) Hue:

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

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

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

2.S(saturation)分量

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

 

3.L(lightness)分量

      指的是色彩的明度，作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小，色彩越暗，越接近于黑色；数值越大，色彩越亮，越接近于白色。

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

这里要注意的是S和L，S控制的是颜色的鲜艳度，值越大颜色越鲜艳；而L控制的是颜色的亮度，当值为50%的时候是正常亮度。只看最大最小值就能很明显的区分出二者的不同。

 

据张鑫旭大神所说，在取色器中，HSL颜色非常管用，有助于迅速选取我们想要的颜色值。或者根据现有颜色得到近似色。比方说我们要实现一个hover效果，hover一个色块，然后颜色加深，怎么搞？使用RGB很头疼，而使用hsl则很简单，我们只要把l也就是亮度微调低一点就可以。

 

十六进制颜色、RGB和HSL之间可以相互转化，过程比较复杂，在这我就不说了，有兴趣的可以查一下。

五、HSLA颜色

      RGB有兄弟RGBA，那么HSL有姐妹HSLA自然也不奇怪。功能也跟前一对兄弟一样，A控制透明度，属性一切参照RGBA中的。这就不多说了。

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

六、预定义/跨浏览器的颜色名称

      147是在HTML和css颜色规范预定义的颜色名称，是所有浏览器都支持的。147包括17种标准色(浅绿色，黑色，蓝色，紫红色，灰色，灰色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色) 和130多个其他。

结束语：

      关于颜色的主要分类就是以上几种了，平时用的话没有什么太大区别，主要是表达形式的不同，其实也没有多难，结合图片看几遍就明白了。还有一些关于颜色的小知识暂时我还没有涉及到，所以就先写到这吧，如果有什么不好的请多包涵。

 更多css里颜色的那些事儿(合法颜色值) 相关文章请关注PHP中文网！