Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
<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.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>
<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 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>
2K+ Views
