十六进制颜色与 RGB、HSL 之间的转换

在 CSS 中颜色有多种的表示方法,如颜色名、十六进制、RGB(A)、HSL(A)等,但有些时候我们却需要对其进行转化,下面来看一下这几种表示方法之间的转换。

十六进制转 RGB

十六进制通常写法就是 #3366ff,或者简写成 #36f,而 RGB 颜色其实就是十进制写法,因此这两种颜色之间的转换其实就是十六进制与十进制的转换,这里用到的就是 parseInt()

/**
* 十六进制转RGB
* @param {String} hex 十六进制颜色
* @param {Float} opacity 透明度,可选,默认为1
*/
function hexToRGB (hex, opacity) {
if ( (hex.length !== 4 && hex.length !== 7) || hex.indexOf('#') === -1 ) {
alert('颜色值不合法,请输入正确的16进制颜色值!');
return;
}

hex = hex.replace('#', '');

if (hex.length === 3) {
var hex1 = hex.substring(0, 1);
var hex2 = hex.substring(1, 2);
var hex3 = hex.substring(2, 3);
hex = '' + hex1 + hex1 + hex2 + hex2 + hex3 + hex3;
// console.log(hex);
}

var r = parseInt('0x' + hex.substring(0, 2));
var g = parseInt('0x' + hex.substring(2, 4));
var b = parseInt('0x' + hex.substring(4, 6));

opacity = typeof opacity === 'undefined' ? 1 : opacity;

return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')';
}

RGB 转十六进制

同上,RGB 转十六进制其实就是十进制与十六进制的转换,这里用到的是 toString(),该方法可以把一个 Number 对象转化为字符串。

/**
* RGB 转十六进制
* @param {String} rgb RGB颜色值
*/
function rgbToHex (rgb) {
if (!/^(rgb\().*\)$/.test(rgb.toLowerCase())) {
alert('RGB 颜色格式不正确');
}

// 把 R, G, B 三个颜色值分离出来
var arr = rgb.replace(/\(|\)|(rgb)|\s*/ig, '').split(',');
var hex = '#';

for (var i = 0, len = arr.length; i < len; i++) {
var hexItem = Number(arr[i]).toString(16);
if (hexItem === '0') {
hexItem += '0';
}
hex += hexItem
}

return hex;
}