css顏色值設置方式有哪些？以及如何隨機一個顏色?

網頁中顏色的使用方式有一下幾種

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