2

My goal

is to find a way to grab a 2 hex colors automatically base on an image.

The 2 colors should be selected base on the majority/percentages of the color appearance, excluding (white+black color).

Ex.

Base on this logo

enter image description here

I should get back these 2 hex base on the logo

  • Orange = #F48024
  • Grey = #BCBBBB

Ex 2.

Base on this logo

enter image description here

I should get back these 2 hex base on the logo

  • Red = #EF0101
  • Blue = #2C32A8

Is there a frameworks/API that help me achieve that?

I'm not looking to re-invented the wheel here.

Community
  • 1
  • 1
code-8
  • 54,650
  • 106
  • 352
  • 604
  • 1
    Try [Vibrant.js](http://jariz.github.io/vibrant.js/) – Ori Drori Jun 13 '17 at 20:21
  • 1
    Possible duplicate of [How to get the average or main color from an image with javascript?](https://stackoverflow.com/questions/5162828/how-to-get-the-average-or-main-color-from-an-image-with-javascript) – Dez Jun 13 '17 at 20:41

1 Answers1

0

You can use this to check these details

var img = document.createElement('img');
img.setAttribute('src', 'examples/octocat.png')

img.addEventListener('load', function() {
    var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())
});

Output

  • Results into:
  • Vibrant #7a4426
  • Muted #7b9eae
  • DarkVibrant #348945
  • DarkMuted #141414
  • LightVibrant #f3ccb4

Source from https://github.com/jariz/vibrant.js/

Dheeraj Mishra
  • 31
  • 1
  • 4