Contents
  1. Key terms before you start
  2. Step-by-step: extracting color codes from a logo image
  3. Where to find an RGB color picker
  4. Why sampled colors can be wrong
  5. Reading colors directly from vector files
  6. Verifying your extracted colors
  7. Using the values in logo artwork
  8. Limits of this method and what to confirm

To get RGB values from an image, open the file in any tool that has an eyedropper (color picker), click a pixel inside a solid area of the color you want, and read the red, green and blue values, plus the hex code if the tool shows one. For logo work, that pixel reading is only an estimate. It is reliable only when you sample a flat interior area of a clean, high-resolution source, take several samples, and compare them. If you have the original vector file, read the fill values defined in that file instead, because they are the colors the designer actually specified.

Key terms before you start

  • RGB: a screen color model that describes each color as amounts of red, green and blue light. In standard 8-bit images each channel runs from 0 to 255, so white is 255, 255, 255 and black is 0, 0, 0.
  • Hex code: the same RGB value written as six hexadecimal characters, two per channel, after a # sign. For example, #FF0000 is pure red (255, 0, 0).
  • RGBA: RGB plus an alpha channel that records opacity. An RGBA picker reports how transparent a pixel is as well as its color.
  • Eyedropper: the tool in image and design software that reads the color under the cursor.
  • Raster image: a grid of pixels, such as a JPEG, PNG or screenshot. The picker reads whatever color each pixel contains.
  • Vector artwork: shapes built from paths with assigned fill and stroke colors, as in SVG, AI, EPS or vector PDF files. The colors are stored as values, not inferred from pixels.
  • Anti-aliasing: the blending of edge pixels with the background to smooth curves. It creates in-between colors along every logo edge.

Step-by-step: extracting color codes from a logo image

  • 1. Use the best source you can get. Prefer an original vector file, then a large PNG, then a large JPEG. Screenshots and images reposted on social media are the weakest sources.
  • 2. If the file might be vector, check it first. Open it in a vector editor and select a shape. If the shape has a defined fill, read the value there and skip pixel sampling. Don't assume a file is vector because of its extension. An SVG, EPS or PDF can contain an embedded raster image.
  • 3. Open the image in a tool with an eyedropper and view it at 100% or higher so you can see individual pixels.
  • 4. Choose a sampling mode. A single-pixel (point) sample gives that exact pixel. An averaged sample, offered by many editors, smooths out compression noise in flat areas.
  • 5. Click well inside a solid area of the color, away from edges, text, gradients, shadows and texture.
  • 6. Record the value as RGB (three numbers from 0 to 255) and as hex. If the logo has transparency and the tool supports it, also record the alpha value.
  • 7. Sample at least three separate points of the same color in different parts of the logo. If the readings match or differ only slightly, you have a stable value. If they vary widely, the source is compressed, textured or color-shifted, so treat the result as approximate.
  • 8. Repeat for every distinct color in the logo, and give each value a name or role, such as primary, secondary or accent.
  • 9. Verify the result as described in the verification section below.

Where to find an RGB color picker

Tool type | How to sample | Notes for logo work
Raster image editors (for example Photoshop or GIMP) | Eyedropper or Color Picker tool; read the values in the color panel or info panel | Usually offer averaged sampling. Good for checking whether a flat area is truly uniform.
Vector editors (for example Illustrator or Inkscape) | Select an object to read its fill, or use the eyedropper on placed artwork | Reading an object's fill gives the specified value, not a pixel estimate.
Operating system utilities (for example Digital Color Meter on macOS or the PowerToys Color Picker on Windows) | Hover over any on-screen pixel | Convenient, but they read the screen as displayed, which can include display color management and scaling. Check which color space the readout uses.
Browser developer tools | The color picker in the styles panel can sample from the page | Useful when the logo appears on a website. CSS may also show the declared color directly.
Online upload-and-pick tools | Upload the image, then click to see RGB or hex | Fine for quick checks. Remember that uploading sends the file to a third party, which matters for unreleased or confidential artwork.

Why sampled colors can be wrong

  • JPEG compression: lossy compression introduces color noise and blocky artifacts, so neighboring pixels in a supposedly flat area can read differently.
  • Anti-aliased edges: pixels along curves and corners are blends of the logo color and the background. Never sample at an edge.
  • Gradients, textures and effects: a logo with shading, glows or texture has no single true color at a given point. You need the original specification.
  • Color profiles and display management: the same file can produce different numbers depending on its embedded profile, how the software interprets it, and whether you sample the file or the screen. Sampling inside an editor that reads the file's own values is generally more consistent than sampling the screen.
  • Screenshots and re-saved copies: each capture or re-export can apply scaling, compression or a color conversion.
  • Transparency: a picker that reads a flattened image reports the logo color already blended with whatever sits behind it. Only a picker that reads the image's alpha channel can separate the color from its opacity.

Reading colors directly from vector files

When a logo is a true vector file, its colors are stored as attributes of each shape, so you don't need to guess from pixels. In an SVG you can often see them by opening the file in a text editor. Fill values can be written as hex codes, as rgb() or rgba() notation, or as named colors, and they can sit in the element itself or in a style block.

<path d="..." fill="#1A4F8B" />
<circle cx="50" cy="50" r="40" style="fill: rgb(26, 79, 139);" />
<rect width="100" height="20" fill="rgba(26, 79, 139, 0.6)" />

The values in the snippet are illustrative only. In rgba() notation the fourth number is opacity, usually written from 0 (fully transparent) to 1 (fully opaque). In AI, EPS and PDF files, a vector editor shows each object's fill in the color panel. In those files the color may be defined in CMYK or as a named spot color rather than RGB. In that case the defined value is the authoritative one, and any RGB reading is a conversion.

Verifying your extracted colors

  • Build a swatch: draw a solid rectangle of each extracted color and place it next to the original logo at a large size. Any visible mismatch means the sample needs another look.
  • Recheck consistency: confirm that repeated samples of the same color agree, and that the hex and RGB versions convert to each other correctly.
  • Rebuild a test version: apply the values to a vector trace or to a duplicate of the logo and compare it with the source on screen.
  • Compare against official guidance: if the brand owner publishes a style guide or brand sheet, its values override anything you sample.
  • Record the source and method: note which file you sampled and how. The next person then knows whether the values are specified or estimated.

Using the values in logo artwork

Sampled RGB and hex values suit screen use: websites, apps, presentations and digital files. Print work usually needs CMYK or spot-color specifications. Converting a sampled RGB value to CMYK, or matching it to a spot color, is an approximation. The result depends on the conversion settings and the printing conditions, so confirm print colors with the brand owner or the printer rather than relying on a pixel reading. When you rebuild a logo as vector artwork from a raster image, apply the verified values as solid fills on clean paths. Don't carry over the noisy or edge-blended colors from the original pixels.

Limits of this method and what to confirm

Without the original artwork or a published brand specification, pixel sampling cannot prove a logo's official colors. It gives a close working estimate whose accuracy depends on the quality of the source. Extracting colors from a logo also doesn't give you any right to reproduce or modify that logo. Confirm usage permission with the owner before you deliver artwork that uses their mark. If you need exact print matches or certified brand values, request the official color specifications rather than relying on sampled numbers.