Menu
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>```
526
First ValueTake the first number, 220, and divide by 16. 220 / 16 = 13.75, which means that the first digit of the 6-digit hex color code is 13, or D. Take the remainder of the first digit, 0.75, and multiply by 16. 0.75 (16) = 12, which means that the second digit of the 6-digit hex color code is 12, or C.
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.
Designers and developers use HEX colors in web design. A HEX color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB). Basically, a HEX color code is shorthand for its RGB values with a little conversion gymnastics in between.
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
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
