Color Palette Generator
UI ToolsGenerate complementary, triadic, analogous, and split-complementary color palettes from a seed color. Export swatches as CSS variables, Tailwind config, or HEX codes.
HEX
Hue
217°
Sat
91%
Light
60%
Harmony
Analogous5 colors — click to copy
Export
:root {
--color--30: #3CE0F6;
--color--15: #3CB2F6;
--color-base: #3C83F6;
--color-15: #3C55F6;
--color-30: #523CF6;
}About Color Palette Generator
The Color Palette Generator creates harmonious color schemes from a single seed color using established color theory relationships. Choose from complementary, split-complementary, triadic, tetradic, analogous, or monochromatic harmony types to generate a palette automatically. Each palette displays swatches with HEX, RGB, and HSL values, and you can export the full set as CSS custom properties, a Tailwind CSS `colors` config, or a plain HEX list — all ready to drop straight into your project.
Features
- ✓Six harmony modes: complementary, split-complementary, triadic, tetradic, analogous, monochromatic
- ✓Seed color input via color picker, HEX, RGB, or HSL
- ✓Tint and shade variations for each palette color (50–900 scale)
- ✓Export palette as CSS custom properties, Tailwind config, or plain HEX list
- ✓Copy individual swatch HEX, RGB, or HSL value with one click
- ✓Lock individual colors and regenerate the rest of the palette
- ✓WCAG contrast check badge shown on each swatch pair
- ✓Preview palette applied to a sample UI card component
Common Use Cases
- Generate a full design system color palette from a single brand color
- Explore color harmonies to choose accent and secondary colors for a UI
- Create a Tailwind CSS color configuration with tint/shade scales
- Pick an accessible foreground/background color pair using the contrast badges
- Rapidly prototype brand color options to share with a client for approval
Frequently Asked Questions
QWhat is a complementary color pair?
Complementary colors sit directly opposite each other on the color wheel (e.g., blue and orange). They create maximum contrast and visual tension, often used for call-to-action elements.
QHow are tint and shade scales generated?
Tints are lightened toward white and shades are darkened toward black using perceptual HSL adjustments, producing an evenly spaced 10-step scale similar to Tailwind's default palette.
QCan I export for Figma?
Export as CSS variables and use Figma's Tokens plugin or Variables panel to import them. A native Figma JSON export format is on the roadmap.
QWhat if the generated palette doesn't look quite right?
Use the lock feature to keep colors you like, then click regenerate to vary the rest. You can also nudge any swatch hue, saturation, or lightness manually.