How to Find a Brand's Exact HEX Color Code — 4 Methods That Actually Work

You are working on something that needs to match a brand's exact colors — a presentation, a social post, a design mockup. The brand colors look obvious on their website or logo, but you need the actual HEX code. Here are four methods to find it, from easiest to most technical.

Method 1: Check the Brand's Style Guide or Press Kit

Most established brands publish their color values in a brand style guide, press kit, or media kit. These are often publicly available on their website — look for links like "Brand Assets", "Press", "Media Kit", or "Brand Guidelines" in the footer or about section.

Brand style guides typically list primary and secondary colors as HEX codes, RGB values, Pantone numbers, or all three. This is the most accurate source because it comes directly from the brand.

Example searches: "[Brand name] brand guidelines", "[Brand name] press kit", "[Brand name] brand colors HEX"

Method 2: Use Chrome DevTools to Inspect Their Website

If a brand's website uses their brand colors (most do), you can extract those colors directly from the CSS:

1. Open the brand's website in Chrome.
2. Right-click on a button, header, or element that uses the brand color.
3. Click "Inspect" to open DevTools.
4. In the Styles panel on the right, find the CSS property that controls the color (background-color, color, border-color, etc.).
5. The HEX, RGB, or HSL value will be shown — click the color chip to see all three formats.

This method works for any color visible on a webpage and does not require any tools beyond Chrome.

Sell Custom Apparel — We Handle Printing & Free Shipping

Method 3: Use the Browser's Built-In Eyedropper

Chrome and Edge have a built-in color picker with screen sampler. To use it:

1. Open a free color picker tool in Chrome.
2. Click the color swatch to open the native color picker dialog.
3. Click the eyedropper icon in the dialog.
4. Move your cursor to any color on the brand's website and click to sample it.
5. Copy the HEX, RGB, or HSL value from the output.

This works even on images and graphics — not just CSS-colored elements. It is the fastest method when you can see the color on screen but do not know where it comes from in the code.

Method 4: Match Visually With a Color Picker

If the brand color is only available as a printed material, a product photo, or a low-resolution image, you may need to match it visually:

1. Open a free color picker in your browser.
2. Use the color wheel to navigate to the general color family.
3. Adjust saturation and lightness until the on-screen color closely matches your reference.
4. Copy the HEX code when the match looks right.

Visual matching is approximate — the result will be close but may not be pixel-perfect, especially for complex colors like muted or earthy tones.

What to Do Once You Have the HEX Code

Once you have the HEX code, you can:

• Paste it directly into Canva, Figma, or Adobe via the hex input field
• Enter it in PowerPoint or Word via Format > More Colors > Custom
• Use it in CSS: color: #4a90e2;
• Convert it to RGB or HSL using a free color picker if the tool you need uses a different format

Frequently Asked Questions

Is it legal to use a brand's exact color in my work?

Colors themselves are generally not protectable by copyright. Using a brand's color in a design does not automatically constitute trademark infringement unless you are creating something that could be confused with the brand. If you are creating derivative works, fan content, or commercial materials referencing a brand, review the brand's usage guidelines.

What if the brand uses a Pantone color instead of a HEX?

Pantone (PMS) colors are physical ink standards that do not have a perfect digital equivalent. Pantone publishes approximate HEX and RGB conversions for each color in their palette. Search for the specific Pantone number followed by "HEX" to find the closest digital approximation.

The DevTools method shows multiple colors — how do I know which is the brand color?

Look at the CSS property for the element you right-clicked. background-color or color will be the most direct. If you see a computed color in the Computed tab, that will show the final rendered value including any CSS variable resolution.

Can I find colors from a PDF or image file?

For a logo or image file saved on your device, you would need an image color extractor tool that lets you upload the file and click on a pixel. The browser eyedropper method works on any visible webpage content but not on locally stored files that are not displayed in the browser.