Color Palette Generator
Extract dominant colors from any image, or generate harmonious palettes from a base color. Copy swatches as HEX, RGB, or HSL — or grab the full palette as CSS variables.
Drag an image here or click to select
PNG · JPG · WEBP · GIF · BMP
How to use Color Palette Generator
- 1Choose a generation method
Either upload an image to extract its dominant colors, or pick a seed color to generate a harmonious palette automatically.
- 2Select the palette type
For generated palettes, choose from Complementary, Analogous, Triadic, Split-Complementary, or Monochromatic harmony rules.
- 3Browse the color swatches
Each color swatch shows its HEX, RGB, and HSL values. Click any swatch to copy the value to your clipboard instantly.
- 4Export your palette
Copy individual values or export the entire palette as a JSON object or CSS custom properties for use in your project.
Frequently Asked Questions
How does color extraction from images work?
- The tool samples pixels across your image using the Canvas API and clusters similar colors to identify the dominant palette. Everything runs in your browser — the image is never uploaded.
What color formats does the tool output?
- Each color is shown in HEX, RGB (decimal), and HSL formats. You can copy any format with a single click.
What does 'harmonious palette' mean?
- Color harmony rules are based on relationships on the color wheel. For example, Complementary colors sit opposite each other and create high contrast, while Analogous colors are adjacent and feel cohesive.
Can I use extracted colors in design tools?
- Yes. Copy the HEX codes directly into Figma, Adobe XD, Sketch, or any other design tool that accepts standard HEX or RGB values.