CSS颜色解析

在HTML和CSS中，RGB颜色格式被普遍地使用，通常有如下三种表示方式：

1.六位十六进制表示法，例如"#80FFA0"，每两位，比如说”80”，”FF”，”A0”，分别代表红，绿，蓝三种颜色所占比例的16进制表示。

2.三位十六进制表示法，例如”#3B7”，每一位数字都翻译成两位十六进制数字，可以写成”#33BB77”的形式。

3.预置颜色名称表示法，例如“red”，“blue”。

在这篇博文的实现，将考虑，如何将第一、二种表示法转换为解析后的颜色映射。

//解析颜色字符串//例如："80FFA0"//注意：此时的字符串没有#号function parse(color){	//16进制转换为10进制    var r = parseInt(color.slice(0 , 2) , 16);    var g = parseInt(color.slice(2 , 4) , 16);    var b = parseInt(color.slice(4 , 6) , 16);    //返回映射对象    return {        "r" : r,        "g" : g,        "b" : b    };}function parseHTMLColor(color) {	//如果以#号开头    if(color.indexOf("#") == 0){		//如果是6位表示法        if(color.length == 7){			//去掉#号            color = color.slice(1);        }		//如果是3位表示法        else if(color.length == 4){			//去掉#号            color = color.slice(1);			//分割成数组，作拼接            var array = color.split("").map(e=>e+e);			//聚合成字符串            color = array.join("");                   }    }	//统一做解析，返回    return parse(color);}parseHTMLColor('#80FFA0');  // => { r: 128, g: 255, b: 160 }parseHTMLColor('#3B7');     // => { r: 51,  g: 187, b: 119 }
补充：
第三种表示法也可以做解析，只是要做好颜色名称和十六进制表示法之间的映射关系。