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

LIN-z.

已于 2023-05-08 15:38:00 修改

阅读量2.1k

点赞数 1

文章标签： javascript

于 2023-03-15 09:36:56 首次发布

本文链接：https://blog.csdn.net/lay7889/article/details/129545399

版权

该文章提供两个JavaScript函数，分别用于将十六进制颜色代码转换为RGB和RGBA格式。hexToRgb函数将hex转换为RGB，而hexToRgba则添加了透明度参数opacity，生成RGBA格式的颜色值。示例展示了如何使用这两个函数将#ff008b转换并打印出不同的格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转换函数

//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 + ')'
}

使用样例

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