Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert Hex to RGBA value using JavaScript?
While designing web pages we use colors to make web pages more appealing and engaging. We commonly use hex code to represent colors but sometimes we need to add transparency to the colors which can be achieved by RGBA values.
Hex color values are represented by #RRGGBB and The RGBA color values are represented by rgba(red, green, blue, alpha). Here are a few examples of RGBA and hex values:
Input: #7F11E0 Output: rgba(127, 17, 224, 1) Input: #1C14B0 Output: rgba(28, 20, 176, 1)
In this article, we will discuss multiple ways to convert Hex to RGBA using JavaScript.
Using parseInt and String.substring method
Using Array destructuring and Regular expressions
Using ParseInt and String.substring Method
The parseInt() function takes in two arguments: a string that represents a number, and a number that represents the radix. It then converts the string to an integer of the specified radix and returns the result.
The String.substring() method is used to extract some part of a string by taking the start and end positions.
To convert HEX to RGBA we use the following steps:
Remove the # and extract pairs of two characters from the hex string using the
String.substring()method.Convert every pair into an integer using the
parseInt()method with radix 16 (hexadecimal).Concatenate the results into RGBA format with desired opacity.
Example
In this example, we are converting Hex code to RGBA using parseInt() and substring():
<!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.innerHTML += rgba;
</script>
</body>
</html>
Hex Value: #7F11E0 RGBA Value: rgba(127, 17, 224, 1)
Using Array.map() and String.match() Methods
The JavaScript Array.map() method creates a new array with the results of calling a provided function on every element in the array.
The String.match() method is used to retrieve matches when matching a string against a regular expression.
To convert HEX to RGBA we use the following steps:
Match every sequence of two consecutive alphanumeric characters using the
/\w\w/gregular expression andString.match()method.Convert the matched pairs into integers using
Array.map()andparseInt().Use array destructuring to assign the RGB values and format as RGBA.
Example
In this example, we are converting Hex code to RGBA using regular expressions and array methods:
<!DOCTYPE html>
<html>
<head>
<title>Converting Hex to RGBA value using JavaScript</title>
</head>
<body>
<h3>Convert Hex to RGBA value using Array.map() and String.match() methods</h3>
<p id="input">Hex: </p>
<p id="output">RGBA: </p>
<script>
let hex = "#7F11E0";
let opacity = 1;
// Use regular expression to extract individual color values from hex string
let values = hex.match(/\w\w/g);
// Convert hex color values to decimal using parseInt() and array destructuring
let [r, g, b] = values.map((k) => parseInt(k, 16));
// Create the rgba string using the decimal values and opacity
let rgba = `rgba(${r}, ${g}, ${b}, ${opacity})`;
// Get input and output fields
let inp = document.getElementById("input");
let opt = document.getElementById("output");
// Print the values
inp.innerHTML += hex;
opt.innerHTML += rgba;
</script>
</body>
</html>
Hex: #7F11E0 RGBA: rgba(127, 17, 224, 1)
Comparison of Methods
| Method | Complexity | Best For |
|---|---|---|
| parseInt + substring | Simple | Beginners, clear step-by-step approach |
| match + map | Moderate | More concise code, regex familiarity |
Conclusion
Both methods effectively convert hex color codes to RGBA format. The parseInt() approach is more explicit, while the regex method is more concise. Choose based on your preference and team's coding standards.
3K+ Views
