Color Palette Generator
Create beautiful, harmonious color palettes from any starting color. Generate complementary, analogous, triadic, and other color schemes based on color theory principles.
Color Harmony Types
| Scheme | Description | Best For |
|---|---|---|
| Complementary | Opposite colors on wheel | High contrast, bold |
| Analogous | Adjacent colors on wheel | Harmonious, calm |
| Triadic | Three evenly spaced colors | Vibrant, balanced |
| Split-Complementary | Base + two adjacent to complement | Vibrant but easier |
| Tetradic | Four colors in rectangle | Complex, colorful |
| Monochromatic | Variations of one color | Elegant, cohesive |
How It Works
1. Select or enter your base color 2. Choose a harmony type 3. View generated palette 4. Export colors in various formats
Generated Palette Example
Starting with #3498DB (blue):
| Harmony | Colors Generated |
|---|---|
| Complementary | #3498DB, #DB7934 |
| Analogous | #3434DB, #3498DB, #34DB98 |
| Triadic | #3498DB, #DB3498, #98DB34 |
Export Options
- CSS variables
- SCSS/Sass variables
- Tailwind config
- JSON format
What Makes a Palette Work
A usable interface palette is not five pretty colours. It is one hue with a full lightness ramp, plus a small number of semantic colours that never get used decoratively.
| Role | Count | Notes |
|---|---|---|
| Neutral ramp | 9–11 steps | Does most of the work — backgrounds, borders, text |
| Brand hue ramp | 9–11 steps | One hue, many lightnesses |
| Semantic | 4 | Success, warning, error, info — reserved meanings |
| Accent | 0–1 | Optional, used sparingly |
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and states without anyone reaching outside the palette. Mixing toward white and black rather than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
``css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.