⚙️ Developer Tools
Color Palette Generator
Generate beautiful color palettes from any base color. Pick complementary, analogous, triadic, split-complementary and monochromatic schemes. Copy HEX, RGB or HSL values instantly.
Complementary
Analogous
Triadic
Split-Comp
Monochromatic
Tetradic
✅ Copied!
Advertisement
Free Color Palette Generator — Complementary, Analogous & More
Our free color palette generator creates harmonious colour schemes based on colour theory — complementary, analogous, triadic, tetradic and split-complementary from any base colour. Essential for web designers, UI designers and brand designers.
🎨 5 Harmony Types
Complementary, analogous, triadic, tetradic, split-complementary.
🖌 Any Base Colour
Start from any colour — colour wheel or HEX input.
📋 Copy CSS
Colours as HEX, RGB, HSL or CSS variables.
🌙 Light & Dark
Preview colours on both light and dark backgrounds.
How to Use — Step by Step
1
Choose your base colour
Use the colour picker or type a HEX code.
2
Select harmony type
Choose how the palette is generated.
3
Explore your palette
Generated colours shown with HEX, RGB and HSL values.
4
Copy values
Click any swatch to copy its value. Export full palette as CSS variables.
Frequently Asked Questions
What is complementary colour?
Colours directly opposite on the colour wheel — blue and orange, red and green. High contrast, visual energy. Great for CTAs and highlights.
What is an analogous colour scheme?
Adjacent colours on the wheel — like blue, blue-green and green. Harmonious and cohesive. Good for calm, professional designs.
How many colours should a website palette have?
3–5 colours: one primary, one secondary accent, one neutral background, one text colour, optionally one for alerts.
What is the 60-30-10 rule?
60% dominant colour, 30% secondary, 10% accent. Creates visually balanced compositions.
What is colour contrast and accessibility?
WCAG 2.1 requires 4.5:1 contrast ratio for normal text and 3:1 for large text. Ensures readability for people with low vision or colour blindness.
🛠 Related Tools You Might Need
These tools work great together — use them in combination for your workflow.