How to Find a Logo's Exact Color — the HEX Code in 30 Seconds
You need a "Sign in with VK" button in the brand's exact blue, a background that matches a client's logo, or a deck in corporate colors — and there's no color code in sight. Eyeballing it doesn't work: the gap between "roughly that green" and the official #21A038 is visible instantly and looks sloppy. Here's how to get the exact HEX of any logo color.
The most reliable source is the logo's SVG file — the color is written right in the code, undistorted. The fastest is an eyedropper in Figma or a browser extension. The most dangerous is an eyedropper on a JPG from image search: compression distorts colors and you'll copy a corrupted shade.
What HEX is and why everyone speaks it
HEX writes color as #RRGGBB: two hexadecimal digits each for red, green and blue. #FF0000 is pure red. It's the universal language understood by CSS, Figma, Photoshop, site builders and every developer. Brand books duplicate colors in RGB (screens) and CMYK/Pantone (print), but for digital work HEX is enough.
Method 1. Read it from the SVG — the gold standard
If you have the logo's SVG, the color is already inside. Open the file in any text editor and look for fill attributes:
<path fill="#21A038" d="M45.2 12.6..."/>That's the exact brand color as the designer defined it — no compression, no color‑profile drift. Multiple fills means multiple palette colors.
Method 2. The Figma eyedropper
Drop the logo into Figma, select a shape — the fill shows in the right panel with its HEX. Or press I for the eyedropper anywhere on canvas. Works with vector and raster files alike.
Method 3. The browser eyedropper
- Color‑picker extensions (ColorZilla and friends) — sample any pixel of any page.
- DevTools: if the color is set in the site's CSS, inspect the element (F12) — the exact value is right there in the styles.
- Chrome without extensions: any color swatch in DevTools opens an eyedropper you can point at the page.
Method 4. Official brand guidelines
Large companies publish brand‑assets pages where corporate colors are spelled out: HEX, RGB, CMYK, Pantone. Legally this is the "most correct" source — the color the brand itself asks you to use. Search for "brand name brand guidelines".
Method 5. Online tools
Image‑color‑picker services: upload an image, click a point, get the HEX. Works — with the caveat below.
Why the eyedropper sometimes lies
- JPG compression. JPG creates transitional pixels along color edges. Sample the edge of a letter and you get a mix with the background, not the brand color. Always click the center of a large solid area.
- Color profiles. The same image can yield slightly different values across monitors and browsers — especially if saved in Display P3 rather than sRGB.
- Transparency and overlays. A logo sitting on a semi‑transparent layer gives the eyedropper a blended color, not the original.
Hence the rule: eyedropper for quick jobs, SVG or guidelines for final work.
What to do with the color next
With the HEX in hand you'll typically: build a palette around it, check text contrast on that background (accessibility wants at least 4.5:1 for body text), convert to RGB or CMYK for print. Any color converter does it instantly.
And if your task is the reverse — not reading the color but changing it in the logo itself — we have a separate guide: how to change a logo's color.
The color‑system cheat sheet: HEX, RGB, HSL, CMYK, Pantone
One color, five notations — and it pays to know which is for what:
| System | Example (Sber green) | Used in |
|---|---|---|
| HEX | #21A038 | CSS, Figma, everything digital |
| RGB | rgb(33, 160, 56) | same number, different wrapper |
| HSL | hsl(131, 66%, 38%) | handy for deriving shades in CSS |
| CMYK | ≈ 79/0/89/0 | |
| Pantone | a spot color from the catalog | brand print where the shade is critical |
The consequences that matter. HEX and RGB are the same number — conversion is exact. CMYK is a different color space: some bright screen colors are unreachable in print, so a casual online conversion can disappoint on paper. For serious print, brands order proofs or use Pantone — a physical catalog of reference inks independent of any printer's settings.
HSL is the underrated helper: hue‑saturation‑lightness lets you derive a palette from the brand color meaningfully: the hover shade = same hue, lower lightness; a pastel background = same hue, lower saturation, higher lightness.
Collecting the whole brand palette, not just one color
The real task is usually "gather the brand colors for a mockup". The order:
- The primary — from the SVG logo or the guidelines (methods above).
- The secondaries — inspect the live product: the brand's site and app. In DevTools, check the CSS variables (
:rootin the styles) — modern sites keep the palette there, a ready‑made list: primary, accent, backgrounds, text colors. - Contrast check — before using a borrowed palette, run the text/background pairs through a contrast checker (4.5:1 minimum for body text, 3:1 for large).
- Fixation — store the result as Figma styles or CSS variables so the color is entered once, not copy‑pasted around.
Two treacherous cases. Video: colors in footage are skewed by compression and grading — don't sample a brand color from a YouTube frame; find a static source. Gradients: a gradient logo has two or more "primary" colors — sample both ends; in the SVG they're explicit stops inside <linearGradient>.
In short
HEX from the SVG source is the gold standard, brand guidelines are the official source, the eyedropper is the quick way — used carefully on JPGs. Click the middle of solid fills, not edges, and don't trust colors from re‑encoded images.
To skip the detective work entirely: every brand page in our logo catalog has a "Brand colors" block — all official HEX codes extracted straight from the original SVG, copied with one click.