ToolSahla, Tools Sahla

Why does my colleague get slightly different HEX values from the same image in the palette extractor?

The algorithm is deterministic, with no randomness: the same image with the same settings in the same browser gives the same palette every time. Differences come from two places: different settings between you, or a different browser that decodes and shrinks the image slightly differently. Compare settings first; the JSON download records them for you.

Published · 3 min read

Step one: are the settings really the same?

Most of the time the cause is simpler than it looks: one of you changed a setting without noticing. Each of these changes the result:

  • The number of colors: five colors form different groups from six, so the averages move even for colors you both see.
  • The sample size: 100, 200 and 400 mean entirely different samples, and so different average colors.
  • Ignoring transparent, near-white and near-black pixels: each option changes which pixels are counted.
  • The file itself: an image sent over WhatsApp or downloaded from a platform is not the original, even if it looks identical.

How to compare precisely

  1. Each of you opens the image in the Image palette extractor extractor and sets up the options.
  2. Each of you downloads the palette as JSON.
  3. Open both files and compare the settings section: number of colors, sample maximum side, actual sample dimensions, the three ignore options and the number of pixels counted.
  4. Compare the source image dimensions and name recorded in the file too. Different dimensions mean you are not analysing the same file.

If any of these differ, you have found the cause. Match the settings and compare again.

If everything matches and the difference remains

That leaves the browser. The tool runs inside your browser and asks it to decode the image and shrink it to the sample size. Browsers do not do this in a literally identical way:

  • JPEG decoding can differ in the last level of some pixels from one browser to another.
  • Converting color profiles such as Display P3 to sRGB can be applied with different precision.
  • The smoothing used when shrinking is not the same in every browser.

Those small pixel differences can nudge a group's average by a level or two, and occasionally move a boundary between two groups so one color shifts a little more. The result is still an honest description of the image, just not identical to the digit across browsers.

Working as a team without the headache

Do not ask everyone to extract colors themselves. Extract them once, share the JSON, the CSS variables or the PNG strip, and make that file the team's single reference. Then everyone works with the same codes, whatever browser they use.

Common questions

Does re-running in the same browser always give the same result?

Yes. There are no random numbers in the algorithm, so the result repeats exactly with the same image and settings.

How big a difference should I expect between two browsers?

Usually a level or two in some channels, and occasionally more if the difference moves pixels from one group to another.

Does a phone give a different result from a laptop?

It can, if the browser or its engine differs. The cure is the same: one reference palette everyone shares.