1、英文命令色彩

p{color:red;}

2、RGB色彩

这个与 `photoshop` 中的 `RGB` 色彩是统一的,由 `R(red)`、`G(green)`、`B(blue)`三种色彩的比例来配色。如:p{color:rgb(133,45,200);}每一项的值能够是 0~255 之间的整数,也能够是 0%~100% 的百分数。如:`p{color:rgb(20%,33%,25%);} RGB的第四个参数是透明度,取值为0-1

3、十六进制色彩

这种色彩设置办法是当初比拟广泛应用的办法,其原理其实也是 RGB 设置,然而其每一项的值由 0-255 变成了十六进制 00-ff。如:p{color:#00ffff;}

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之间。

生成随机颜色代码:

办法一:RGB色彩    function RandomColor1(){            return '#'+Math.floor(Math.random()*255).toString(10)    }办法二:十六进制色彩    function RandomColor2(){            return'#'+Math.floor(Math.random()*0xffffff).toString(16)    }办法三:    应用RGB来示意,并应用es6语法,应用RGB的益处,一是代码少,简略好实现;二是能够反对透明度,透明度也能够反对随机色彩    function RandomColor3 () {            const r = Math.round(Math.random()*255);            const g = Math.round(Math.random()*255);            const b = Math.round(Math.random()*255);            //随机色彩返回的是一个0.5到1 的两位小数;如果生成的0-1就间接是            const a = ( (Math.random()*5 + 5) / 10 ).toFixed(2)                    const a =Math.random()            const color = `rgba(${r},${g},${b},${a})`            console.log(color)            return color    }办法四:    function RandomColor4 (){            //随机一个32的4次幂而后取整,这个值靠近fffff的十进制            var random=parseInt(Math.random()*Math.pow(32,4));            var v=('00000'+random.toString(16)).substr(-4);            //random返回一个位数不确定的整数,而后toString(16)转化成16进制,            //如果这个随机数位数不够四位的话前边拼接5个0,最初截取后四位            return v;    }办法五:    function RandomHColor5() {             //随机生成十六进制色彩        var hex = Math.floor(Math.random() * 16777216).toString(16);             //生成ffffff以内16进制数            while (hex.length < 6) {                //while循环判断hex位数,少于6位后面加0凑够6位                hex = '0' + hex;            }            return '#' + hex; //返回‘#'结尾16进制色彩    }

本文链接:https://www.ngui.cc/51cto/sho...