首页 > 代码库 > css颜色值设置方式有哪些?以及如何随机一个颜色?

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

 

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