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



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.


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’].


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 −{
   return hexVal+hexVal;


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,{
   return hexVal+hexVal;

Let’s have a look at our function code −

   var arr=hexcolorCode.split("")
      return hexVal+hexVal;

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.


Now let’s embed our JavaScript function code to HTML web page for real-time check.

<!DOCTYPE html>
   <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>
      function ConvertToSix(){
         var hexcolorCode=document.getElementById("val").value
            var arr=hexcolorCode.split("")
               return hexVal+hexVal;
         } else {
            document.getElementById('writeHere').innerHTML="Please enter 3 digit hex code..!"


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.

Updated on: 29-Jul-2022


Kickstart Your Career

Get certified by completing the course

Get Started