Color Palette Generator

Color theory is the foundation of every design system. The way colors relate to each other on the color wheel determines whether a palette feels harmonious, energetic, calm, or striking. Understanding these relationships — and knowing how to derive them mathematically from a single base color — is one of the most practical skills in UI and graphic design.

Monochromatic palettes use one hue across a range of lightness and saturation values. They feel cohesive and refined, and are the basis of nearly every "minimal" or "clean" design. Complementary palettes pair a color with its opposite on the wheel (180° away), creating high contrast and vibrant tension — ideal for call-to-action buttons against a neutral background. Triadic palettes use three colors equally spaced (120° apart), offering variety while maintaining balance. Analogous palettes use colors adjacent on the wheel (±30°), producing naturally pleasing, low-contrast combinations often found in nature. Split-complementary is a softer alternative to complementary — it takes the two colors adjacent to the complement, giving contrast without the harshness of a direct complement.

The "Shades" mode generates a 10-step tint-and-shade scale modeled after Tailwind CSS's color system (50 through 900). This is directly usable in a Tailwind config or design token setup: pick your brand color and instantly get the full scale from near-white to near-black.

All palette math runs entirely in your browser using HSL (Hue, Saturation, Lightness), the most intuitive color model for manipulation. Rotating the hue produces harmonic color relationships. Adjusting lightness produces tints and shades. Adjusting saturation produces muted or vivid variants. The tool exports palettes as CSS custom properties, Tailwind config objects, or JSON arrays — ready to paste directly into your codebase.