How To Convert Hex To RGBA Value Using JavaScript - GeeksforGeeks

How to convert Hex to RGBA value using JavaScript ? Last Updated : 25 Aug, 2023 Summarize Comments Improve Suggest changes Like Article Like Save Share Report Follow

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() methodand 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.

JavaScript

const hexValue = '#fbafff'; function convertHexToRgbA(hexVal) { let 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) { let 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 let r = (ret >> 16) & 255; // Converting the second 2 characters // to hexadecimal to g value let g = (ret >> 8) & 255; // Converting the last 2 characters // to hexadecimal to b value let b = ret & 255; // Appending all of them to make // the RGBA value return 'rgba(' + [r, g, b].join(',') + ',1)'; } } function myFunc() { console.log("The RGBA value of '" + hexValue + "' is '" + convertHexToRgbA(hexValue) + "'"); } myFunc(); Output

The RGBA value of '#fbafff' is 'rgba(251,175,255,1)'

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.

JavaScript

const hexValue = '#fbafff'; function convertHexToRgbA(hex, a) { // Convert the first 2 characters to hexadecimal let 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 myFunc() { console.log("The RGBA value of '" + hexValue + "' is '" + convertHexToRgbA(hexValue, 1) + "'"); } myFunc();