Pick a base color and instantly generate harmonious color palettes — complementary, analogous, triadic, and more. Export as CSS, SCSS, or Tailwind.
🔒 Your data never leaves your device
R
G
B
H°
S%
L%
Complementary Palette
Export Palette
Frequently Asked Questions
A complementary color scheme uses two colors that sit directly opposite each other on the color wheel (180° apart). This creates maximum contrast and visual impact. For example, blue and orange, or red and green are complementary pairs. Use complementary colors to make elements stand out against each other.
An analogous color scheme uses colors that are adjacent on the color wheel (typically 30° apart). These palettes look harmonious and natural, commonly found in nature. They're great for creating cohesive, visually comfortable designs like landscapes or calm UI themes.
A triadic color scheme uses three colors evenly spaced around the color wheel (120° apart). This creates vibrant, high-contrast palettes with more balance than complementary schemes. Using one color as dominant and the others as accents gives the best results.
A monochromatic color scheme uses variations of a single hue — different shades (darker), tints (lighter), and tones (desaturated). This creates a clean, unified look perfect for minimal designs. It's easy to keep accessible because all colors share the same hue.
Click "Copy CSS" to get the palette as CSS custom properties (CSS variables). Paste them into your :root selector: :root { --color-1: #hex; ... }. Then reference them anywhere: color: var(--color-1). You can also export as SCSS variables or a Tailwind extend config.