Color Palette Generator From Image
Turn a photo or screenshot into an editable set of dominant colors. Preview the result in a small brand kit and export it for your design workflow.
Choose an image to generate a palette
Drop an image, paste from the clipboard, or choose a file. JPG, PNG, and WebP up to 10 MB.
How to use it
- Upload, paste, or drop an image, or open the local sample.
- Choose how many colors to extract, from three to ten.
- Edit any swatch and export the finished palette.
Practical uses
- Build a starting palette from photography or product imagery.
- Try extracted colors in a simple UI preview.
- Move swatches into CSS, Tailwind CSS v4, JSON, or an image reference.
Good to know: Dominant colors are approximations based on sampled pixels. Re-extracting at a new palette size replaces manual swatch edits. A nearly uniform image may produce fewer colors than requested. The Tailwind export uses v4 @theme syntax.
Frequently asked questions
How are the dominant colors chosen?
The image is scaled down in your browser, similar pixels are grouped, and the most common distinct groups become swatches.
Does my photo leave my device?
No. Uploaded images are decoded and sampled in the browser. The built-in sample image is a file on this site.
Explore more color tools
Continue your workflow with another focused tool.
Image Color Picker
Pick an exact pixel color from an image and copy HEX, RGB, or HSL.
Color Contrast Checker
Check WCAG text contrast and find a nearby passing foreground.
HEX to RGB Converter
Convert HEX and RGB both ways, including optional alpha.
CSS Gradient Generator
Create linear, radial, and conic gradients with editable stops.