如何使用JavaScript将Hex转换为RGBA值

在设计网页时，我们使用颜色使网页更具吸引力和吸引力。我们通常使用十六进制代码表示颜色，但有时需要向颜色添加透明度，这可以通过RGBA值实现。

十六进制颜色值表示为 ＃RRGGBBAA，RGBA颜色值表示为 rgba（red，green，blue，alpha）。以下是RGBA和十六进制值的几个示例−

输入：＃7F11E0
输出：rgba（127,17,224,1）
输入：＃1C14B0
输出：rgba（28,20,176,1）

在本文中，我们将讨论使用JavaScript将Hex转换为RGBA的多种方法。

使用parseInt和String.substring方法
使用数组解构和正则表达式

使用ParseInt和String.substring方法

parseInt（）函数接受两个参数：表示数字的字符串和表示基数的数字。然后将字符串转换为指定基数的整数并返回结果。

String.substring方法用于通过获取起始位置和结束位置来提取字符串的某些部分。

要将HEX转换为RGBA，我们使用以下步骤。

使用String.substring方法保留#并逐个提取hex字符串的两个字符对。
提取后，使用parseInt方法将每个对转换为整数。由于我们知道这些对是十六进制代码，因此需要将第二个参数传递为16。
在将每个HEX代码对转换为整数后，将它们连接到RGBA格式中。

示例

在本示例中，我们将Hex代码转换为RGBA。

<!DOCTYPE html>
<html>
<head>
   <title>Convert Hex to RGBA value using JavaScript</title>
</head>
<body>
   <h3>Converting Hex to RGBA value parseInt() and String.substring() methods</h3>
   <p id="input"> Hex Value: </p>
   <p id="output"> RGBA Value: </p>
   <script>
      let hex = "#7F11E0";
      let opacity = "1";
      // Convert each hex character pair into an integer
      let red = parseInt(hex.substring(1, 3), 16);
      let green = parseInt(hex.substring(3, 5), 16);
      let blue = parseInt(hex.substring(5, 7), 16);

      // Concatenate these codes into proper RGBA format
      let rgba  = ` rgba({red},{green}, {blue},{opacity})`

      // Get input and output fields
      let inp = document.getElementById("input");
      let opt = document.getElementById("output");

      // Print the values
      inp.innerHTML += hex;
      opt.innerText += rgba;
   </script>
</body>
</html>

使用Array.map（）和String.match（）方法

Javascript数组map（）方法创建一个新数组，其中包含调用此数组中每个元素的提供函数的结果。

String.match方法用于在将字符串与正则表达式匹配时检索匹配项。

要将HEX转换为RGBA，我们使用以下步骤。

使用/ \ w \ w / g正则表达式和String.match方法匹配hex字符串中每个连续两个字母数字字符的每个序列。
您将在数组中获得三对字母数字字符，并使用Array.map和parseInt方法将这些字符转换为整数。

例子

在这个例子中，我们将十六进制代码转换为RGBA值。

<!DOCTYPE html>
<html>
<head>
   <title>使用JavaScript将Hex转换为RGBA值</title>
</head>
<body>
   <h3>使用Array.map()和String.match()方法将Hex转换为RGBA值</h3>
   <p id="input"> Hex: </p>
   <p id="output"> RGBA: </p>
   <script>
      let hex = "#7F11E0";
      let opacity = "1";

      // 使用正则表达式从hex字符串中提取单个颜色值
      let values = hex.match(/\w\w/g);

      // 使用parseInt()将十六进制颜色值转换为十进制值并将它们存储在r、g和b中
      let [r, g, b] = values.map((k) => parseInt(k, 16)) 

      // 使用十进制值和不透明度创建rgba字符串
      let rgba = ` rgba( {r},{g}, {b},{opacity} )`

      // 获取输入和输出字段
      let inp = document.getElementById("input");
      let opt = document.getElementById("output");

      // 打印值
      inp.innerHTML += hex;
      opt.innerText += rgba;      
   </script>
</body>
</html>