ToolSahla, Tools Sahla

Should I use the color picker or the palette extractor to pull brand colors out of an image?

Use the color picker when you know where the color you want sits and you need its exact value, such as the main shape of your logo. Use the palette extractor when you want the image's dominant colors and the share each one covers. Palette swatches are group averages, so they may not match any single pixel.

Published · 3 min read

The difference in one sentence

The picker answers 'what exactly is the color of this point?', and the extractor answers 'which colors make up this image, and in what proportion?'. The questions sound alike, but the numbers they give can differ, and that difference is what decides which tool fits your job.

An example that shows it in numbers

A red logo on a white background. In the picker, a click in the middle of the red shape gives #C81E28, rgb(200, 30, 40). That color really exists in the file, and it is what you should type into your store settings.

In the palette extractor, ask for only two colors from an image with 450 red pixels, 450 white ones and 100 pale pink pixels along the edges, and you get #FAEBEC at 55% and #C81E28 at 45%. #FAEBEC is not in any pixel of the image; it is the average of the white and the pink after the algorithm grouped them together. Take it as 'the background color' and you would be typing a faint pink instead of white.

When the picker is the right tool

  • You want the value of the logo's main color for your store or design templates.
  • You want the color of one specific small element: a button in a design, a line on a sign, the color of a product box.
  • You need exact coordinates and want to step pixel by pixel with the arrow keys.
  • You want several colors whose positions you know, so you click each one in turn and copy them from the history.

When the extractor is the right tool

  • You do not know in advance which colors matter and want the image to show you its main ones.
  • The proportions matter to you: which color covers most of the area and which is a small touch.
  • You want the colors exported as a ready file: CSS variables, or a GPL file for design apps.
  • You are building a color mood from a product shot or an inspiration image, not hunting for an official code.

The smart way: use both

  1. Start with the Image palette extractor extractor to see the main colors and their shares, turning on 'Ignore near-white' if the background is white.
  2. Decide which of those colors deserve a place in your brand.
  3. Open the same image in the Image color picker and click in the middle of each area holding one of those colors, to get its real value from a pixel that exists.
  4. Use the picker's values in your settings, and keep the palette as a reference for proportions.

Common questions

Why does a palette color not match any point I click?

Because each palette color is the average of a group of similar colors. The picker reads one pixel as it is.

Does the picker average a small area around my click?

No, it reads a single pixel of the full-resolution image. The magnifier shows the surroundings so you can choose yourself.

Which is quicker for a two-color logo?

The picker: two clicks and you are done. The extractor earns its keep on images crowded with colors.