Generate beautiful color palettes from a base color using color theory.
Generate harmonious color palettes based on color theory. Pick a base color and choose from six palette types: analogous (neighboring hues), complementary (opposite hues), triadic (three evenly spaced hues), split-complementary, monochromatic (shades of one hue), or random.
Click any swatch to copy its hex code. Export the full palette as hex values or CSS custom properties. Everything runs in your browser.
Analogous colors sit next to each other on the color wheel. They create harmonious, low-contrast palettes that feel natural and cohesive — great for backgrounds and branding.
Complementary colors are opposite each other on the color wheel (e.g. blue and orange). They create high contrast and visual energy — ideal for call-to-action elements and accents.
Click 'Copy as CSS' to get the palette as CSS custom properties (variables). Paste them into your stylesheet's :root block and reference them as var(--color-1), var(--color-2), etc.
Enter a base color or click to pick one. Select a harmony mode — Complementary, Analogous, Triadic, Split-Complementary, Tetradic, or Monochromatic — and the generator creates a balanced palette. Copy individual colors or export the entire palette as CSS variables.
Color harmony is based on the color wheel. Complementary colors sit opposite each other (high contrast). Analogous colors are neighbors (harmonious and calm). Triadic colors form a triangle (balanced and vibrant). Each mode creates a different mood and visual impact.
Professional designers do not pick colors randomly. They start with a base color (usually from a brand) and use harmony rules to build a palette that feels intentional. This tool automates that process.
Convert any color from the palette between formats using our Hex to RGB Converter.