Palette Generator
Generate beautiful color palettes with tints, shades, and color harmonies. Create complementary, analogous, triadic, and split-complementary schemes instantly.
Color Palette (100-900)
:root {
--color-100: #E0E0FC;
--color-200: #C1C2F9;
--color-300: #A1A3F7;
--color-400: #8285F4;
--color-500: #6366F1;
--color-600: #4F52C1;
--color-700: #3B3D91;
--color-800: #282960;
--color-900: #141430;
}How to Use
- Enter your base color using HEX, RGB, or HSL format
- Choose a harmony type: Tints & Shades, Complementary, Analogous, Triadic, or Split Complementary
- Preview the generated palette
- Click any color to copy its hex value
- Export the full palette as CSS, Tailwind, or JSON
Examples
Indigo Palette
Emerald Palette
Frequently Asked Questions
What are tints and shades? ▼
Tints are created by adding white to a color (making it lighter), while shades are created by adding black (making it darker). Together they form a complete palette from light to dark.
What is a complementary color scheme? ▼
Complementary colors are opposite each other on the color wheel. They create high contrast and visual interest when used together.
What are analogous colors? ▼
Analogous colors are next to each other on the color wheel. They create harmonious, pleasing combinations often found in nature.
What is a triadic color scheme? ▼
Triadic colors are evenly spaced around the color wheel (120° apart). They offer vibrant contrast while maintaining color harmony.
What do the numbers 100-900 mean? ▼
These weight numbers follow common design system conventions. 500 is the base color, 100-400 are lighter tints, and 600-900 are darker shades.