Color Palette Generator

Colors that go together, easily

Slides, blogs, menus and banners look messy when colors are picked at random. This tool builds palettes from one base color using color-wheel harmonies, or pulls the main colors out of a photo you like. Click a swatch to copy its HEX code, copy ready-to-use CSS variables, or download the palette as an image.

Harmonies

• Complementary — opposite colors on the wheel; bold and eye-catching, great for call-to-action buttons and sale banners.
• Analogous — neighboring colors; calm and natural.
• Triadic — three colors 120° apart; balanced and lively.
• Split complementary — the two colors beside the complement; contrast that's softer than complementary.
• Tetradic — four colors 90° apart; rich, but pick one as the main color.
• Monochrome — one hue at different lightness levels; the hardest to get wrong.

Colors from a photo

Upload a travel photo, product shot or artwork. It's scaled down and similar colors are clustered (k-means) to find the dominant ones, shown from most to least common. Choose 5–8 colors. It's a quick way to carry a photo's mood into a design. Photos are analyzed on your device only.

Use the main color widely, secondary colors sparingly and the accent only where it counts (buttons, headings). Check text/background contrast with the Color Code Converter. The CSS variables are named primary, secondary, accent and so on, ready to paste into a stylesheet; the PNG is handy for sharing with designers or printers.