rgb颜色

rgb颜色指的是在网页中用到的最基本的三种原色，r代表红色(red)，g代表绿色(green)，b代表蓝色(blue)。rgb三个颜色的取值范围都是十进制的0~255，值越大亮度越大。当rgb都设置为0，表示为黑色；当rgb都设置为255，表示设置为白色。在css中定义颜色通常是这样：

#demo{
    color: rgb(0,0,0);//表示颜色设置为黑色，rgb(255,255,255)表示白色，rgb(255,0,0)表示红色。
}

hex颜色

hex（hexadecimal）颜色和RGB颜色是一样的，都是代表三原色，只不过是用16进制的数值来表示而已。以一个‘#’开始，后面跟着6位16进制的数值，每两位表示一种颜色。对应的是红色、绿色、蓝色，即#RRGGBB（不区分大小写）。每位数字的取值范围是0-F（0-f），10对应A，11对应B，12对应C，13对应D，14对应E，15对应F。

与RGB同理，0最小，F最大，因此黑色就是#000000，白色就是#FFFFFF，红色就是#FF0000;

rgb颜色转换为hex颜色原理及javascript实现

rgb颜色转换为hex的关键就是rgb的红黄蓝对应hex的红黄蓝，也就是rgb中的三个数值依次对应hex中的1红黄蓝所对应的16进制表示法。比如rgb(169,245,8)，表示红色的数值是169，黄色的是245，蓝色是8，将这三个数值分别转换为16进制就可以了。比如红色169转换为16进制就是A9。用到的javascript方法就是Number类型的原生方法toString()。toString方法的使用可以参考这里。

function rgbToHex(rgb){
    if(!/^(rgb|RGB)/.test(rgb)){
        return rgb;//如果输入不是rgb(xx,xx,xx)的格式，直接返回
    }
    //参数rgb是字符串形式的'rgb(xx,xx,xx)'
	var color = rgb.toString().match(/\d+/g);//将参数中的数值提取出来放在数组中
    var hex = '#';
    for(var i = 0; i < 3; i++){
        /**
        ** 这里有三个地方需要注意，首先如果转换为16进制以后是个位数，需要前面补0，凑足两个数位
        ** 其次toString(16)转换的前提条件是数值类型，需要Number()
        ** 方法转换，或者使用+转换也可以；最后使用slice(-2)方法取得最后面两个字符，这样可以去掉多余的0
        **/
        if(color[i] < 0 || color[i] > 255){//处理值不符合的数值，比如256就直接返回了
            return rgb;
        }
        hex += ('0' + Number(color[i]).toString(16)).slice(-2);
    }
    return hex;
}

hex颜色转换为rgb颜色的原理及javascript实现

hex颜色，其实分为两种，即#ccc或者#cccccc这两种都表示同一种颜色，因此需要考虑将#ccc这种3位数字的变成6位数字。另外，#BBBBBB 等同于#bbbbbb，不区分大小写，因此这一点也要注意转换。hex颜色转换为rgb颜色的核心就是将16进制的数值转换为10进制的数值，而javascript中正好有这样的全局函数parseInt()——如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。所以我们只需要将每两位hex颜色取出来，然后前面加上‘0x’就能使用parseInt转换为10进制了。或者用parseInt(数字字符串，16)的语法也可以实现。


    function hexToRgb(hex){
        var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
        if(reg.test(hex)){
            var color = [],hex = hex.slice(1);
            if(hex.length === 3){
                for(var i = 0; i < 3; i++){
                    color[i] = parseInt(hex[i] + hex[i],16);
                }
                return 'rgb(' + color.join(',') + ')';
            }else if(hex.length === 6){
                for(var i = 0;i < 3; i++){
                    color[i] = parseInt('0x' + hex.substr(i*2,2));
                }
                return 'rgb(' + color.join(',') + ')';
            }
        }else{
            return hex;
        }
    }