Build color palettes from any base color, or pull the dominant colors out of an image. Click a swatch to copy its hex code. Everything runs in your browser.
How it works
From a color: pick or type a base color and six harmony palettes are built at once with color-wheel math: analogous, monochromatic, complementary, split-complementary, triadic, and tetradic. From an image: drop in a photo or logo and its pixels are grouped into up to 8 dominant colors, ordered by coverage.
Click any swatch to copy its hex code, or copy a whole palette as plain hex codes or as CSS custom properties. Everything runs in your browser. Nothing is uploaded and there is no signup.
Frequently asked questions
How does the color palette generator work?
Pick any base color and the tool builds six classic harmony palettes from it: analogous, monochromatic, complementary, split-complementary, triadic, and tetradic. The math runs on the color wheel, rotating the hue in HSL space, the same way designers build palettes by hand.
How do I get a color palette from an image?
Switch to From an image and drop in a photo, logo, or screenshot. The tool scans its pixels in your browser and returns up to 8 dominant colors, ordered by how much of the image each one covers, each with its hex code.
What is the difference between the palette types?
Analogous colors sit next to each other on the wheel, which reads calm and unified. Complementary pairs sit opposite each other, for maximum contrast. Split-complementary softens that contrast. Triadic and tetradic spread three or four hues evenly, which reads lively and balanced. Monochromatic keeps one hue and varies the lightness, which is safe and clean.
How do I copy the colors?
Click any swatch to copy its hex code, or use Copy hex codes for the whole palette. Copy CSS gives you the palette as ready-to-paste CSS custom properties: --color-1, --color-2, and so on.
Can I link someone to a specific palette?
Yes. Add ?color= plus a hex code to the page URL, for example ?color=e11d48. The page opens with that base color and its palettes already built.
Are my images uploaded anywhere?
No. The image is read and analyzed entirely in your browser. It never leaves your device. There is no signup.
Which palette should I use for my website?
A safe recipe: pick your brand color, use a monochromatic ladder for backgrounds and borders, and take one accent from the complementary or split-complementary palette for buttons and links. Check text contrast before you ship. Light tints rarely work for body text.
How many colors should a palette have?
Three to five for most sites: one brand color, one or two neutrals for backgrounds and text, and one accent. The six harmony palettes give you the candidates. You pick the few you will use, and the monochromatic ladder fills in the tints and shades between them.