How to Build a Color Palette From a Logo (5 Minutes)

A logo is a single mark, but a brand needs a whole color palette. The website, the app, the social graphics, the email templates — they all pull from the same set of colors. The right palette makes the brand look consistent; the wrong palette makes it look like the logo was designed by one person and the rest of the brand was designed by ten other people who never talked to each other.

Here is the 5-step workflow to extract a working palette from any logo, in 5 minutes. No design skills required, just the right tools.

Step 1: Pick the dominant color (60 seconds)

Open the logo in the Image Color Picker on this site. Click the most prominent color in the logo — usually the largest filled area, or the brand mark. The picker gives you the hex code (something like #3366CC).

If the logo has multiple equally-prominent colors, pick the one that is most distinct (most saturated, or the most different from white and black). That is your brand color, the one people will associate with the brand even when the logo is not in view.

If the logo is mostly text on a background (think "Slack" on a colored square), pick the background color. The background color is what people will see most often in the wild.

Common result: a single hex code that anchors the rest of the palette. For this walkthrough, I will use #3366CC as the brand color — a medium blue, common in tech brands.

Step 2: Generate 4-5 supporting colors (90 seconds)

Open the Color Palette Generator on this site. Enter the brand color (#3366CC) as the base. The generator produces a 5-color palette: the base, a light variant, a dark variant, a complement, and a neutral.

You now have 5 colors that work together. The exact colors depend on the base, but for #3366CC you might get something like:

• Base: #3366CC (the brand blue)
• Light: #7B9CE0 (a softer version for backgrounds)
• Dark: #1F4480 (a deeper version for text on light backgrounds)
• Complement: #CC8F33 (a contrasting accent)
• Neutral: #4A4A4A (a gray for body text)

You can adjust the generator's settings (analogous vs. complementary, light vs. dark variants) if you want a different feel. The 5-color result is a starting point, not the final palette.

Step 3: Apply the 60-30-10 rule (60 seconds)

The 60-30-10 rule is the design principle for any color palette: 60% of the visual real estate is one color, 30% is another, 10% is the accent. This ratio keeps a design from looking flat (all one color) or chaotic (too many colors at equal weight).

For our palette, the 60-30-10 breakdown might be:

• 60% — neutral: the gray (#4A4A4A) for body text and most backgrounds. Most of the screen is neutral; the brand color is the accent.
• 30% — base or light: the brand blue (#3366CC) or its light variant (#7B9CE0) for headers, primary buttons, key elements. Visible but not dominant.
• 10% — complement or accent: the orange (#CC8F33) for the most important call to action, a notification badge, a highlight. Rare but eye-catching.

The complement or accent is the color you use SPARINGLY. One button per page. One highlight per section. If the accent appears 30% of the time, it is no longer an accent — it is just another color competing for attention.

Step 4: Check contrast for accessibility (60 seconds)

For body text, the contrast ratio between the text color and the background color must be at least 4.5:1 (WCAG 2.2 AA). For large text (18pt+ or 14pt+ bold), the minimum is 3:1. For UI components and graphics, 3:1.

Open the Contrast Checker on this site. Try every text/background pair you plan to use:

• Body text (#4A4A4A) on white background — should be at least 12:1 (very high).
• Brand blue (#3366CC) on white background — might be only 4:1, which is borderline. For text, use the dark variant (#1F4480) instead.
• Light blue (#7B9CE0) on white background — probably 2.5:1, which FAILS. Do not use this for text. Use it for backgrounds or borders only.

Adjust the palette based on what the contrast checker tells you. If the brand color fails for text, use a darker variant. If a light variant fails for buttons, use a darker outline or a different background.

The 4.5:1 ratio is the floor. Aiming for 7:1 (WCAG AAA) is even better and helps users with low vision.

Step 5: Test the palette in dark mode (60 seconds)

Most users will see your brand in both light and dark mode. The palette that looks great on white often looks washed out or too-bright on black, and the brand color that pops on white might disappear on black.

For dark mode, the 60-30-10 breakdown is the same but the colors are different:

• 60% — dark neutral: near-black (#1A1A1A) for the background.
• 30% — light base or text: near-white (#F5F5F5) for body text, or a lighter version of the brand color for accents.
• 10% — accent (same as light mode): the orange (#CC8F33). The accent color often works in both modes without change.

The brand color itself usually needs a slight adjustment for dark mode. A medium blue (#3366CC) looks fine on white but disappears on black. A lighter blue (#7B9CE0) looks washed out on white but pops on black. Pick a mid-light version that works in both, or use a different shade for each mode.

Re-run the contrast checker for dark mode pairs. The same 4.5:1 minimum applies. A bright brand color on a near-black background usually has great contrast; the issue is the OTHER direction (light text on light background, which fails).

The full workflow in 5 minutes

1. 60 seconds: Open the logo in the Image Color Picker. Click the dominant color. Get the hex code. (Brand color.)
2. 90 seconds: Open the Color Palette Generator with the brand color. Get 4-5 supporting colors. (Full palette.)
3. 60 seconds: Apply the 60-30-10 rule. Pick which color is dominant (60%), supporting (30%), and accent (10%). (Color roles.)
4. 60 seconds: Open the Contrast Checker. Check every text/background pair. Adjust any that fail WCAG 2.2 (4.5:1 for body text, 3:1 for large). (Accessibility.)
5. 60 seconds: Test the palette in dark mode. Adjust the brand color and supporting colors so the contrast still works. (Dark mode.)

5 minutes. The first time you do it, the steps are slower because you are thinking through each one. The third time, the whole thing is 5 minutes without thinking — you see a logo, you know what to do.

Common pitfalls (and how to avoid them)

Too many colors

If your palette has 7+ colors, you have too many. Cut to 4-5. The 60-30-10 rule fails when there are too many roles to assign; everything ends up at 5-10% and nothing is the dominant color. A usable palette is 4-5 colors plus white/black for neutrals.

The accent is too prominent

If the accent color appears on every button, every heading, and every link, it is no longer an accent — it is the new primary. Use the accent for ONE thing per page. One call to action. One notification. One highlight. The accent's job is to draw the eye, and that only works if it appears rarely.

Ignoring the grays

A palette without good grays is hard to use. Body text, secondary text, borders, dividers, disabled states — these all need grays. Pick 3 grays (light, medium, dark) as part of the palette, not as an afterthought. The Color Palette Generator includes a neutral by default; treat the neutral as a real part of the palette, not a fallback.

Not testing in context

A palette that looks good in the abstract can look terrible in real UI. A medium blue (#3366CC) looks fine on a white card but can look harsh as a page background. The fix is to test the palette in 2-3 real components (a button, a card, a form input) before committing. The 5-minute workflow includes testing in context; if you skip that, you are guessing.

What to do with the resulting palette

Once you have a 4-5 color palette that passes contrast and works in dark mode, you have a usable design system. Use it for:

• Website: the CSS variables in the design system. --color-primary, --color-secondary, --color-accent, --color-neutral, plus light/dark variants.
• App: the theme tokens in the design system. Same names, same values.
• Social graphics: the brand color for the background or accent, the neutrals for text, the accent for the call to action.
• Email templates: the brand color for the header, the neutrals for the body, the accent for the click-through button.

The whole point of a palette is consistency. Once the colors are decided, every part of the brand uses them. No ad-hoc colors. No "just this once" in a different shade. The brand looks the same on the website as it does in the app as it does in the email.

The honest summary

A logo is a single mark, but a brand needs a palette. The 5-step workflow — pick the dominant color from the logo, generate 4-5 supporting colors, apply the 60-30-10 rule, check contrast for accessibility, test in dark mode — takes 5 minutes once you have done it twice. The Image Color Picker extracts the brand color from the logo. The Color Palette Generator produces the supporting colors. The Contrast Checker validates accessibility. The result is a 4-5 color palette that works in light mode, dark mode, and every component in between. The first time you do it, the steps are slower. The third time, you do it without thinking.