Image Color Palette
Extract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
Drop or click to choose an image
How to use the image color palette
Drop or pick an image; the 6 most-used colors are extracted client-side and shown as a palette.
Formula & explanation
We downsample to ≤100×100, bucket pixels into 32³ RGB cubes, and pick the densest. Fast, deterministic, no server upload.
Examples
Useful for matching a brand color from a logo, or finding the dominant tones of a photo.
Frequently asked questions
- Is my image uploaded to a server?
- No — color extraction runs entirely in your browser using the Canvas API. Your image never leaves your device.
- How are the dominant colors determined?
- The image is downsampled to at most 100×100 pixels, then pixels are grouped into 32³ RGB buckets. The six most-populated buckets become the palette.
- Why does the palette sometimes look washed out?
- Very high-contrast images can produce averaged bucket colors that appear muted. For better results, crop to the specific area of interest before uploading.
- Can I copy the hex codes?
- Yes — click any color swatch to copy its hex code to the clipboard.
Related design & css tools
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.
- Type Scale GeneratorGenerate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.
- Spacing Scale GeneratorBuild a consistent spacing scale for design systems — enter a base unit and multiplier to generate a full set of spacing tokens in px and rem, ready for Tailwind or CSS variables.