Color Palette Generator
Harmonious color schemes or a palette extracted from your image
Press Space for a new palette · click a color for details · ⧉ copies it · 🔒 keeps a color
Shades of #7C3AED
Free Color Palette Generator
Color harmony rules, palettes from photos and ready-to-use codes
Pick a base color and this palette generator builds a five-color scheme from classic color-wheel harmonies: analogous (neighbouring hues), monochromatic (one hue, several lightness levels), complementary (opposite hues), split-complementary, triadic and tetradic. Press Space or “New palette” for fresh ideas and lock the colors you want to keep. Switch to “From image” to extract the dominant colors of a photo, logo or screenshot. Every swatch shows HEX, RGB and HSL and a WCAG contrast score for black or white text; click to copy. A 10-step shade scale (50–900) is generated for the selected color, and you can copy the whole palette as CSS variables or a HEX list, or download it as a PNG image. Images are analysed in your browser and never uploaded.
Features
6 harmony rules
Analogous, complementary, triadic and more
Palette from image
Dominant colors of any photo
Lock & shuffle
Keep favourites, regenerate the rest
Contrast check
WCAG ratio for text on each color
Color Harmony Basics
Harmony rules
- Analogous: hues within ±30° — calm and cohesive
- Complementary: hues 180° apart — high contrast
- Split-complementary: base + the two neighbours of its complement (±150°)
- Triadic: three hues 120° apart — vibrant but balanced
- Tetradic: four hues 90° apart — rich, use one as dominant
Practical tips
- 60-30-10 rule: 60% dominant, 30% secondary, 10% accent
- Body text needs a contrast ratio of at least 4.5:1 (WCAG AA)
- Large text (≥24 px or 18.5 px bold) needs 3:1
- Shade scales 50–900 work well as design tokens (Tailwind style)
Frequently Asked Questions
How do I create a color palette?
Choose a base color (for example your brand color), pick a harmony rule and the generator calculates the matching colors on the color wheel. Lock the colors you like and press Space to shuffle the rest.
How do I get a color palette from an image?
Switch to “From image” and drop, paste or choose a picture. The tool groups similar pixels (k-means clustering) and shows the six dominant colors, most frequent first.
What do the numbers like “Aa 7.2 · AAA” mean?
They show the contrast ratio between the swatch and the better of black or white text. WCAG AA requires 4.5:1 for normal text, AAA requires 7:1.
How do I use the palette in CSS?
Click “Copy CSS variables” to get a :root block with --color-1 … --color-5 and paste it into your stylesheet; then use var(--color-1) anywhere.
What are complementary colors?
Colors opposite each other on the color wheel, such as blue and orange or purple and yellow. They create strong contrast and work well for call-to-action buttons.
Is my image uploaded?
No. The image is scaled down and analysed in your browser with a canvas; nothing is sent to a server.