How to Compare Two Color Values in Jquery/Javascript

How can I compare two color values in jQuery/JavaScript?

What about...

if ($('#element').css('color') == 'rgb(0, 0, 0)')
{
    // do something
}

Replace 0, 0, 0 with the red, green and blue values of the colour value you want to compare.

.css() jQuery API

Can I compare two RGB colors in Javascript? And how?

You can use getComputedStyle() to get the list of possible css properties and then look for the value of fill style to match with the expected rgb() value.

let elem = document.querySelector('span');

let style = getComputedStyle(elem);

if (style.fill === 'rgb(255, 255, 255)') {

  console.log('matched!');

}

.circle {

  fill: rgb(255,255,255);

}

<span class="circle">Circle</span>

How to compare background color in jquery when using if else statement

You are comparing the incorrect value of color. The rgb value has a whitespace after each comma so you need to change color == 'rgb(0,128,0)' to color == 'rgb(0, 128, 0)'

$('#switchButton').bind('click', function() {

  var color = $("#switchButton").css("background-color");

  //socket.send(color);

  $('#messages').append('<li>me: ' + color + '</li>');

  if (color == 'rgb(0, 128, 0)')

    $("#switchButton").css("background-color", "rgb(0,0,0)");

  else 

    $("#switchButton").css("background-color", "rgb(255,0,0)");

});

#switchButton{

  background-color: green

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id='switchButton'>Click me</button>

<div id='messages'></div>

jQuery - Compare value and color text

There are several issues with the following piece of code:

$("#param1").change(function(){
    if(parseFloat($("#param_sodium").val(),10) > 100){
        return $("#param_sodium").css('color', 'red');
    } 
})

This creates an event handler for the change event of a div element. But:

• div elements don't natively trigger this event
• Even if they did, you don't want to respond to a future event; you want to set the color right when you are executing this code.

You'll want instead to iterate over the value tags inside that div.

Then there is an issue with param_sodium: there is no element with that id. It seems instead you need to address the value element.

The content of this value element is not available via val(), but via text().

Finally, you set the color to red, but depending on your full code, you might need to reset the color to black as well.

So here is the code that you could use instead:

$("#param1").children().each(function () { 
    $(this).css( 'color', +$(this).text() > 100 ? 'red' : 'black');
})

Note that:

• the unitary + can be use to coerce the text into a number;
• this is the current value element (child of param1);
• the ternary operator is used to determine which color to set.

Is there a way to compare 2 colors in JS, like 'If Color A is darker than #202020'

You could write a function that converts between RGB and HSL or HSV, and use the lightness or brightness value.

Wikipedia has the math for HSV -> RGB conversion, but not the other way.

http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB

You could also probably pull some JS from this page.

http://www.csgnetwork.com/csgcolorsel4.html

jQuery get background-color from two clicked divs and then compare them

I would do it with just one click event. And it's enough to just compare the two rgb strings.

var pick1 = false;
var pick2 = false;

$('.card').click(function(){

    if(pick1) {
        pick2 = $(this).css('background-color');
        if(pick1 == pick2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');   
    }
});

Compare two images color values parallel with canvas

Using onload event of Image can help you make sure that the image is loaded and ready for use.

    let image = new Image();
    image.onload = function(){
        context.drawImage(this, 1, 1);
    }
    image.src = imageData;

That being said, I am not sure if there are other issues in your code.

If you try to call drawImage() before the image has finished loading,
it won't do anything (or, in older browsers, may even throw an
exception). So you need to be sure to use the load event so you don't
try this before the image has loaded:

You can check this page for a comprehensive documentation

---

Related Topics