How to Find Your Logo's Exact Color Codes

An SVG file gives the exact logo colors, because it stores each color code as text. A PNG file gives exact colors too, because it stores every pixel without loss. A JPEG file changes the colors during compression, so its values are close but not exact.

SVG: color values written in the file

SVG 2 is an XML language for two-dimensional vector and mixed vector and raster graphics, according to the W3C. A vector shape in an SVG carries its fill color as a written value, such as fill="#4E2A84". That written value is the logo color, with no pixels involved.

An SVG file can also embed a raster image, and those pixels are only as exact as the embedded image.

PNG: lossless pixels

PNG is a format for the lossless storage of raster images, according to the W3C PNG Recommendation (Third Edition, 24 June 2025). The specification defines lossless as a method that reconstructs the original data exactly, bit for bit. A PNG logo exported from the original design therefore keeps every logo color unchanged.

JPEG: chroma subsampling and roundoff

A JPEG file loses color information even at its highest quality setting. The libjpeg-turbo encoder (cjpeg) uses 4:2:0 chroma subsampling by default, which stores color detail at a lower resolution than brightness. Its documentation states that even -quality 100 keeps information loss from subsampling, plus roundoff error.

The human eye reacts more to changes in brightness than to changes in color, so the encoder reduces color data first. A flat logo color in a JPEG turns into several neighboring values.

Extract a logo's colors by loading the logo file into an extractor that counts exact pixel colors and then copying the resulting color codes. The steps below use the free Logo Color Extractor.

1. 01

   Open the tool and choose the best file

   Open the Logo Color Extractor and load an SVG file first, a PNG file second. The tool accepts PNG, JPEG, WebP, GIF and SVG. It runs in the browser and never uploads the file.

2. 02

   Let the tool count the colors

   The tool counts exact colors instead of averaging them, so every result is a color that exists in the file. It ignores transparent pixels.

3. 03

   Check the background

   The tool removes a background color when at least 60% of the image's outer 1-pixel border is that color. A toggle restores the background when it belongs to the logo.

4. 04

   Read the color codes

   Each logo color shows its HEX code, its RGB value and a CMYK value labeled as an estimate. For SVG files, the tool snaps each result to the color value written in the file.

5. 05

   Record the codes

   Copy each HEX code into the brand guideline or the website theme.

A logo shows extra colors at its edges because of anti-aliasing, which blends each edge pixel with the color next to it. Microsoft's GDI+ documentation describes the process: pixels along a red line become pure red or a blend of red and the background, depending on how close they are to the line. Without anti-aliasing, the same line looks like a staircase, an effect called aliasing.

A purple logo on a white background therefore contains lighter purples along every curve, and a simple color count lists them next to the true logo colors.

How the Logo Color Extractor removes anti-aliasing blends

The Logo Color Extractor drops a color when two conditions hold: the color appears only along edges, and its RGB value lies on the mixing line between two major colors, or between a major color and the removed background, within 6 units on the 0 to 255 scale. Renderers mix edge pixels in RGB, so a blend of two colors sits on the straight line between them in RGB. This test separates blends from genuine small details such as a thin accent stroke, which fills whole pixels of its own.

HEX and RGB describe a logo color on screens, CMYK describes it in four-color print, and Pantone names a premixed ink. Northwestern Engineering's color guidelines assign each code system to one medium and list Northwestern Purple in all four.

A HEX code (hexadecimal color code) is an RGB value written in base 16. In #4E2A84, the pairs 4E, 2A and 84 equal the RGB values 78, 42 and 132. The screen codes are therefore one color in two notations, while the CMYK value and the Pantone code are separate print specifications.

A CMYK value converted from a HEX code is an estimate because CMYK inks reproduce fewer colors than a screen, and the result depends on the ink, the paper and the press. Adobe states that the gamut of CMYK is much smaller than the gamut of RGB, so out-of-gamut colors are compressed or clipped. Adobe also notes that some brand colors cannot be created with CMYK at all.

The naive conversion formula

CSS Color Module Level 5 gives the naive conversion formula. The values r, g and b are the sRGB channels on a 0 to 1 scale.

k = 1 - max(r, g, b)

c = (1 - r - k) / (1 - k),   m = (1 - g - k) / (1 - k),   y = (1 - b - k) / (1 - k)

CSS Color 5 calls this conversion necessarily approximate, because it has no knowledge of the colorimetry of the inks, the dot gain or the colorimetry of the RGB space. Northwestern Purple shows the gap. The formula turns RGB 78/42/132 into CMYK 41/68/0/48, while Northwestern's guideline specifies 82/98/0/12.

How much the result drifts

CSS Color 5 works through an example with one CMYK value prepared for SWOP 2006 coated paper. Read through a FOGRA39 profile instead, the color shows a ΔE2000 difference of 8.17. Converted with the naive formula, the difference is 14.3. The same specification treats a ΔE2000 of 1 as just visible and a ΔE2000 of 5 as a different color.

ICC profiles for print conditions

Calibrated CMYK needs an ICC profile for the combination of ink, paper and equipment, according to CSS Color 5. A profile-based conversion uses two profiles, one for the monitor and one for the printer, according to MathWorks. The ICC registry lists standard characterization data sets, including these:

FOGRA39

Gloss or matt coated paper, 115 g/m² (offset printing to ISO 12647-2, 300% total ink limit)

FOGRA52

Uncoated white paper, 120 g/m²

CGATS TR 006

GRACoL, Grade 1 paper

CGATS TR 003 / TR 005

SWOP, grade 3 and grade 5 coated web

Pantone colors now come from Pantone's own products, such as the Pantone Connect extension, instead of libraries built into Adobe Creative Cloud. Pantone states that it and Adobe agreed to stop distributing the outdated Pantone Color libraries through Creative Cloud apps in November 2022, with Pantone Connect as the replacement.

Pantone gives the age of the libraries as the reason. Adobe last updated them over ten years earlier, so they lacked over 800 Pantone Matching System colors and nearly 5,000 Fashion, Home + Interiors colors. Pantone refers questions about saved swatches in existing files to Adobe.

Spot color and process color

A spot color is a solid color printed with one premixed ink, usually based on the Pantone Matching System (PMS), according to Adobe. A process color is built from cyan, magenta, yellow and black inks printed as millions of tiny overlapping dots. Designers add a spot color to four-color process printing when a brand color falls outside CMYK.

Pantone's Color Bridge Guide compares all 2,359 Pantone spot colors with their closest industry-standard CMYK matches. A logo image stores RGB pixels, not ink recipes, so no image alone identifies a Pantone code. The Logo Color Extractor does not claim Pantone matches, because Pantone color data is licensed.

Keep logo colors consistent by recording all four color codes in one brand guideline and copying the HEX code from it into every web template. Northwestern Engineering's guideline follows this pattern.

A Shopify Community thread from 21 July 2022 documents a color mismatch: a merchant failed to match the store's announcement bar to the logo color with Shopify's color picker. A HEX code copied from the guideline removes that guesswork.

Check the live site

The Website Color Extractor reads the colors a published page uses, so the HEX codes on the live site can be compared against the guideline. The <meta name="theme-color"> tag carries the brand color into browser interface areas such as the address bar, according to MDN. Its content value must be a valid CSS color.

Logo colors and WCAG contrast

WCAG 2.2 exempts logotypes, text that is part of a logo or brand name, from the contrast requirements of Success Criteria 1.4.3 and 1.4.6. The exception covers the logo only. A brand color used for body text still needs a contrast ratio of at least 4.5:1, so check it with the palette contrast guide before using it outside the logo.