How do I use each color's percentage in the palette to choose my store's main and accent colors?
Each swatch shows the share of the analysed pixels it covers. The large colors that are not background are natural candidates for big areas, and a small but vivid share makes a good accent for buttons. Shares are rounded to one decimal and computed after the exclusions you chose, and you should check text readability on whatever you pick.
An example from a typical product shot
A photo of a leather coffee tin on a cream table, with a small blue-green logo. Open it in the Image palette extractor extractor with four colors and the palette reads:
- #F5F0E6 at 55%: the cream table, in other words the background.
- #785032 at 25%: the tin's main brown.
- #3C281E at 15%: the dark brown in shadows and details.
- #009688 at 5%: the blue-green logo.
Reading shares like a designer
The biggest share usually belongs to the background, which will not be your brand color but tells you the mood: the cream here suggests warm page backgrounds instead of stark white. The second and third colors are the product itself: brown #785032 is a candidate for headings and large areas, and dark brown #3C281E for body text. And #009688, at only 5%, is the one vivid color in the picture, which is exactly what you want on an Add to Cart button: a color that appears rarely and catches the eye when it does.
The working rule: large areas from large colors, touches from small vivid ones. Do not flip it and make the small color the background of the whole page.
Check the text before you commit
Copy the colors into the Color contrast checker. In this example, white text on #009688 gives 3.67 to 1, which passes for large text only, so make the button label large and bold or choose a darker shade. Dark brown #3C281E on cream #F5F0E6 gives 12.21 to 1, excellent for body text. White on brown #785032 gives 7.02 to 1.
Why shares change once you exclude the background
Shares are computed from the pixels left after exclusions, not from the whole image. If the table were nearly white, at rgb(250, 250, 250), and you turned on 'Ignore near-white', 550 of every 1000 pixels would be excluded and the shares redistributed over the rest: brown 55.6%, dark brown 33.3%, blue-green 11.1%. The numbers moved because the denominator changed, not because the product did.
Note that the cream #F5F0E6 in the first example is not removed by the near-white option, because all three channels must be 245 or more and its blue channel is 230. To exclude it, crop the photo around the product.
Why the total is sometimes not 100
Each share is rounded to one decimal. Three colors of equal area each show 33.3%, totalling 99.9. That is rounding in the display, not missing pixels.
Common questions
Does the tool tell me which is main and which is accent?
No. The tool does not suggest colors or roles. It gives you the shares and the decision is yours.
What exactly is the share based on?
The number of pixels in the shrunken sample that fell into each color's group, after the exclusions you chose.
Are the shares kept when I download?
Yes, in the JSON file, and in the CSS file as a comment next to each variable. The GPL file does not carry them.