Color palette
Swatches — click any pill to copy value
Upload any logo and get the exact brand hex codes, RGB values, and CSS variables instantly. Works with PNG, JPG, and transparent backgrounds — no signup, no server uploads.
Color palette
Swatches — click any pill to copy value
Getting the precise hex codes out of a logo is the foundation of any brand color system. Whether you're building a style guide or matching brand colors across touchpoints, accuracy matters.
Extract all primary, secondary, and accent colors from a logo in one pass. Use the CSS variables export to seed your design system or style guide with accurate values from the start.
When a new client sends over their logo but no brand guidelines, uploading the file here instantly gives you a working palette to build from — saving the back-and-forth of asking for hex codes.
Upload a competitor's logo to decode their brand color language. Understanding the hues and saturation levels they've chosen reveals a lot about their intended positioning and target audience.
Ensure that every banner, social post, and presentation deck uses the exact brand colors by anchoring everything to hex codes extracted directly from the source logo file.
When evolving a brand identity, extract colors from the existing logo as a starting point. Seeing the full palette laid out makes it easier to decide what to keep, adjust, or replace.
Take a logo file and export its palette directly as CSS custom properties — then name them semantically in your codebase for a design system that traces back to the brand's actual visual DNA.
Logos have specific characteristics that affect color extraction. A few best practices ensure you get the most accurate results.
A PNG logo on a transparent background is ideal — the tool ignores fully transparent pixels, so only the actual logo colors make it into the palette. Avoid logos on white or colored backgrounds if possible.
Most brand identities have 2–5 core colors. Set the slider to match your expected palette size so you don't get redundant near-duplicates or miss a color by under-counting.
The CSS export gives you --color-1, --color-2 etc. Once in your stylesheet, rename them to semantically meaningful names like --brand-primary and --brand-accent for maintainable code.
The JSON export includes hex, RGB, HSL, and color name for every swatch — perfect for feeding into a design token pipeline or Figma variable collection to keep your codebase and design files in sync.
Common questions about this workflow.
Upload the logo file using the tool above. It analyzes the image and extracts the dominant colors as hex codes. For the cleanest result, use a high-resolution PNG version of the logo, ideally with a transparent background so the tool isn't picking up background color.
Yes, and it's actually the best format to use. The tool ignores fully transparent pixels (alpha = 0) when building the palette, so a transparent-background PNG ensures you're extracting only the colors that are actually part of the logo artwork.
Most brand systems are built on 2–5 core colors: one or two primary brand colors, one or two secondary/accent colors, and a neutral. Some larger design systems include 8–10 tokens when you count light/dark variants. Start by setting the slider to 3 and increase until you've captured all the distinct hues in the logo.
Yes. Upload the competitor's logo (found on their website or press kit) and the tool will extract their brand palette as precise hex codes. This is useful for competitive analysis and ensuring your own brand is sufficiently differentiated.
The tool samples pixel colors across the entire image, so a gradient in a logo will produce the range of colors it spans. Set the color count higher (6–8) when working with gradient logos to capture the full tonal range rather than just the endpoints.
Other ways to use Find Palette for your workflow.