How to use the Color Palette Generator
1. Pick a base color using the color picker or type a hex value.
2. Choose a palette mode: Shades (lightness variations), Complementary, Analogous, or Triadic.
3. Click any color swatch to copy its hex code to your clipboard.
What is it?
A color palette is a set of harmonious colors derived from a single base color using color theory principles. Different palette types serve different design goals: Shades give you the full lightness range of your color for backgrounds, borders, and text. Complementary colors are opposite on the color wheel for high contrast. Analogous colors are adjacent on the wheel for a cohesive, calm feel. Triadic colors are evenly spaced for vibrant, balanced palettes.
This tool calculates all palettes mathematically using HSL (Hue, Saturation, Lightness) color space for perceptually uniform results. These are the same techniques used by design systems like Tailwind CSS, Material Design, and Chakra UI to generate their color scales.
Example
#6366f1 · Mode: Analogous
#6366f1 (Base — Indigo) #8b5cf6 (Purple — +30°) #a855f7 (Violet — +45°) #4f46e5 (Dark Indigo — -15°) #3b82f6 (Blue — -45°)
Analogous palettes use colors adjacent on the color wheel — harmonious and natural. Perfect for a cohesive brand palette.
Benefits
Generate a complete color system from one base color
Shades, complementary, analogous, and triadic palettes are generated automatically — every role in a design system covered from one starting color.
Build accessible color tokens for your design system
Palettes include a range of light and dark shades that provide passing contrast combinations for text and background pairings.
Explore color relationships before committing to a brand palette
See how analogous, complementary, and split-complementary colors relate visually before making a final design decision.
Export hex and HSL values directly into Tailwind, CSS, or Figma
Copy generated color values directly into CSS custom properties, Tailwind config, or Figma design token files.
Frequently asked questions
What is the difference between analogous and triadic palettes?
Analogous palettes use colors close together on the color wheel (±30°) — they look harmonious and natural, like sunsets. Triadic palettes use three colors evenly spaced 120° apart — more vibrant and visually dynamic, suitable for bold brand designs.
Why is the Shades mode useful?
The Shades mode generates the same color at different lightness levels (10%–90%). This is how Tailwind CSS generates its color scales (e.g., blue-100 through blue-900). Having shades lets you use one color for backgrounds (light), borders (medium), and text (dark) while maintaining visual consistency.
Can I use these colors directly in CSS?
Yes — click any swatch to copy the hex code. Paste it directly into CSS: color: #3b82f6. For production design systems, consider converting to HSL or CSS custom properties for easier theming.