{"id":2551,"date":"2015-08-16T13:22:16","date_gmt":"2015-08-16T13:22:16","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=2551"},"modified":"2015-08-16T13:22:16","modified_gmt":"2015-08-16T13:22:16","slug":"getting-a-list-of-all-colors-on-a-webpage","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/getting-a-list-of-all-colors-on-a-webpage\/","title":{"rendered":"Getting a list of all colors on a webpage"},"content":{"rendered":"<p>To get all colors on a page with jQuery, you can use the &#8220;*&#8221; selector to get all DOM elements, call &#8220;getComputedStyle&#8221; on each element, and then de-duplicate the results:<\/p>\n<pre lang=\"Javascript\">\nvar elements = $('*');\n\nfunction getColor(i, v) { \n  return window.getComputedStyle(v).color \n}\n\ncolors = $.unique(elements.map(m));\n<pre>\n\nUnfortunately this gives you just CSS, and not images, but still pretty useful:\n\n<pre>\n[\"rgb(66, 137, 186)\", \n \"rgb(131, 131, 131)\", \n \"rgb(119, 119, 119)\", \n \"rgb(0, 0, 0)\", \n \"rgb(66, 137, 186)\", \n \"rgb(119, 119, 119)\", \n \"rgb(101, 101, 101)\", \n \"rgb(255, 255, 255)\", \n \"rgb(119, 119, 119)\"]\n<\/pre>\n<p>As a potentially better approach, you can group all the DOM elements together (which would let you change color later)<\/p>\n<pre lang=\"Javascript\">\nfunction col(v) { \n  return window.getComputedStyle(v).color;\n}\n\n_.groupBy(elements, col)\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>To get all colors on a page with jQuery, you can use the &#8220;*&#8221; selector to get all DOM elements, call &#8220;getComputedStyle&#8221; on each element, and then de-duplicate the results: var elements = $(&#8216;*&#8217;); 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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/getting-a-list-of-all-colors-on-a-webpage\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Getting a list of all colors on a webpage&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[302,313,343],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/2551"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=2551"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/2551\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=2551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=2551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=2551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}