Skip to content
Related Articles

Related Articles

Improve Article
How to get hex color value of RGB value ?
  • Last Updated : 12 Jun, 2019

Given the RGB color value and the task is to get the Hex Code of that color using JavaScript.

Approach 1:

  • Call the convert() user defined function and use RGB value as a parameter.
  • Use match() method to select the value of Red, Green, and Blue. The value of RGB is stored in the form of array.
  • The hexCode() function call to convert the value of RGB to hexCode.
  • The slice() method gets the part of a string and returns the extracted parts in a new string. The toString() method converts the number to string.

Example 1: This example gets the RGB value of white which is rgb(255,255,255) and converts it into HexCode by using JavaScript.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to get hex color value
        of RGB color value
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 19px; font-weight: bold;">
    </p>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN" style=
        "color: green; font-size: 24px; font-weight: bold;">
    </p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML = 'Click on button to hex code of the color';
  
        function convert(rgb) {
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  
            function hexCode(i) {
                return ("0" + parseInt(i).toString(16)).slice(-2);
            }
            return "#" + hexCode(rgb[1]) + hexCode(rgb[2]) 
                    + hexCode(rgb[3]);
        }
  
        function GFG_Fun() {
            down.innerHTML = "Hex Code of 'white' = "
                + convert('rgb(255,255,255)');
        }
    </script>
</body>
  
</html>                    

Output:

  • Before clicking the button:
  • After clicking the button:

Example 2: This methods first checks, if hex value is provided instead of RGB value. Because some browsers return the hex value in place of the RGB value. This example gets the RGB value of green which is RGB(0,128,0) and converts it into HexCode by creating a function.




<!DOCTYPE Html>
<html>
  
<head>
    <title>
        How to get hex color value
        of RGB color value
    </title>
</head>
  
<body style="text-align:center;">
      
    <h1 style="color:green;"
        GeeksforGeeks 
    </h1>
      
    <p id="GFG_UP" style=
        "font-size: 19px; font-weight: bold;">
    </p>
      
    <button onClick="GFG_Fun()">
        click here
    </button>
      
    <p id="GFG_DOWN" style=
        "color: green; font-size: 24px; font-weight: bold;">
    </p>
      
    <script>
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML = 'Click on button to hex code of the color';
  
        function convert(rgb) {
            if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
  
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  
            function hexCode(i) {
                return ("0" + parseInt(i).toString(16)).slice(-2);
            }
            return "#" + hexCode(rgb[1]) + hexCode(rgb[2])
                    + hexCode(rgb[3]);
        }
  
        function GFG_Fun() {
            down.innerHTML = "Hex Code of 'Green' = "
                    + convert('rgb(0,128,0)');
        }
    </script>
</body>
  
</html>                    

Output:

  • Before clicking the button:
  • After clicking the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :