Finding background color of page or page view using Javascript

Question

I am a JS newbie with a complex problem. I want to find out the background color of any webpage. The problem is sometime it is defined in the body tag, sometimes in inline or external css and in a more complex example some websites don't set background color on body (in some cases they do as well) but put a DIV that covers the whole page. So my problem is I want to find out the background color of the whole view. Can someone please help me.

I already tried to search before posting this question but I only found ways to get the body color not the background of the whole view so please don't mark it duplicate.

Thanks in advance

Just work your way through each one. Its not that hard. If body has background..... else if first div has background.... etc. — Ruddy, Jun 04 '14 at 08:51
thanks Ruddy, but I have few examples where background color is defined in the body but the div covering up the page has some other background color. — a4arpan, Jun 04 '14 at 08:53
Check out the answer to this question it may help: http://stackoverflow.com/questions/4256339/javascript-how-to-loop-through-all-dom-elements-on-a-page — Ryan Brewer, Jun 04 '14 at 08:54
I don't think you're going to get a complete answer, since there are so many variables involved. How does it know a `div` that covers the whole page is for the background? Getting the background colour from the body tag, whether `inline` or in an `external` stylesheet is pretty trivial however. — Nick R, Jun 04 '14 at 09:04
Hi a4arpan! Do we know what is the markup of the pages? Do we consider background only if the element has at least 100% width and 100% height? In case there are CSS3 gradients on the background, should it be taken as well? — Ivan Chaer, Oct 21 '16 at 18:23
@a4arpan See also [Get the document's background color](http://stackoverflow.com/questions/39543197/get-the-documents-background-color/) — guest271314, Oct 22 '16 at 00:20

score 6 · Answer 1 · answered Jun 04 '14 at 09:01

Here's a start. This will get the background-colour of the <body> tag, whether it's inline or in an external stylesheet.

function getBackground() {

    var getBody = document.getElementsByTagName("body")[0]
    var prop = window.getComputedStyle(getBody).getPropertyValue("background-color");

    if (prop === "transparent") {
        console.log("No background colour set")
    } else {
        console.log(prop);
    }
}

getBackground();

JSFiddle Demo

score 2 · Accepted Answer · answered Oct 19 '16 at 11:45

You can use the pure javascript or jquery to achieve what you want. To do what you want you can use this functions

Find by tagname:

function getBackgroundByTagName(tag){
    var color =  $(tag).css('background-color');
    console.log(color);
}

Find by class:

function getBackgroundByClassName(classname){
    var color =  $('.'+classname).css('background-color');
    console.log(color);
}

Find by id

function getBackgroundById(idofelement){
    var color =  $('.'+idofelement).css('background-color');
    console.log(color);
}

All you need to do is to run any of the functions and it will show the color in console.

score 1 · Answer 3 · edited May 23 '17 at 12:09

In theory you could use a canvas element to draw the web page into it and then examine a particular pixel to see what colour it was:

Get all the DOM elements and draw then to a canvas: Mozilla - Drawing_DOM_objects_into_a_canvas

Using script you'd need to clone the contents of the page in question, and then paste it into a canvas element.

Get the pixel colour: Stack Overflow - get-pixel-color-from-canvas-on-mouseover

You could choose the coordinates with the mouse pointer, or you could simple hard code a specific pixel (in the corner of the page perhaps).

score 1 · Answer 4 · answered Oct 23 '16 at 19:35

Make a screenshot and then find the most common color.

Is the most common color the same as the background?

You can visit a couple of websites and see if it is true. I guess for all practical purposes it is. Also this method can handle cases where an image is used as a background. And even for difficult cases like these it's better and much more simple than trying to deduce color from relations of nested blocks. Although it may give incorrect results for gradients, pattern backgrounds, and rich color variations.

How to automate screenshots?

You can use PhantomJS to capture the screenshot and then save it as a png file. This page should explain the details. Don't forget to lower viewport resolution to reduce amount of work.

How to find the most common color?

You can do it using NodeJS, Python, PHP, or any language that have appropriate tools. Just traverse the pixels, store color frequencies in a hash table and then find the key associated with the maximum value. In pseudocode:

table = new HashTable()

# Count the colors
for pixel in pixels:
    if pixel.color not in table.keys:
        table[pixel.color] = 0
    table[pixel.color]++

# Find the color associated with the max count
result = table[table.keys[0]]
for color in table.keys:
    if table[color] > table[result]:
        result = color

print(result)

You could break the image into 10x10 blocks and pick one pixel from each to reduce the amount of computation but low resolution did the same job already, even better: there are also less IO.

How to put these parts together?

PhantomJS has NodeJS API so you can parse pages and find background colors in a single script. For other languages you can call PhantomJS command as an external process and wait until it finishes. Related docs for PHP and Python. Or just Bash, it should be even simpler if you can do Bash scripting.