Color Palette Generator (5 schemes from one base)

The five color theory schemes

Complementary: two colors at opposite ends of the color wheel (180° apart). High contrast, vibrant. Used for accents, call-to-action buttons, and creating focal points.

Analogous: three colors adjacent on the wheel (30° apart). Harmonious and pleasing, low contrast. Common in nature; great for backgrounds and UI surfaces.

Triadic: three colors equally spaced (120° apart). Vibrant and balanced. Used in playful or energetic designs.

Tetradic (rectangle): four colors forming a rectangle (90° apart). Rich palette but harder to balance — typically use one as dominant and others as accents.

Monochromatic: tones, tints, and shades of a single hue. Sophisticated and unified. Common in minimalist designs and corporate branding.

Picking a starting color

Brand colors: most projects start from an existing logo or brand color. Test it as the base across all 5 schemes to find the best fit for your design.

Inspiration: pick a color from photography, art, or nature. Vivid colors (high saturation, mid lightness) work best as the base; very pale or very dark colors produce washed-out palettes.

Accessibility: ensure your final palette has enough contrast for text. Use our contrast checker to verify foreground/background pairings meet WCAG AA (4.5:1 for normal text).

Using the palette

CSS variables: define the palette colors as :root variables (--color-primary, --color-accent, etc.) so you can swap themes by changing one location.

Design tools: paste hex values into Figma, Sketch, or Adobe XD's color libraries. Most tools accept hex directly; some accept HSL or named CSS colors as well.

Limit usage: even with 5 colors, real designs typically use 2-3 prominently and the rest sparingly. The 60-30-10 rule (60% dominant, 30% secondary, 10% accent) is a useful starting balance.