Why is the color code I picked from an image slightly different from my official brand HEX?

Because the pixel you clicked had already changed before it reached you: JPEG compression, resizing, screenshots and color profile conversion all nudge the values. The tool reads that pixel exactly, but the image is no longer a faithful copy of your color. The brand guide's code stays the reference.

Published · 3 min read

How big is the difference usually?

Say your official brand color is #0F6B5F. You open a JPEG of an old ad with the logo on it, click in the middle of the color, and get #106C60. That is one level per channel: red 16 instead of 15, green 108 instead of 107, blue 96 instead of 95. In HSL it reads hsl(172, 74%, 24%) instead of hsl(172, 75%, 24%). Nobody can see that difference, and JPEG compression is the usual cause.

If you get #2D8C7E instead, which is hsl(171, 51%, 36%), that is not a small compression wobble. It is clearly lighter and less saturated, which means the image was edited, converted between color profiles, or you clicked near an edge that blends into the background.

Where the drift comes from

  • JPEG compression stores colors approximately, so neighboring pixels vary a little even in an area that looks flat.
  • Resizing merges several pixels into one, so colors mix at the borders between shapes.
  • Screenshots and re-uploads: every platform recompresses images its own way, and a logo saved from a post is not the original file.
  • Color profiles: images saved in Display P3 or Adobe RGB are converted to sRGB by the browser before they are read, so the numbers change even when the color looks alike.

Find the cause yourself

  1. Open the image in the Image color picker and click in the middle of the color area.
  2. Move the marker a few pixels in each direction with the arrow keys. If the value wobbles by a level or two, that is compression and not worth worrying about.
  3. If the value holds steady but sits far from the brand code, the file itself is not true to the color: it may have been exported with another profile or edited.
  4. Try the original PNG of the logo if you have it. If it gives the official code, the other copy was the problem.

Which code do you use in the end?

Use the brand guide's code everywhere you type a color by hand: store settings, design templates, print. Use the tool to confirm that your files carry that color, or to find a color you have no code for at all. If you have no brand guide, make the original PNG your single source and never take the code from an image that has been through compression.

A different code does not mean the tool misread anything. It reads one pixel of the full-resolution image, not the scaled preview, and reports it as the browser decoded it.

Common questions

My design app shows a different number for the same image. Why?

Some apps show values in the image's own color profile, while the tool reads sRGB values as the browser decodes them. Images saved in other profiles can therefore give different numbers.

Would a one-level difference show in print?

One level per channel is invisible on screen, and print has much bigger factors such as paper and ink. For print, use the codes your printer asks for from your brand guide.

Could the brand code itself be wrong?

Codes do get copied between files with typos. If the original logo file gives a steady, different value, ask your designer which one is correct.