How to convert Hex to RGBA value using JavaScript ?
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 ?
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 ?
Please Login to comment...