0

I am wondering if there is a way to detect the prominent color of a webpage? I mean mainly the background color of the page using javascript and html5.

Please note that I am mainly considering two scenarios: 1. a page with a background color and 2. a page with a background image.

I will more more than happy if any has some good ideas on this question.

hippietrail
  • 15,848
  • 18
  • 99
  • 158
Future2020
  • 9,939
  • 1
  • 37
  • 51
  • 3
    You could get the background color with javascript and that'd be the color you want... For an image, load it into a canvas and go pixel by pixel, detecting the color and averaging it with an RGB value of every color. Once everything is averaged, the color you get will be the average of every color in the image. – jeremy Aug 25 '12 at 14:08
  • Can you tell us more about your end goal, it would help give an answer that makes sense. – Robin Aug 25 '12 at 14:10
  • also see this answer http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript – karth Aug 25 '12 at 14:29

2 Answers2

0

Use jquery to find the value of background-color value of the body tag.

$("body").css("background-color")
Igor Parra
  • 10,214
  • 10
  • 69
  • 101
  • No need for jQuery: `getComputedStyle(document.body,null).getPropertyValue('background-color')` (or `document.body.currentStyle.backgroundColor` for OldIE) – Rob W Aug 25 '12 at 14:24
0

For all elements on the site:

$("*").each(function(e){
     console.log($(this).css('backgroundColor'));
});

does the trick.

Just sort the results properly.

HTH

Gekkstah

gekkstah
  • 76
  • 1