网页中颜色的使用方式有一下几种
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)';
}