css颜色值设置方式有哪些？以及如何随机一个颜色?

Posted 2020-09-04 成都苏天天

网页中颜色的使用方式有一下几种

1、颜色名称 ，如red  black white

2、十六进制颜色，网页中常用，每两位代表红绿蓝的值的比例，  如 #ffffff白色   #000000黑色

3、rgba颜色，   如 rgba(255,255,255,0.5)  半透明白色  ，此方式ie8及以下不兼容

RGBA(R,G,B,A)

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数 | 百分数

A：Alpha透明度。取值0~1之间。

4、hsla颜色值，  如 hsla(360, 50%, 50%, .5)  半透明红色 ，    此方式ie8及以下不兼容

HSLA(H,S,L,A)  

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%

A：Alpha透明度。取值0~1之间。

 

那么怎么随机一个颜色值呢？

一般我们可以在使用rgba 或者 hsla模式的时候随机里面的值

1、随机rgba颜色

1）随机一个0~255的值，2）将这些值拼接成rgba的字符串即可

代码如下：（创建一个透明度为0.8的随机的颜色对象，获取对象的color属性及为需要的rgba颜色值）

//颜色对象
  function Color(){
    this.r = Math.floor(Math.random()*255);
    this.g = Math.floor(Math.random()*255);
    this.b = Math.floor(Math.random()*255);
    this.color = ‘rgba(‘+ this.r +‘,‘+ this.g +‘,‘+ this.b +‘,0.8)‘;
  }

2、随机hsla颜色

1）随机一个0~360的颜色值范围，2）拼装hsla的颜色值字符串（后面的饱和度、亮度、透明度按自己需求给值即可）

//颜色对象
  function Color(){
    this.colorAngle = Math.floor(Math.random()*360);
    this.color = ‘hsla(‘+ this.colorAngle +‘,100%,50%,1)‘;
  }