Copied!
Home›Color Utilities›Color Palette Generator

Color Palette Generator

Upload any image to extract its dominant colors — get HEX, RGB, HSL, export CSS variables, and explore color harmonies.

Color Palette Generator Canvas API

Drop an image here or click to upload
Supports JPG, PNG, GIF, WebP, BMP, SVG · 100% processed locally in your browser
Try a sample gradient

What is a Color Palette?

A color palette is a curated set of colors used consistently across a design. In web design and UI/UX, palettes establish visual identity, brand recognition, and aesthetic harmony. A well-chosen palette typically includes a primary brand color, secondary accent colors, neutral backgrounds, and semantic colors (success green, error red).

How Color Extraction Works

This tool uses the HTML5 Canvas API to read every pixel of your uploaded image directly in the browser — no server upload required. It then applies a median cut quantization algorithm to group similar colors and identify the dominant hues. The result is a palette of the most representative colors in the image, sorted by frequency (how many pixels belong to each color group).

Color Format Reference

Color Harmony Types

What the palette extractor is actually doing — and why large flat areas dominate
Understanding the algorithm helps you get better results out of it.

The tool reads every pixel via the HTML5 Canvas API and groups similar colors together using a clustering approach. The "dominant" colors it surfaces are dominant by pixel count — the colors that occupy the largest areas of the image. This is useful for extracting background tones, sky colors, and large product areas. It's less reliable for finding small, visually interesting accent colors: a tiny red logo on a large white background will contribute far fewer pixels than the white does, and may not appear in the top 5 extracted colors at all.

Practical consequence: if you're extracting a brand palette from a product photo, zoom or crop the image to emphasize the colors you actually want before dropping it in. A photo that's 80% background sky will give you a sky-heavy palette. Cropping to the product itself, or using the logo PNG instead, gives you the colors that actually matter.

Image typeResults you'll getTips
Product photo on whiteMostly off-whites, maybe the product colorCrop to the product area. Remove the background if you can (remove.bg, Figma background removal).
Brand logo PNG (transparent bg)Clean, accurate brand colorsBest source for extracting brand palettes. Flat vectors extract cleanly with few colors.
Landscape photographyAtmospheric sky tones, mid-range greens/brownsGood for mood-board palette work. Adjust the number of colors up to 8+ to capture range.
Heavily compressed JPEGMuddy, slightly off versions of the real colorsJPEG compression introduces color noise. PNG or high-quality exports give cleaner extraction.
Screenshot of a websiteMix of UI colors, likely dominated by white/light greyCrop to a specific component, not the full page. Better: export the design file directly.
What designers actually mean by "palette" — it's not just a list of colors
A palette extracted from an image is raw material. Turning it into a usable design system takes a few extra steps.
Check contrast before committing to any color for text

Extracted palettes frequently contain beautiful mid-tone colors that fail WCAG contrast at any text size. Before using an extracted color as a text color or a background with text on it, run it through the contrast checker. A color you love aesthetically may only work as a decorative element, not functional UI.

The 60-30-10 rule works, but 60% is usually a neutral

The rule is real and useful, but the 60% color is almost always white, light grey, or off-white in real web interfaces — not the brand color. Brand colors work as the 30% secondary (backgrounds, buttons, section fills) and the 10% accent (CTAs, highlights, icons). Applying a saturated brand color to 60% of the UI consistently looks overwhelming in practice.

Extracted colors rarely need to be used verbatim

Image pixels are affected by lighting, photography, and compression. The extracted #3B6E4A might be a slightly dull version of a green that should actually be #2D7A45 in the actual brand. Use extracted values as starting points, then push them toward your intended brand values by adjusting lightness and saturation in a color tool.

Export as CSS variables, then build a shade scale

The CSS export gives you a :root { --color-1: ...; } block. That's step one. Step two: for each key brand color, generate a 9-step shade scale (using HSL lightness increments from 10% to 95%). This is what makes a palette actually usable across a full UI — buttons need a hover state, backgrounds need multiple tones, text needs different weights.

More colors isn't always better

Extracting 10+ colors from an image often gives you near-duplicates — five slightly different shades of beige from a photo's background gradient. A palette of 4–6 distinct, well-separated colors is almost always more useful than 10 similar ones. Reduce the count slider and look for colors that feel clearly different from each other.

Images with transparency need careful handling

Transparent PNGs composed over a white canvas background will include white in the extraction even if the original had no white. The Canvas API reads composited pixel values including the page background. If you need pure extraction from a transparent PNG, the results will reflect whatever the canvas background color is — usually white.

Other color tools
🏹HEX to RGB Converter

Convert a hex code to RGB, HSL, CMYK and CSS variables.

 🔍Contrast Checker

Test palette colors against each other before using them for text.

 🔄Color Converter

Convert between HEX, RGB, HSL, HSV and CMYK.

 🏱RGB to HEX Converter

Dial in RGB values and export HEX, HSL and more.
Questions
Three common causes. First, the color you're looking for might be in a small area that gets averaged out by larger background areas. Second, JPEG compression introduces blocking artifacts that create color noise — the extracted color is a blend of the intended color and compression artifacts. Third, the image may have been photographed under colored lighting that shifts the actual pixel values away from the brand's true colors. For reliable brand color extraction, use a vector logo or brand asset in PNG format rather than a product photo.
No. The entire process runs in your browser using the HTML5 Canvas API. The image is drawn to an off-screen canvas element and the pixel data is read directly in JavaScript — nothing leaves your machine. You can verify this by opening your browser's network tab before uploading; you'll see no upload requests triggered by the tool.
It depends on what you're doing with the result. For a brand palette: 4–6 colors is usually enough to get a primary, secondary, accent, and 1–2 neutrals. For a mood board or artistic reference: 8–12 gives you more nuance. Beyond 12, you're typically getting near-duplicates. If the extracted colors look very similar to each other, reduce the count — you're seeing the same color cluster split into slightly different variants.
You can, but it usually gives poor results. A full-page screenshot is dominated by white or light-grey backgrounds, so those overwhelm the actual brand colors in the extraction. A better approach: take a screenshot of a specific component (a button, a card, a hero section) and crop tightly before uploading. Or better still, inspect the site directly in DevTools — the actual color values are right there in the Styles panel without needing to extract from pixels.