十六进制和RGB互相转换

最新推荐文章于 2025-04-12 21:53:19 发布

Rain2022111

最新推荐文章于 2025-04-12 21:53:19 发布

阅读量3.8k

点赞数

分类专栏： js笔记（基础+练习）文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_52276756/article/details/130684246

版权

js笔记（基础+练习）专栏收录该内容

28 篇文章

订阅专栏

文章介绍了如何使用JavaScript编写函数进行RGB与十六进制颜色之间的转换。函数包括将十六进制转换为RGB/RGBA，以及将RGB/RGBA转换回十六进制。转换过程中涉及到颜色的基本知识，如三基色（红、绿、蓝）和颜色强度的表示方法。

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

任何颜色都是由三种最基本的颜色叠加形成的，这三种颜色称为三基色,三基色是“红”、“绿”、“蓝”三种颜色;
在网页上要指定一种颜色，就要使用RGB模式来确定，方法是分别指定R/G/B，也就是红/绿/蓝三种基色的强度，通常规定，每一种颜色强度最低为 0，最高为255，并通常都以16进制数值表示，那么255对应于十六进制就是FF，并把三个数值依次并列起来，以#开头。

十六进制转 rgb/rgba

获取十六进制颜色代码的左 2 位数字，并转换为十进制值以获得红色级别。
获取十六进制颜色代码的 2 个中间数字，并转换为十进制值以获得绿色级别。
获取十六进制颜色代码的 2 位正确数字，并转换为十进制值以获得蓝色级别。

function hexToRgb(hex, weight) {

  var reg = new RegExp("^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$");

  let color = hex ? hex.toLowerCase() : hex;

  if (color && reg.test(color)) {

    if (color.length === 4) {

      let temp = "#";

      for (let i = 1; i < 4; i += 1) {

        temp += color.slice(i, i + 1).concat(color.slice(i, i + 1));

      }

      color = temp;

    }

    var colorRes = [];

    for (let i = 1; i < 7; i += 2) {

      colorRes.push(parseInt("0x" + color.slice(i, i + 2)));

    }

    if (weight) {

      return "rgba(" + colorRes.join(",") + "," + weight + ")";

    }

    return colorRes.join(",");

  } else {

    return color;

  }

}

rgb 转十六进制

function rgbToHex(rgb) {

  let rgbArr = rgb.split(",");

  let r = parseInt(rgbArr[0].split("(")[1]);

  let g = parseInt(rgbArr[1]);

  let b = parseInt(rgbArr[2].split(")")[0]);

  // <<: 位操作符,1<<24是 把1左移24位,

  let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

  return hex;

}
console.log(rgbToHex("rgb(225,125,205)"));

rgba 转十六进制

function rgbaToHex(rgba) {

  let values = rgba

    .replace(/rgba?\(/, "")

    .replace(/\)/, "")

    .replace(/[\s+]/g, "")

    .split(",");

  let a = parseFloat(values[3] || 1),

    r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),

    g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),

    b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);

  return (

    "#" +

    ("0" + r.toString(16)).slice(-2) +

    ("0" + g.toString(16)).slice(-2) +

    ("0" + b.toString(16)).slice(-2)

  );

}

console.log(rgbaToHex("rgba(225,125,205, 0.55)"));