Brand Color Extractor
Upload a logo or photo. Get a 5-color brand palette with 9 tints each, ready to drop into a CSS variable system or Tailwind config. Includes WCAG contrast checks so you know which shades are safe for body text. 100% in-browser, no signup, no upload.
How to use
- Drop your logo or a brand image (JPEG, PNG, WebP, or SVG).
- The tool extracts 5 dominant colors and generates a 9-step tint scale (50-900) for each.
- Hover any swatch to see the hex value. Click any base color to edit it - the scale regenerates instantly.
- Switch to the CSS / Tailwind / JSON / SCSS export tab. Copy or download. The JSON format imports directly into MiN8T's Brand Guidelines module.
- The "AA" / "AAA" badges on each tint show WCAG contrast results vs white and black - pick body-text colors from the passing rows.
Why a 50-900 scale?
A single brand color isn't enough to design with. You need light versions for backgrounds (50-200), the base for accents (500), and dark versions for text or hover states (700-900). The 50-900 scale matches Tailwind CSS and Material Design conventions, so the output drops into a Tailwind theme or CSS custom-property system without translation. The mid-step (500) is your detected base color; lighter and darker steps are generated by interpolating to white and to a near-black.
FAQ
How does color extraction work?
The tool downsamples your image to a small thumbnail in a hidden canvas, then runs a color-quantization algorithm (Modified Median Cut, the same one used by color-thief) to find the most representative colors. The 5 dominant colors are returned in approximate order of prevalence. Whole process takes under a second, runs entirely in your browser.
Why generate 9 tints per color?
A single brand color isn't enough to design with. You need light versions for backgrounds (50-200 range), the base color for accents (500), and dark versions for text or hover states (700-900). The 50-900 scale matches Tailwind CSS and Material Design conventions, so the output drops directly into a Tailwind theme or CSS custom-property system.
What does the contrast indicator mean?
Each color shade is checked against white and black backgrounds for WCAG 2.1 contrast compliance. AA passes 4.5:1 for normal text and 3:1 for large text. AAA passes 7:1 / 4.5:1. The badges tell you which combinations are accessibility-safe for body text - critical if these colors will appear in email or app UI.
What images work best?
Logos with 2-5 distinct colors are ideal. Hero photos with one dominant subject work too. Avoid: super-busy images with hundreds of colors (you'll get a muddy mid-grey palette), monochrome images (you'll get five shades of one color), and images dominated by white or transparent backgrounds (white gets weighted heavily and squeezes out the actual brand colors).
Does the image leave my device?
No. The image is loaded into a browser canvas, processed in-memory, then discarded when you close the tab. Open DevTools Network while uploading - you'll see zero outbound requests for the image.
How do I use this in MiN8T's Brand Guidelines?
MiN8T's Brand Guidelines module accepts a JSON palette format identical to the JSON download from this tool. Click "Use in MiN8T Brand Guidelines" to deep-link into the editor with the palette pre-populated, or download the JSON and import it manually from the Brand Guidelines panel.
Can I edit the extracted colors?
Yes. Each base color shows a hex value below it - tap to edit. Tints and shades regenerate live as you adjust the base. Useful when the algorithm picks a near-miss color and you want to nudge it to your exact brand spec.
Why is one of my brand colors missing from the palette?
Color extraction is sensitive to area coverage. A small accent color that occupies under 5% of the image will likely be excluded in favor of larger background or main-subject colors. Workaround: crop the image to the region containing the missing color, then run extraction on the crop.
Use this palette in your emails
MiN8T's Brand Guidelines module stores your palette once and applies it to every email you design. Stop hand-pasting hex codes.
Open Brand Guidelines →