html - Finding background color of page or page view using Javascript

I am a JS newbie with a plex 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 plex 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

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

Share Improve this question asked Jun 4, 2014 at 8:44 arpan.r 1,9812 gold badges26 silver badges43 bronze badges

1 Just work your way through each one. Its not that hard. If body has background..... else if first div has background.... etc. – Ruddy Commented Jun 4, 2014 at 8:51
1 Check out the answer to this question it may help: stackoverflow./questions/4256339/… – Ryan Brewer Commented Jun 4, 2014 at 8:54
1 I don't think you're going to get a plete 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 Commented Jun 4, 2014 at 9:04
1 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 Commented Oct 21, 2016 at 18:23
1 @a4arpan See also Get the document's background color – guest271314 Commented Oct 22, 2016 at 0:20

| Show 1 more ment

4 Answers 4

Sorted by: Reset to default 6

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

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.

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

Make a screenshot and then find the most mon color.

Is the most mon 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 mon 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 putation 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 mand 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Finding background color of page or page view using Javascript - Stack Overflow