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 3-digit color code to 6-digit color code using JavaScript?
In this tutorial, we will see how to convert 3-digit color code to 6-digit color code in JavaScript.
So, basically three-digit color code represents the three-digit value of the colour of the form in #RGB format. To convert 3-digit color hex color to 6-digit we just have to do is convert every element of the three digit and make it duplicate.
If we say in easy manner, then duplicating the three-digit color will give the hexadecimal whose value is same as three-digit color value.
3-digit value: #RGB will be written as #RRGGBB in 6-digit color code.
For example,
3-digit value: #08c 6-digit color Code: #0088cc
Algorithm
STEP 1:
First, we will check its length if it’s length is 3. If(hexcolorCode.length === 3) then only we will perform something on this else we will leave it as it is. So, if it satisfies length property as 3.
STEP 2:
Now we will split the using hexcolorCode.split(“”) method. The split() method breaks string into array using a separator by default separator specified is one blank space ‘ ‘.
So after applying split() it will return as [ ‘f’, ‘b’, ‘0’].
STEP 3:
Now we will apply map method and iterate thorough all the items in the array and then we will perform repetition by adding item to itself
So, our array from procedure 2 is: arr= [ ‘f’, ‘b’, ‘0’].
After applying map −
arr.map(function(hexVal){
return hexVal+hexVal;
});STEP 4:
Now we will apply join method which will convert every item of the array into one single string, join method have a separator which comes in between every array item while joining and if we don’t specify any separator inside it then by default it will be considered as a comma ‘,’
So, from the step 3 code simply we will add a join method at last,
arr.map(function(hexVal){
return hexVal+hexVal;
}).join(‘’);Let’s have a look at our function code −
if(hexcolorCode.length===3){
var arr=hexcolorCode.split("")
var sixDigit=arr.map(function(hexVal){
return hexVal+hexVal;
}).join('');Here all our steps have been combined if hexColorCode length is 3 then only we will move further, after that we will apply split function to convert it into array from string entered and then we will apply map and then while iterating we will add to times its value parallelly we will be joining all the characters which is there in the array.
Example
Now let’s embed our JavaScript function code to HTML web page for real-time check.
<!DOCTYPE html>
<html>
<body>
<h2>Convert 3 digit hex code to 6 digit code</h2>
<input type="text" id="val" placeholder="Enter 3 digit hexCode " />
<input type="button" value="Convert" onclick="ConvertToSix()" style="color: blue"/>
<h2 id="writeHere"></h2>
<script>
function ConvertToSix(){
var hexcolorCode=document.getElementById("val").value
if(hexcolorCode.length===3){
var arr=hexcolorCode.split("")
var sixDigit=arr.map(function(hexVal){
return hexVal+hexVal;
}).join('');
document.getElementById('writeHere').innerHTML=sixDigit
} else {
document.getElementById('writeHere').innerHTML="Please enter 3 digit hex code..!"
}
}
</script>
</body>
</html>Output
So, we saw all the procedure and steps to follow to convert our 3-digit color code to 6-digit hex color code and also got to know about how to use that in the real application.
747 Views
