0

I am trying to write a scroll to top chrome extension that can automatically detect the colour scheme of the website that it is being placed on.

I thought that the best way to do this was by grabbing the very first (top left) pixel on the page and getting the colour of it.

I've searched around SO and found how to do it with an image which means that I could grab a screenshot of the page and just process the image, however I was hoping that there is a much more sophisticated way to do this. The search lead me here: How to get a pixel's x,y coordinate color from an image?

I can include JS packages to do this but I can't seem to find any that can do the specific task that I want.

I currently use jQuery in my project so I can use either or to do this.

B3none
  • 385
  • 3
  • 18
  • 2
    The simplest way to do this would be to convert the HTML of the current page to a canvas, then use an algorithm to determine the median pixel colour, such as in [this library](https://github.com/matkl/average-color/blob/gh-pages/average-color.js) – Rory McCrossan Apr 12 '18 at 14:34
  • 1
    Just a thought, what about using the favicon colours? – Graeme Chapman Apr 12 '18 at 14:34
  • @RoryMcCrossan The only issue with that is that most of a site would be white / whatever the background colour is. I was using the top left specifically to get the colour of a navbar if one exists. – B3none Apr 12 '18 at 14:37
  • @GraemeChapman That's a good thought, I'll give it a go, seems like it could work. – B3none Apr 12 '18 at 14:37
  • 1
    If that's the case why not just read the navbar colour? – Rory McCrossan Apr 12 '18 at 14:38
  • @RoryMcCrossan I was thinking that detection for the navbar could be particularly hard as there are lots of different ways to do it – B3none Apr 12 '18 at 14:42
  • `$('#navbar').css('background-color')`, or back to the link you posted in the question if the background is an image – Rory McCrossan Apr 12 '18 at 14:44
  • 1
    That wouldn't work; not every site uses `#navbar` to identify the navigation element. For that matter, though, the (0,0) pixel isn't necessarily going to be part of the navbar either (in many sites that would give you the header color, the page margin color, or whatever happens to be the top left pixel of a hero image.) – Daniel Beck Apr 12 '18 at 15:02

0 Answers0