How to Choose Brand Colors from a Logo
Choosing brand colors from a logo takes about five minutes if you use a logo color extractor to pull the exact hex values, then assign each extracted color a semantic role (primary, secondary, accent, neutral).
The 5-Step Process
1. Extract the colors
Upload your logo to PhotoTones and click "Generate Color Palette". You'll get up to 12 extracted colors with hex, RGB, and HSL codes. Use a transparent-background PNG when possible — it keeps background colors out of the palette.
2. Identify the dominant color
The most saturated, most-used color in your logo becomes the primary brand color. This is the color that appears on hero backgrounds, primary CTAs, and the logo itself. In PhotoTones output, this is almost always the "Vibrant" swatch.
3. Pick a secondary
The next most prominent color becomes the secondary. It appears on secondary buttons, hover states, and supporting design elements. In PhotoTones output, this is usually "Dark Vibrant" or the second most-saturated swatch.
4. Identify accent colors
Pick 1–3 accent colors for badges, highlights, links, and micro-interactions. These should contrast with both primary and secondary. Look for the remaining vibrant swatches in your extraction.
5. Establish neutrals
Every brand palette needs a dark neutral (for body text), a medium neutral (for muted UI), and a light neutral (for backgrounds). Use the "Dark Muted", "Muted", and "Light Muted" swatches from PhotoTones. If your logo doesn't have obvious neutrals, supplement with #111827 (dark), #6B7280 (medium), #F9FAFB (light).
Extract your logo colors now
Free, private, 12 hex codes in under a second.
Open the Color Palette from Image GeneratorExample: Building a Brand Palette from a Logo
Say your logo uses a bold teal and a soft coral. PhotoTones extracts:
#0EA5E9(Vibrant) → Primary — used on CTAs, links, logo#FB7185(Light Vibrant) → Accent — used on highlights, hover states#0C4A6E(Dark Vibrant) → Secondary — used on headlines, primary text on light bg#64748B(Muted) → Neutral body — body text#1E293B(Dark Muted) → Neutral dark — footer, dark mode bg#F1F5F9(Light Muted) → Neutral light — section backgrounds, cards
That's a production-ready 6-color brand palette. Paste each hex into your Tailwind config, SCSS variables, or Figma library, and you're done.
Common Mistakes to Avoid
- Using too many brand colors. 4–6 is the sweet spot. More than 8 primary brand colors dilutes recognition.
- Ignoring contrast. Every brand color combination should meet WCAG AA (4.5:1 for body text). PhotoTones Pro includes a contrast grid; otherwise use the WebAIM Contrast Checker.
- Skipping neutrals. A brand palette without clean dark/medium/light neutrals can't do real UI work.
- Approximating colors by eye. Always extract the exact hex. A brand color that's "close enough" looks amateur in side-by-side comparisons.
- Not documenting. Once you've chosen the palette, write it into a brand guidelines doc or README with roles, accessible combinations, and don'ts.
FAQ
How many colors should a brand use?
4–6 is standard. This usually breaks down as 1 primary, 1 secondary, 1–2 accents, and 1–2 neutrals. Complex design systems expand neutrals and semantic colors (success, warning, error) to 10–12 total.
Can I use Pantone for brand colors?
For print, yes. Pantone guarantees color consistency across print runs. For digital, use hex codes — they're what browsers and design tools speak natively. Most brand guides include both: Pantone for print, hex/RGB for digital.
What if my logo has only one or two colors?
Extract those as your primary and (if present) secondary, then supplement with neutrals from scratch. Use the PhotoTones "Muted", "Dark Muted", and "Light Muted" defaults as a starting point, or go with standard Tailwind gray scale.