如何使用 JavaScript 将十六进制转换为 RGBA 值？

给定一个颜色十六进制代码，任务是将十六进制值转换为 RGBA 值。以下是在 JavaScript 的帮助下讨论的一些主要技术。

方法一：

• 首先通过正则表达式检查传递的十六进制值是否有效。
• 然后使用.slice() 方法获取 '#' 之后的十六进制值内容，并使用.split() 方法获取数组中十六进制值的每个字符。
• 如果数组的长度为 3（例如 #fff、#aaa），则将它们存储为（例如分别为 #ffffff、#aaaaaa）以使长度为 6。
• 将代码转换为十六进制，因为前 2 个字符属于红色值，中间 2 个字符属于绿色值，依此类推。

示例：此示例使用上面讨论的方法。

 
 
  
 
     
        How to convert Hex value to RGBA
        value using JavaScript
    
 
  
 
      
     
        GeeksForGeeks 
    
      
    
    
      
     
        Click Here
    
      
    
    
      
    
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var hexValue = '#fbafff';
          
        el_up.innerHTML = "Click on the button to"
                + " get the RGBA value of Hex "
                + "Value.<br>HexValue = '" + 
                hexValue + "'";
          
        function convertHexToRgbA(hexVal) {
            var ret;
              
            // If the hex value is valid.
            if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hexVal)) {
                  
                // Getting the content after '#',
                // eg. 'ffffff' in case of '#ffffff'
                ret = hexVal.slice(1);
                  
                // Splitting each character
                ret = ret.split('');
                  
                // Checking if the length is 3
                // then make that 6
                if(ret.length == 3) {
                    var ar = [];
                    ar.push(ret[0]); 
                    ar.push(ret[0]);
                    ar.push(ret[1]);
                    ar.push(ret[1]);
                    ar.push(ret[2]);
                    ar.push(ret[2]);
                    ret = ar;
                }
                  
                // Starts with '0x'(in hexadecimal)
                ret = '0x'+ ret.join('');
                  
                // Converting the first 2 characters
                // from hexadecimal to r value
                var r = (ret>>16)&255;
                  
                // Converting the second 2 characters
                // to hexadecimal to g value
                var g = (ret>>8)&255;
                  
                // Converting the last 2 characters
                // to hexadecimal to b value
                var b = ret&255;
                  
                // Appending all of them to make
                // the RGBA value
                return 'rgba('+[r, g, b].join(',')+',1)';
            }
        }
        function gfg_Run() {
            el_down.innerHTML = "The RGBA value of '"
                + hexValue + "' is '" + 
                convertHexToRgbA(hexValue) + "'";
        } 
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 使用.slice() 方法获取前 2 个字符并将它们转换为十六进制。
• 对于其余代码，每 2 个字符重复步骤 1。
• 将它们附加在一起并返回最终值。

示例：此示例使用上面讨论的方法。

 
 
  
 
     
        How to convert Hex value to RGBA
        value using JavaScript ?
    
      
    
    
 
  
 
      
     
        GeeksForGeeks 
    
      
    
    
      
     
        Click Here
    
      
    
    
      
    
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var hexValue = '#fbafff';
          
        el_up.innerHTML = "Click on the button to get"
                + " the RGBA value of Hex Value."
                + "<br>HexValue = '" + hexValue + "'";
          
        function convertHexToRgbA(hex, a) {
              
            // Convert the first 2 characters to hexadecimal
            var r = parseInt(hex.substring(1, 3), 16),
              
            // Convert the middle 2 characters to hexadecimal
            g = parseInt(hex.substring(3, 5), 16),
                  
            // Convert the last 2 characters to hexadecimal
            b = parseInt(hex.substring(5, 7), 16);
                  
            // append them all
            return "rgba(" + r + ", " + g + ", "
                    + b + ", " + a + ")";
        }
          
        function gfg_Run() {
            el_down.innerHTML = "The RGBA value of '"
                    + hexValue + "' is '" + 
                    convertHexToRgbA(hexValue, 1) + "'";
        } 
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：