How to get background color of a site?

Question

Let me explain. I am not looking for a particular attribute of a particular DOM element. I started thinking that if I checked the background-color of the body element, I would find the background color of a page.

But for example for this site: performance bikes the background color of body is black, and it's "obvious" that the main background color of the site is white.

So, I am parsing the site with PhantomJS. What do you think would be a good strategy to be able to find the most "visible" background-color. I don't know how to say that, but for a human it is kind of obvious which color is the background. How to find it programatically?

EDIT: the bikes site is just an example. I am thinking on how I would do this for "any" page.

No where on that website does it say the background is black besides the main nav. There is no main background and that is why it has a white background, by default. On the `body` tag the `color` is indeed black but that is for text. — Josh Powell, Nov 13 '13 at 22:53
Usually backgrounds are containers of other elements, an approach would be finding the biggest container and uses its color, but your problem isn't simple at all. — Ahmed Jolani, Nov 13 '13 at 22:53
What is the problem that you're trying to solve? Why do you want to do this programmatically? — Pointy, Nov 13 '13 at 22:56
@Pointy experimenting on creating a sum up of a page in a PNG. Extracting some info, and I would like the background to be "familiar" with the page. By familiar I mean the most visible background. — Hommer Smith, Nov 13 '13 at 23:01
How about generating X,Y coordinate pairs at random, then use document.elementFromPoint() to get the front-most element at X,Y. Grab it's computed background-color, rinse and repeat to create a bucket of samples, and take the most frequent occurrence. Hacky? yes. Other solutions? probably hacky as well. Image background? you're toast, anyway... — Mike Edwards, Nov 13 '13 at 23:11
The bikes site has a yellow background in my Firefox. This is because I deliberately set a non-white default background so I get reminded to always set an explicit background colour on my own sites. (The point being that the correct answer here is perhaps "null"...) — Darren Cook, Nov 14 '13 at 03:02

score 0 · Accepted Answer · edited May 23 '17 at 12:19

0

The background color of the Performance bikes site is transparent. However, because of some weird reason, they decided to make the whole main div to be absolute position, therefore, the body tag is 1px high and thus showing the default white color. One idea I have is, you can check if the body's height is less than some percentage of the window. If it is too small, then it probably is white, or transparent for some special browsers.

Alternatives including taking a screenshot of the page and determine the background color from it.

edited May 23 '17 at 12:19

Community

1
1

answered Nov 13 '13 at 22:55

Derek 朕會功夫

92,235
44
185
247

Where are you seeing that it says it is black? This `color: #333333;` is for text color and on the `body id="xyz` and `#mainPage` have no `background`/`background-color` on it. – Josh Powell Nov 13 '13 at 22:58
No problem, it seems like everyone is. :] – Josh Powell Nov 13 '13 at 23:00
Derek, say I have a screenshot... How would I find the background color? Pixel by pixel and counting colors of each of them? – Hommer Smith Nov 13 '13 at 23:03
@HommerSmith Open up photoshop and use the eyedropper tool. :p – Josh Powell Nov 13 '13 at 23:04
@HommerSmith - Well actually it depends on how you define "background" color. Take [this page](http://helpx.adobe.com/x-productkb/policy-pricing/customer-alert.html?promoid=KHQGF) for example, is white the background color or gray? – Derek 朕會功夫 Nov 13 '13 at 23:06
Gray :) It's background the white and it is visible... Even though in this case both white and gray would be acceptable. It's hard to know how to define most 'visible' background-color. – Hommer Smith Nov 13 '13 at 23:07
@Derek朕會功夫 that website's color is the rainbow. :} – Josh Powell Nov 13 '13 at 23:10
@Derek朕會功夫 :D - I am parsing major product websites. The colors are usually straight (nothing against that Mario Bross background-color though) – Hommer Smith Nov 13 '13 at 23:11
@HommerSmith - I suggest that you can take something like ten pixels, five per side, at the very edge of the left and right side. Most of the time the background color will appear there. – Derek 朕會功夫 Nov 13 '13 at 23:16
Derek, when taking a picture of that site (performancebikes), I see the background transparent. – Hommer Smith Nov 14 '13 at 21:51
@HommerSmith - If it is background is transparent, then I think the browser will usually apply the default white, however it is [not always the case](http://files.myopera.com/Kastelang/blog/2011-05-28_172507.png). – Derek 朕會功夫 Nov 15 '13 at 05:37

score 0 · Answer 2 · answered Nov 13 '13 at 22:59

0

You can use javascript and check which of the layers is on top, also the width and height of that div, then just grab its background-color property.

answered Nov 13 '13 at 22:59

spacebiker

3,777
4
30
49

Villarrealized · Answer 3 · 2013-11-13T23:36:25.700

What about something like this?

Not perfect, but should return you the element with the biggest area and make sure that it is visible. Won't account for it being below other elements, but it's a start...

var element={
    width:0,
    height:0,
    color:'',
    jQEl:{}
}

$('*:visible').each(function(){
    var $this = $(this);
    var area = element.width*element.height;
    var thisArea = $this.width()*$this.height();
    if(thisArea>area){
        element.width = $this.width();
        element.height= $this.height();
        element.color=$this.css('background-color');
        element.jQEl=$this;
    }
});

console.log(element)

score 0 · Answer 4 · answered Nov 14 '13 at 03:07

I'd take a screenshot, then make a histogram of the image to find the most common colour.

Refinements:

First go through and replace all text content with "& nbsp;"
Give extra weight to the pixels closest to the edge of the screen.

(To automate entirely within PhantomJS, you might be able to use something like http://html2canvas.hertzen.com/ to use a canvas, and never need to make an external image file.)

score -1 · Answer 5 · answered Nov 13 '13 at 23:06

-1

Another nice solution is to use browser plug-ins. I use Eye Dropper for chrome.

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

Or you can use colorPicker for Firefox. To get it, in your firefox browser, goto:

Tools -> Add-ons -> top right search bar look for "colorPicker"

It's 10 times faster to find the color of a background on a site this way than searching through the CSS code.

answered Nov 13 '13 at 23:06

Dan Jimenez

115
10

This is horrible answer...how hard is it to just right-click, "inspect element" and view the CSS? lol – Mike Barwick Nov 13 '13 at 23:08
@HommerSmith If you need a complex function to find colors within an image and DOM elements then you need to do a lot of research or find a function that someone made. – Josh Powell Nov 13 '13 at 23:08
@MikeBarwick The only plus that I see to this answer is you can not just inspect an images colors. – Josh Powell Nov 13 '13 at 23:09
@MikeBarwick well if an element has a gradient applied across it with CSS, or if the element is translucent and lays over another element with a different color, the CSS won't tell you much. – Pointy Nov 14 '13 at 00:06
Huh? lol Same thing. For each live website you can get every single CSS function...gradients are applied with the same background css element..so I don't understand you question. – Mike Barwick Nov 14 '13 at 00:12

How to get background color of a site?

5 Answers5