Color palette generator
Upload an image to get its dominant colors, or generate a harmonious palette from scratch. Copy each color as HEX, RGB, or HSL, and export the whole palette to CSS, Tailwind, JSON, or an image.
Drag an image hereTap to choose your file
or click to choose · paste with Ctrl+VJPG, PNG, WEBP, GIF, AVIF · up to 30 MB
Processed on your device: nothing is uploaded
Drag a circle to change its color, or select the image to add a new one.
Use the lock to keep the colors you like. With focus on the color strip, press Space to generate another palette.
Export
How to use it
- Choose “From an image” and drag in a photo, or paste a screenshot. If you just want to try it, use the sample image.
- Set how many colors you want and the order to see them in. Drag the numbered circles over the image to change a color, or select any point to add another.
- To build a palette from scratch, open “Generate palette”, choose a harmony type, and select “Generate”. Lock the colors you want to keep and generate again.
- Copy any color as HEX, RGB, or HSL, or export the whole palette as CSS, SCSS, Tailwind, JSON, a PNG image, or SVG.
Frequently asked questions
How are the colors in an image chosen?
The image is scaled down, pixels that look alike to the human eye are grouped (in the OKLab color space), and a representative color is taken from each group. Colors that barely appear, under 1% of the image, are dropped so that anti-aliased edges and noise stay out.
Why do I get fewer colors than I asked for?
If the image has few distinct colors, such as a logo or a flat illustration, nearly identical groups are merged and the ones that barely appear are ignored. That is expected: with photos rich in tones you will see the full number.
What does “Ignore whites and blacks” do?
It skips nearly white and nearly black pixels, which are typical of backgrounds and shadows, so the palette shows the colors of the subject. If the image is black and white, all pixels are used.
How do I generate colors that go well together?
Each harmony type uses a rule of the color wheel: analogous (neighboring hues), monochromatic (one hue at different lightness levels), complementary (opposite hues), triadic, and tetradic. If you lock a color and generate again, the others are calculated from it.
Can I share a palette with someone else?
Yes. In “Generate palette”, the page address includes the color codes. Select “Copy link” and whoever opens it will see the same palette. The colors travel in the address itself: they do not go through any server.
Is my image uploaded to a server?
No. The image is analyzed on your device and never leaves it. There is also no sign-up, no limits, and no watermarks.
What a color palette is
It is the small set of colors that gives a brand, a website, a presentation, or an illustration its identity. A good palette has few colors, enough contrast between them, and a clear relationship: some take the lead, others support, and a couple are neutral.
Two ways to create one
- From an image: ideal if you already have a photo, a painting, or a screenshot that conveys what you are after. The tool finds the dominant colors and shows how much each one weighs in the image.
- Generated: starts from a harmony rule and the colors you lock. It is a quick way to explore ideas without a reference.
How to use it in your project
- CSS and SCSS: variables ready to paste into your stylesheet.
- Tailwind: a block for your config file; afterward you use classes such as
bg-palette-1. - JSON and JavaScript: for charts, app themes, or design tests.
- PNG and SVG: an image with the colors and their codes, to share in a chat or attach to a document.
Tips
Always check that text is readable on each color: every card shows which ink, white or black, reads best and the contrast ratio. If you need to fine-tune a shade, open it in the color picker.
How many colors to use
Four to six colors are enough for a brand or an interface: one main color, one or two supporting colors, an accent, and a neutral or two. A handy rule is to split the color in proportions of 60% for the dominant one, 30% for the secondary, and 10% for the accent. If the tool returns more colors than you need, lower the number or turn on “Ignore whites and blacks” to keep only the shades with character.
How to read the results
- Order: by default, from the color that weighs the most in the image to the one that weighs the least. You can also sort by lightness or by hue.
- Markers: the numbered circles over the image show where each color came from; drag them to pick another point.
- Link to share: in generated mode, the page address includes the colors, so you can send your palette to a colleague.
Privacy
The image is analyzed in your browser and is not uploaded to any server.
Updated on September 29, 2026