Design Tools
Color Palette Generator
Pick a base color and get a 5-color palette. Five schemes, copy any color, export as Tailwind / CSS / JSON.
Color theory in one minute
Monochrome: 5 lightness steps of the same hue. Safe, cohesive, easy.
Analogous: 5 hues within ±30° of the base. Harmonious, gentle.
Complementary: base + opposite hue (180° away). High contrast, vivid.
Triad: 3 hues evenly spaced (120° apart). Vibrant, balanced.
Tetrad: 4 hues evenly spaced (90° apart). Maximum diversity.
Frequently Asked Questions
How do I pick a good base color?▾
Start with the dominant color of your brand (logo, hero image, key product). Hit "Random" to explore unfamiliar territory. The base color anchors the whole palette — every scheme rotates around it.
What scheme should I use?▾
Monochrome (different lightness of the same hue) is safest and most cohesive. Analogous (neighbor hues) feels harmonious. Complementary (opposite hue) creates contrast. Triad and tetrad add more colors but require careful balancing.
How are the colors calculated?▾
We convert your base color to HSL, then rotate the hue (or shift lightness) according to the chosen scheme. The math is standard color theory — same algorithms used by Adobe Color, Coolors, and other palette tools.
Can I export to my design tool?▾
Yes — copy any individual color to your clipboard, or copy the whole palette as Tailwind config, CSS custom properties, or JSON. Drop straight into your design system.
How do I check accessibility?▾
Use our HEX/RGB Converter for WCAG contrast ratios. Aim for 4.5:1 minimum (AA) for body text, 3:1 (AA Large) for large text. Pure complementary colors at the same lightness often fail contrast — adjust lightness.