Color Palette from Image
Extract a dominant color palette from any image and copy it as hex, CSS variables, Tailwind config, or JSON
Click or drag an image here
We sample colors entirely in your browser — nothing is uploaded.
PNG · JPG · WebP · GIF · AVIF (max 20 MB)
Extracted Palette
Upload an image to extract its dominant color palette.
Color Palette from Image
Extract a dominant color palette from any image and copy it as hex, CSS variables, Tailwind config, or JSON
Features
- Extract dominant colors from an uploaded image using 4-bit-per-channel quantization
- Pixel-frequency sorting with Euclidean RGB distance deduplication (threshold 24 units)
- Output: hex, rgb(), hsl() formats — copy any one with a single click
- Configurable palette size (1–16 dominant colors)
- Runs entirely in your browser — uploaded images are never sent to a server
How to use
- Click the upload area or drag an image file onto it.
- Choose how many colors you want in your palette (4 to 12).
- Optionally sort the result by frequency, hue, or lightness.
- Click any swatch to copy its hex value.
- Use the export buttons to copy CSS variables, a Tailwind config, or JSON for your codebase.
Tips & Best Practices
- Quantization (4 bits per channel = 4096 buckets) is the lightweight alternative to k-means clustering. Good enough for design palettes; k-means is more accurate for very-similar-color images.
- For brand palette extraction, upload the brand's logo or hero image — the dominant colors usually map to the official palette.
- Photos with high color diversity (sunsets, paintings) return a more varied palette than uniform images.
- For perceptual uniformity (matching how humans see color similarity), convert to LAB color space first — this tool uses raw RGB which over-weights green.
- WCAG contrast checking: pick the lightest and darkest extracted colors; verify they meet 4.5:1 for normal text.
FAQ
How does the tool decide which colors are dominant?
Pixels are quantized into 4-bit-per-channel buckets and counted, so visually similar colors are grouped together. The most common buckets are then deduplicated by perceptual distance and the remaining ones become your palette, with each color's pixel share shown as a percentage.
Is my image uploaded to a server?
No — extraction runs entirely in your browser using a Canvas element and the Web Crypto-free File API. The image is never sent over the network, so it is safe to use with screenshots, mockups, or unreleased product photos.
What image formats and sizes are supported?
Any format your browser can decode is supported, including PNG, JPG, WebP, GIF, and AVIF. Files up to 20 MB are accepted; very large images are downscaled to 200 pixels on the longest side before sampling, so extraction stays fast even for high-resolution photos.
How accurate is the percentage shown for each color?
The percentage reflects how many pixels in the resampled image fell into that color's bucket. It is a good approximation of visual prominence but is not pixel-perfect on the original image, since downsampling and quantization both reduce precision.
Can I copy the palette into my project?
Yes. The export buttons produce a plain hex list, CSS custom properties under :root, a Tailwind config snippet under theme.extend.colors.palette, or a structured JSON array including hex, RGB, HSL, and percentage for each color.
How does this differ from the Color Palette Extractor tool?
Color Palette Extractor parses CSS, SCSS, or HTML source code to find color values you have already declared. This tool works the other way around — it analyzes the pixels of an image to discover colors you have not declared yet, which is ideal for picking palettes from logos, photos, or design mockups.
Why are some near-identical colors merged together?
After ranking by frequency, the tool drops candidates that are visually too close to a higher-ranked color (Euclidean distance under 24 in RGB space). This keeps your palette diverse rather than returning multiple shades of the same hue.