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

Question

I try something like this:

if(elem.css.fill==='rgb(255,255,255)')

but it doesn't work.

Duplicate here https://stackoverflow.com/questions/9421208/how-to-compare-a-backgroundcolor-in-javascript — David Japan, Dec 13 '19 at 07:31

score 2 · Accepted Answer · answered Dec 13 '19 at 07:32

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>

Note that there is a spacing issue while you compare the rgb() values, where rgb(255,255,255) and rgb(255, 255, 255) is considered as different when you compare it as a string value

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

1 Answers1