# 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 #RRGGBBAA 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.

• Leave the # and extract a pair of two characters of the hex string one by one using the String.substring method.

• After extracting convert every pair into an integer using the parseInt method. As we know these pairs are Hexadecimal codes, so we need to pass 16 the second argument of parseInt.

• After converting each pair of Hex code into Integer concatenate the into RGBA format.

### Example

In this example, we are converting Hex code to RGBA.

<!DOCTYPE html>
<html>
<title>Convert Hex to RGBA value using JavaScript</title>
<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.innerText += rgba;
</script>
</body>
</html>


## Using the 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 this array.

The String.match method is used to retrieve the 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 of the hex string using /\w\w/g regular expression and String.match method.

• You will get three pairs of alphanumeric characters in an array and by using Array.map and parseInt method convert those characters into integers.

### Example

In this example, we are converting Hex code to RGBA.

<!DOCTYPE html>
<html>
<title>Converting Hex to RGBA value using JavaScript</title>
<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 a regular expression to extract the individual color values from the hex string
let values = hex.match(/\w\w/g);

// Convert the hex color values to decimal values using parseInt() and store them in r, g, and b
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.innerText += rgba;
</script>
</body>
</html>


Updated on: 21-Apr-2023

1K+ Views