Skip to content
Related Articles
Open in App
Not now

Related Articles

How to convert Hex to RGBA value using JavaScript ?

Improve Article
Save Article
  • Last Updated : 24 Jan, 2023
Improve Article
Save Article

Given a color hex code and the task is to convert Hex Value to RGBA value. Here are few of the mostly techniques discussed with the help of JavaScript. 

Approach 1:

  • First check the passed Hex value is valid or not through a Regular Expression.
  • Then get the hex value content after ‘#’ by using .slice() method and use .split() method to get the every character of the hex value in the array.
  • If the length of the array is 3(eg. #fff, #aaa) then store them as(eg. #ffffff, #aaaaaa respectively) to make the length 6.
  • Transform the code to Hexadecimal as the first 2 character belongs to Red Value, the mid 2 character belongs to Green value, and so on.

Example: This example uses the approach discussed above. 

html




<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <p id="GFG_UP">
    </p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN">
    </p>
      
    <script>
        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) + "'";
        }
    </script>
</body>

Output:

How to convert Hex to RGBA value using JavaScript ?

How to convert Hex to RGBA value using JavaScript ?

Approach 2:

  • Use .slice() method to get the first 2 characters and convert them to Hexadecimal.
  • Repeat step 1 for every 2 characters for the rest of the code.
  • Append them together and return the final value.

Example: This example uses the approach discussed above. 

html




<head>
    <script src=
    </script>
</head>
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <p id="GFG_UP">
    </p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN">
    </p>
      
    <script>
        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) + "'";
        }
    </script>
</body>

Output:

How to convert Hex to RGBA value using JavaScript ?

How to convert Hex to RGBA value using JavaScript ?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!