一直都在用的rgba与hex颜色系统你了解过吗？

最新推荐文章于 2025-03-11 14:55:23 发布

达瓦利什

最新推荐文章于 2025-03-11 14:55:23 发布

阅读量4.5k

点赞数

分类专栏：前端大杂烩文章标签：程序员

本文链接：https://blog.csdn.net/w_____w_____/article/details/124416700

版权

前端大杂烩专栏收录该内容

16 篇文章

订阅专栏

这篇博客探讨了rgb和rgba颜色系统，rgb是一种广泛使用的颜色标准，rgba增加了透明度控制。hex颜色系统通过16进制表示rgb或rgba，通常使用3位或6位表示，而4位和8位则用于表达rgba中的透明度。文章还介绍了如何从hex转换到rgba，并提出了实现hexToRgba函数的思路。

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

rgb与rgba

rgb(255,255,255)

rgb色彩模式是工业界的一种颜色标准，是通过对红®、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。（摘自百度百科）

rgba(255,255,255,0.3)

rgba即在rgb的基础上新增最后一位代表透明度，范围为0 - 1，小数点后保留两位。

hex

#FFFFFF

简单来说hex就是将rgb或rgba的每位转化为对应的16进制来表示。

对于hex,平常最常见的就是3位和6位的，例如：#f1f #ff11ff ，两者表示同一种颜色.即3位是6位的缩写。
因此#ffffff就代表ff,ff,ff 即rgb(255,255,255)。

但其实hex还有4位以及8位的情况，用来表示rgba。例如：#RGBC #RRGGBBCC，
与表示rgb相同，4位hex是8位hex的缩写。比较特殊的一点就是最后1(2)位。用来代表rgba的最后一个值即透明度。以ff为1，00为0.进行百分比运算，因为透明度只支持两位小数。所以相邻的两个数代表同一个透明度。

如:

#7f11e0fd rgba(127, 17, 224, 0.99) rgb(127, 17, 224)

#7f11e0fc rgba(127, 17, 224, 0.99) rgb(127, 17, 224)

hex to rgba

知道两者的区别后，现在让我们来实现一个hexToRgba函数把hex格式转化为rgba格式吧。

/**
 * @param {string} hex
 * @return {string}
 */
function hexToRgba(hex) {
  let len = hex.length - 1;
  const validChar = /^#[a-fA-F\d]+$/.test(hex);
  const validLength = [3, 4, 6, 8].includes(len);
  if (!validChar || !validLength) {
    throw Error('无效的hex')
  }
  //删掉#，将hex转换为数组
  hex = hex.slice(1).split('');
  function getColor() {
    let digit = hex.shift();
    digit += len > 4 ? (hex.shift()) : digit;
    //通过parseInt转为10进制数
    return parseInt(digit, 16)
  }
  const r = getColor();
  const g = getColor();
  const b = getColor();
  const a = hex.length ? (round(getColor() / 255)) : 1;
  return `rgba(${r},${g},${b},${a})`
}

function round(num) {
    return Math.round(num * 100) / 100
}