Pick a Color Code from an Image

The short answer

To find a color code from an image, open the image in a tool that has an eyedropper (color picker), click the area you want, and read the value as hex, RGB, HSL or CMYK. The value you get is the color of the sampled pixel or pixels as stored in that particular file. It is not necessarily the color the designer specified. For logo work, especially logos with gradients, that difference decides whether you can trust the code you pulled.

Tools that can pull a color code from an image

• Design applications: Adobe Illustrator, Photoshop, Affinity apps, Figma, Inkscape and GIMP all include an eyedropper or color picker that reports the sampled value.
• Operating system utilities: macOS includes Digital Color Meter, and Microsoft PowerToys for Windows includes a Color Picker. Both sample whatever is on screen.
• Browser developer tools: Chromium-based browsers offer an eyedropper inside the color picker of their developer tools, which is useful for images shown on a web page.
• Online color pickers: these work from an uploaded image. Uploading sends the file to a third party, so avoid them for unreleased or confidential client artwork.

Why a sampled color may not match the original

• Compression: lossy formats such as JPEG alter pixel values, particularly near edges and in smooth color areas.
• Anti-aliasing: pixels along a shape's edge blend the logo color with the background, so edge samples come out as in-between colors.
• Resizing: scaling an image resamples and blends neighboring pixels.
• Color management: an embedded color profile, a wide-gamut display or a screen-capture tool can change the numbers an on-screen sampler reports. The same file sampled two different ways can therefore give different codes.
• Transparency: a semi-transparent area returns its mix with whatever sits behind it, not the color of the layer itself.
• Photographs: a photo of signage, packaging or print records lighting, camera processing and the printing process, not the brand's specified color.
• Sampler settings: some tools average a block of pixels instead of reading a single point. Check which mode is active.

In practice, use the highest-quality source available. Sample from the flat interior of a shape rather than its edge, and work at 100% zoom or closer. Take several readings and compare them. If the readings disagree noticeably, the image is not a reliable source for an exact code.

Sampling colors from a logo gradient

A gradient has no single color code. In vector artwork it is defined by color stops, where each stop is a color at a position. The gradient also has a type, such as linear or radial, and an angle or center. Some gradients add midpoints and stop opacity. When you sample a raster image of a gradient, you get one interpolated point somewhere along that ramp.

To rebuild a gradient from an image, sample both ends. Then sample wherever the color visibly changes direction, because that is where an extra stop is likely to be. Recreate the gradient in your vector application with those stops, place it beside the source, and adjust positions by eye. Banding, dithering and compression in the raster can distort the readings. Applications and color modes can also interpolate between stops differently, so treat a rebuilt gradient as an approximation until it is checked against an authoritative specification.

In SVG, a linear gradient's stops are written directly in the markup. The values below are placeholders:

<linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="0">
  <stop offset="0" stop-color="#RRGGBB"/>
  <stop offset="0.5" stop-color="#RRGGBB"/>
  <stop offset="1" stop-color="#RRGGBB"/>
</linearGradient>

With vector artwork, read the value instead of sampling it

Genuine vector artwork stores the specified colors in the file itself, so you do not need an eyedropper. In Illustrator, select the object and read its fill in the Color, Swatches or Gradient panel. In an SVG, the values appear as fill, stroke and stop-color attributes in the code. These stored values are what the artwork specifies. A screen sample of the same file is only how that specification was rendered on your display.

Do not assume a file contains editable vector paths because of its extension. An SVG, EPS, PDF or AI file can hold an embedded raster image, and some files show only a raster preview of the artwork. Sampling either one gives you pixel values, with all the drift described above. To check, switch to outline or wireframe view (in Illustrator, View > Outline): embedded images appear as boxes rather than shape outlines. You can also select the element and see whether the application reports a path or an image. In SVG code, an image element, often carrying base64 data, indicates embedded raster content.

Also check the document's color mode. If the artwork is set up in CMYK, the hex value an application displays is a conversion from the stored CMYK numbers, not a value stored in the file.

Hex, RGB, CMYK and spot colors

A hex code is an RGB value written in base 16 as #RRGGBB. Each pair runs from 00 to FF, which equals 0 to 255 in decimal. For example, #FF0000 is the same color as rgb(255, 0, 0). Converting between hex and RGB is exact.

Converting a screen color to CMYK or to a spot color system such as Pantone is not exact. Conversions depend on color profiles and the printing process, and many screen colors have no precise print equivalent. A converted value is a starting point for proofing. It is not an official spot color specification, and you should check printed matches against the swatch system's own reference materials.

Sampled colors versus official brand colors

A code pulled from an image of an existing logo is a recreation, not the brand's specification. Where a brand publishes guidelines or a press kit, the color values there are the authoritative ones. For a client's logo, ask the client or the original designer for the specified values or the source vector file before relying on sampled codes.

Being able to download a logo or read its colors does not give you permission to modify the artwork, use its fonts or use the trademark. Those permissions come from the rights holder's terms, and they are separate from access to the file.

What this article does not cover

No evidence was supplied about specific brands, so this article gives no brand color values and does not identify any particular logo. It also includes no tested measurements comparing the accuracy of different color-picker tools. The guidance above relies on general, verifiable principles about how image files, color modes and vector artwork store and display color.