Upload any image and extract a color palette instantly. Get HEX, RGB, HSL codes for every dominant color. Export as CSS variables, Tailwind config, or SCSS. 100% client-side.
🎨 Open Color Palette ExtractorFree · No signup · Your images never leave your browser
A color palette extractor analyzes an image and identifies the most dominant colors — the ones that make up the majority of the image's visual content. The result is a concise set of color swatches, each represented as HEX, RGB, and HSL codes that you can directly use in design tools, CSS, and frameworks like Tailwind.
Designers use palette extractors to derive brand colors from product photography, match website color schemes to marketing materials, build consistent design systems from existing imagery, and find complementary colors for UI work. The ToolForge extractor processes everything in your browser — no image upload, no server, no privacy risk.
Under the hood, extracting colors from an image is a clustering problem: group the thousands of distinct pixel colors into a manageable number of representative colors. The ToolForge extractor uses the median cut algorithm.
Resize the image
The uploaded image is drawn to a hidden canvas at a reduced resolution (typically 200×200 pixels). This makes pixel sampling fast without sacrificing color accuracy — color distribution is preserved at lower resolution.
Read all pixel data
The Canvas API's getImageData() method returns an array of every pixel's RGBA values. Transparent pixels (alpha < 128) are excluded from the analysis.
Median cut clustering
The algorithm places all pixels in a 3D color space (R, G, B axes). It finds the color channel with the widest range (e.g., if red varies most), then cuts the pixel list at the median of that channel. This produces two equally-sized buckets. The process recurses until we have as many buckets as requested colors (4, 6, 8, or 10).
Average each bucket
Within each bucket, the average R, G, and B values are calculated. This average color is the representative palette entry for that cluster.
Sort by prominence
Buckets are sorted by the number of pixels they contained — so the most dominant color in the image appears first in the palette.
Web Design
Apply extracted colors to page backgrounds, button fills, heading text, and border accents. Export as CSS custom properties to maintain consistency across your entire site without magic hex values scattered through your stylesheets.
Brand Identity
Upload product photography or brand imagery to derive a consistent color palette. Many brands build their entire visual identity from colors present in their hero photography — a practice that creates natural harmony between images and UI.
Social Media
Consistent color themes across posts create instantly recognizable feeds. Extract palette from your brand photography and apply those colors to all graphics, text overlays, and templates for visual cohesion.
Tailwind Projects
Export directly to Tailwind config format. Paste into your tailwind.config.js colors object and immediately use the extracted palette via utility classes throughout your project.
Interior Design
Upload an inspiration room photo to identify the exact paint and fabric colors used. Match extracted HEX codes to paint brand color libraries (most brands have online color matching tools that accept hex input).
Fashion & Styling
Extract palette from outfit inspiration images to identify the specific tones for coordinated looks. The HSL values are especially useful here — same hue, different lightness = natural tonal coordination.
| Format | Example | Where Used | Best For |
|---|---|---|---|
| HEX | #4F46E5 | CSS, HTML, design tools | Web development, universal |
| RGB | rgb(79, 70, 229) | CSS, JavaScript, image editing | Screen colors, opacity variants |
| HSL | hsl(243, 75%, 59%) | CSS, design systems | Human-readable, tonal variants |
| CMYK | C:66 M:69 Y:0 K:10 | Print production, Photoshop | Physical printing, press work |
HSL is particularly useful for design systems because it makes tonal relationships explicit: to create a lighter version of a color, simply increase the L (lightness) value. Tailwind's color system is built on this principle.
The most maintainable way to use a palette in web projects is through CSS custom properties. Define once, use everywhere:
CSS Custom Properties
:root {
--color-primary: #4F46E5;
--color-secondary: #10B981;
--color-accent: #F59E0B;
--color-neutral: #6B7280;
}
.button-primary {
background-color: var(--color-primary);
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#4F46E5',
'brand-secondary': '#10B981',
'brand-accent': '#F59E0B',
},
},
},
}SCSS Variables
$color-primary: #4F46E5;
$color-secondary: #10B981;
$color-accent: #F59E0B;
.button {
background: $color-primary;
&:hover { background: darken($color-primary, 10%); }
}Extracting beautiful colors from an image does not automatically mean they are accessible for text. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against its background.
AA Normal Text
4.5:1
Body text, UI labels
AA Large Text
3:1
18pt+ or 14pt bold
AAA Normal
7:1
Enhanced accessibility
The ToolForge Color Palette Extractor shows WCAG contrast ratios for each extracted color against white and black backgrounds. Use our dedicated Color Contrast Checker to test any color combination.
Drag-and-drop image upload — PNG, JPG, WebP, GIF
Median cut algorithm for accurate dominant colors
Extract 4, 6, 8, or 10 colors — selector built in
Click any swatch to see full color details
HEX, RGB, HSL codes — one-click copy each
Nearest Tailwind class — e.g., bg-indigo-600
WCAG contrast ratios vs white and black
Export as CSS custom properties, Tailwind config, or SCSS
Download palette as PNG swatch strip
100% browser-side — images never sent to server
Sample image button for instant demo
Works offline after first page load
The tool draws your uploaded image onto an HTML canvas and reads all pixel data using the Canvas API. It then runs a median cut algorithm — which recursively splits the color space along the axis with the widest range — to group similar colors into clusters. The average color of each cluster becomes one palette entry. This process runs entirely in your browser with no server involved.
The tool accepts PNG, JPG/JPEG, WebP, and GIF. PNG and JPG give the most reliable results. Transparent PNG pixels (alpha < 128) are excluded from extraction, so the palette reflects visible colors only.
No. The entire extraction process runs in your browser using the Canvas API. Your image is never sent to any external server, stored, or logged. It is processed in memory and discarded when you clear the image or close the tab.
For logos and brand assets, 4–6 colors typically captures the full palette. For photographs, 8–10 colors gives better tonal coverage. More colors is not always better — at 10+, you often get very similar colors that are perceptually indistinguishable.
Yes. Color codes (HEX, RGB values) are not copyrightable. However, if you are extracting from a copyrighted image you do not own, you should have appropriate rights or licenses for the source image. The extracted palette itself is just a technical description of what colors appear in the image.
Most web design systems use 5–8 core colors: 1–2 primary brand colors, 1 accent, neutral shades (gray scale), and semantic colors (error red, success green). Extract 6–8 colors from your inspiration image and then trim to the most distinctive ones for your design system.
Download the palette as PNG using the Download button, then open the PNG in Photoshop and use the eyedropper to sample each swatch. Alternatively, copy the HEX codes and enter them directly in Photoshop's color picker. For Adobe XD or Illustrator, use the HEX codes in the color panel.
Screen colors use the RGB color model (red, green, blue light) while printing uses CMYK (cyan, magenta, yellow, black ink). The extracted HEX codes are screen-accurate (sRGB). For print use, you will need to convert them to CMYK using a color conversion tool, and note that some vibrant screen colors (especially saturated blues and greens) cannot be reproduced exactly in CMYK.
Upload any image to get HEX, RGB, and HSL codes instantly. Export as CSS variables, Tailwind config, or download the palette PNG.