JS - 将十六进制的颜色值转成rgb、rgba格式

2019-03-12 发布：hangge 阅读：8014

日常开发中，经常要对不同格式的颜色域值进行相互转换。下面通过样例演示如何将十六进制颜色值（HEX）转换成 RGB（RGBA）格式的颜色值。

1，转换函数

为方便使用，我们首先封装两个转换函数。

//hex -> rgb
function hexToRgb(hex) {
  return 'rgb(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5))
          + ',' + parseInt('0x' + hex.slice(5, 7)) + ')';
}

//hex -> rgba
function hexToRgba(hex, opacity) {
  return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ','
          + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')';
}

2，使用样例

var sHex = '#ff008b';
console.log('十六进制格式：', sHex);
console.log('RGB格式：', hexToRgb(sHex));
console.log('RGBA格式：', hexToRgba(sHex, 0.5));