CODEWITHSUNDEEP
javascriptjquery
shubham
shubham

Reputation: 83

how can i convert rgb value to hex color using jquery?

I am trying to get color of div on clicking it, for that i have created 4 div and gave different color to each div, i want to get color of div when i click on it. I am getting color in rgb values, i want it in hexadecimal, please help me.

Please let me know how can i convert the rgb value i am getting into hexadecimal using jquery only. 

<html>

   <head>
      <style>
         #first {
            background-color: red;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #second {
            background-color: green;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #third {
            background-color: yellow;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #fourth {
            background-color: blue;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #flip,
         #slide {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
         }

         #slide {
            padding: 50px;
            display: none;
         }

         p {
            margin-top: 20px;
            padding: 5px;
            border: 2px solid #666;
         }

      </style>

      <script src="jquery/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
            $("button").click(function() {

               $("#first").animate({
                  left: '250px'
               });
               $("#second").animate({
                  left: '200px'
               });
               $("#third").animate({
                  left: '150px'
               });
               $("#fourth").animate({
                  left: '100px'
               });

            });

         });

         $(document).ready(function() {
            $("#flip").click(function() {
               $("#slide").slideToggle("slow");


            });

         });



         $(function() {
            $("div").click(function() {
               var color = $(this).css("background-color");
               $("p").html(color);
            });
         });

      </script>


   </head>

   <body>

      <div id="first" style="position: relative;">

      </div>

      <div id="second" style="position: relative;">

      </div>

      <div id="third" style="position: relative;">

      </div>

      <div id="fourth" style="position: relative;">

      </div>


      <p> </p>
      <button type="button">Event</button>

      <div id="flip">Click To Slide down</div>

      <div id="slide">Welcome To Slide</div>

   </body>

</html>```

Upvotes: 6

Views: 3622

Answers (3)

Negi Rox
Negi Rox

Reputation: 3932

You can use below function to convert your values.

var hexDigits =["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 
var hex= function(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

for more reference

Upvotes: 3

Sushil Kumar
Sushil Kumar

Reputation: 1537

You could write a Javascript function, which will take the r,g,b values and spit out the hex value. I found a solution on following website: https://campushippo.com/lessons/how-to-convert-rgb-colors-to-hexadecimal-with-javascript-78219fdb

var rgbToHex = function(rgb) {
    var hex = Number(rgb).toString(16);
    if (hex.length < 2) {
        hex = "0" + hex;
    }
    return hex;
};

var fullColorHex = function(r, g, b) {
    var red = rgbToHex(r);
    var green = rgbToHex(g);
    var blue = rgbToHex(b);
    return red + green + blue;
};

you can use it like following example: 

fullColorHex(10, 20, 30); 
// returns color code 0a141e

Upvotes: 2

Sundar Ban
Sundar Ban

Reputation: 619

You can try this

function rgb2hex(rgb){
 rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

for more vist More info here

Upvotes: 0

Related Questions