title: Get dominating color of a specific area in an image: Color Query for Web Page Elements
body: <h2>Problem Description</h2>
  
  <p>I am writing a Java application that lets programmers query for page elements on a web page by specifying visible attributes. One of the most important and difficult is <strong>Color</strong>.</p>
  
  <p>To be specific, i need a way to get the <strong>user-visible color</strong> of web page elements using Selenium 2 and Webdriver. I want to be able to query for color values (<code>#ff0000</code>) or names (<code>red</code>).</p>
  
  <p>One parameter should control the percentage of similar colors needed to be "<strong>dominating</strong>" enough. If set to <code>100%</code> the element is not allowed to have any other color. If set to <code>50%</code> the element needs to be halfway filled with the color.</p>
  
  <p>There should be another parameter to control the "<strong>tolerance</strong>" of these colors. With a higher tolerance, <code>red</code> could also match the orange "Ask Question" button here on Stackoverflow.</p>
  
  <h2>Example</h2>
  
  <p>Given the well-known Stackoverflow web page, i highlighted the page element to check:
  <img src="https://i.stack.imgur.com/UwRkU.png" alt="enter image description here">
  With a higher color tolerance and a not too high domination percentage, the following queries should return the specified result:</p>
  
  <pre><code>color('#FFEFC6') // exact match: true
  color('yellow') // match in tolerance range: true
  color('orange') // true
  color('blue') // false
  color('green') // false
  </code></pre>
  
  <h2>My first approach</h2>
  
  <p>Best bet would be using CSS attributes like <code>color</code> and <code>background-color</code>. But these do not take images into account, which are needed for good color queries. Also, they could produce difficulties because of css selector inheritance and the handling of transparency. In addition, absolutely positioned elements with a higher <code>z-index</code> above the current element could produce unexpected results.</p>
  
  <p>Given is the web page element to check. It is represented either as JavaScript DOM element (or JQuery object) or as <code>RemoteWebElement</code> in the Java bindings of Webdriver.</p>
  
  <p>It is possible to take automated Screenshots of the current state of the web page (i am using Firefox), see here: <a href="https://stackoverflow.com/questions/3422262/take-a-screenshot-with-selenium-webdriver">Take a screenshot with Selenium WebDriver</a></p>
  
  <p>The coordinates of the page element to check are known. Therefore, the screenshot image could cropped to that size and area and be analyzed somehow to check if the query returns true or false.</p>
  
  <h2>Implementation</h2>
  
  <p>I am not limited to Java in this case. <strong>JavaScript</strong> would be very nice because i am doing the other queries with the help of JQuery too. Performance matters. I am counting on you, i fear this is a very difficult task. Therefore i need your input.</p>
  
  <h1>UPDATE</h1>
  
  <h2>I solved this issue by taking screenshots and analyzing the pixel data of the relevant part. That way i can deal with all kinds of background images and transparency. It's part of the Abmash framework, which is open source and free to anybody to use: <a href="https://github.com/alp82/abmash" rel="nofollow noreferrer">Abmash on Github</a></h2>