Getting a list of all colors on a webpage

To get all colors on a page with jQuery, you can use the “*” selector to get all DOM elements, call “getComputedStyle” on each element, and then de-duplicate the results:

var elements = $('*');
 
function getColor(i, v) { 
  return window.getComputedStyle(v).color 
}
 
colors = $.unique(elements.map(m));
<pre>
 
Unfortunately this gives you just CSS, and not images, but still pretty useful:
 
<pre>
["rgb(66, 137, 186)", 
 "rgb(131, 131, 131)", 
 "rgb(119, 119, 119)", 
 "rgb(0, 0, 0)", 
 "rgb(66, 137, 186)", 
 "rgb(119, 119, 119)", 
 "rgb(101, 101, 101)", 
 "rgb(255, 255, 255)", 
 "rgb(119, 119, 119)"]

As a potentially better approach, you can group all the DOM elements together (which would let you change color later)

function col(v) { 
  return window.getComputedStyle(v).color;
}
 
_.groupBy(elements, col)

Interested in JavaScript? I send out weekly, personalized emails with articles and conference talks. Click here to see an example and subscribe.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *