Posted on

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));


Unfortunately this gives you just CSS, and not images, but still pretty useful:


["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)