color-thief
color-thief copied to clipboard
lokesh
how to get most different two colors of all colors in the color palette
I want to set dominant color as html page background color, and set another color as font color. So , I want to get the color which is most different from the dominant color.
Can we assume that when you say "most different" you actually mean to say that the target color would be the complimentary color? Can we also assume that the color you want, does not actually have to come from the palette returned by color-thief?
If so, let us then also assume that the dominant color returned is green. It should therefore be correct to state that what you expect as "most different color" is to be red, like the picture below
Given all of this, the answer should be something like this.
thanks, yes, I want to analysis a image and get the palette by color-thief. Then, I want to use two colors which are all from that palette, one is the dominant color used as background color and another is text color. I need to make the text as clear as possible, so I want to get the best text color from that palette.
Ok...
Let us imagine that you end up with 3 colors in the palette. Lets stick with the previous example where the dominant color is green and your other two colors are split as per the below. From your comment you expect the returned color not to be red but one of the other two colors. Considering the even split across the spectrum, which of the two should we pick?
Further to this, there is also a consideration of which color space you're working in. I'm assuming that you expect to follow the above, but there are other options. For instance, in the RGB space you would have every secondary color a a complement of one primary color: cyan complements red (not green like above), magenta complements green, and yellow complements blue. The calculation of which color to return is therefore also quite different.
It's not as simple as it might seem at first.
If contrast, or rather legibility, is what you are going for then you also have to consider that your image might not lend itself to the kind of treatment you are envisaging. Imagine a scene like the below.
The dominant color is #48566e, the complimentary color to that is #6e5748 which is actually closer to the sixth color in the palette. It's some kind of brownish color. Using that for your text will not give you the expected result. An example of that below.
If you've read this far, your attention span is longer that a regular Twitter user, congrats!
So. In conclusion I hope that I've laid out enough questions for you to: a) ponder whether the solution you are envisaging is really going to solve your need and b) realize that your ask is so specific it is unlikely someone aside from yourself will log a PR for it.
If legibility is what you are looking for, and you are willing to consider options:
- If you are willing to go outside of the palette you may want to consider something like Brian's Adaptive Backgrounds
- If you want to code a few things you could leverage something like get-contrast to compare the dominant color to each of the colors in the palette to decide which one has the highest contrast ratio.
Good luck.