前端js十六进制格式的颜色和rgba格式颜色互转

最新推荐文章于 2025-07-06 17:13:40 发布

原创最新推荐文章于 2025-07-06 17:13:40 发布 · 置顶 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

js语法专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何将十六进制颜色代码转换为RGBA格式，以及反之亦然的方法。包括使用JavaScript函数实现十六进制到RGBA的转换，以及两种从RGBA到十六进制的转换方法。

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

一.十六进制转RGBA

/*
* @param: hex { string} 例如:"#23ff45"
* @param: opacity  { string || number } 透明度
* @return: { string } 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 + ")"
}

二.RGBA转十六进制
方法1：这个好理解

const toHex = function(r, g, b) {
  const INT_HEX_MAP = { 10: 'A', 11: 'B', 12: 'C', 13: 'D', 14: 'E', 15: 'F' };
  const hexOne = function(value) {
    value = Math.min(Math.round(value), 255);
    const high = Math.floor(value / 16);
    const low = value % 16;
    return '' + (INT_HEX_MAP[high] || high) + (INT_HEX_MAP[low] || low); // 转换核心
  };
  if (isNaN(r) || isNaN(g) || isNaN(b)) return '';
  return '#' + hexOne(r) + hexOne(g) + hexOne(b);
};

方法2：核心规则不好理解

/*
* @param: color { string}
* @return: { string } 十六进制
*/
function colorRGB2Hex(color) {
  var rgb = color.split(',')
  var r = parseInt(rgb[0].split('(')[1])
  var g = parseInt(rgb[1])
  var b = parseInt(rgb[2].split(')')[0])
  var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  return hex
}
var myHex = colorRGB2Hex('rgba(255,232,186,0.4)')
console.log(myHex) // "#f5faf3"