Return wrong dominant color in chrome, firefox but alright in safari about jquery.adaptive-backgrounds.js HOT 6 CLOSED

Breaking this down a little more.

Below are 4 different CodePen implementations with your images. None of them show exactly what you would expect though one does get pretty close.

• a briangonzalez/jquery.adaptive-backgrounds.js implementation
• a briangonzalez/rgbaster.js implemenation.
• a lokesh/color-thief implementation
• a leeoniya/RgbQuant.js imlementation.

As you can see you have some options.

Not all libraries are created equal. Each has its pros and cons. To my knowledge there is no other library like Adaptive Backgrounds built on top of either the Color-Thief or the RgbQuant libraries.

Those two libraries also have a slightly different aim from RGBaster, on top of which Adaptive Backgrounds is built. RgbQuant for instance is not built to give you a palette, that's a side effect more than anything else. It's aim is to quantize images through different algorythms. Color-Thief is probably closer to what you're aiming for given your input images.It doesn't handle the background-coloring work for you though, you'd have to build it.

Some further options you could look into are:

• vibrant.js
• imgcolr
• colorify.js
• grade
• huey
• ColorPal

Hope this helps.

from jquery.adaptive-backgrounds.js.

This should now be fixed.

There was an issue with the underlying RGBaster.js library which:

• skipped a high number of pixels
• only considered an area of 300 by 150px of the source image
• had some issues with transparent pixels and
• didn't keep a list of unique colors.

The latter issue is of no bearing to AD

Would you mind checking and validating if the issue still exists.

from jquery.adaptive-backgrounds.js.

I'm having same issue.
Website
I have the latest version being used.

from jquery.adaptive-backgrounds.js.

Hi @f1ss1on,

I can't seem to reproduce the issue. Chrome and Safari give the same rendering for the page on Mac OS... could you be a little more explicit.

from jquery.adaptive-backgrounds.js.

Hi @AlfredJKwack,

If you look at the link I provided, the color of the cars seem to be the most prominent colors. For some reason though only black and white are pulling as the dominant colors.

Chrome, Firefox, Edge, Explorer on Windows are all returning same color.

Sample Page

Is there a way to adjust this to where it picks up more of a dominant color?

from jquery.adaptive-backgrounds.js.

Hi @f1ss1on

This is going to take a little explaining but essentially the most prominent colours are not what you think. There's a difference between what the eye percieves (the highlights) and the actual image.

The underlying library that actually determines the dominant color looks at each pixel and keeps track how often each color appears. It then orders that list and the color with the most pixels wins out. I've tested your images with a couple of libraries and they all pretty much give the same result as you saw here.

Sorry I can't be of any further help.

from jquery.adaptive-backgrounds.js.