Color Palette Generator

Analogous

Colors adjacent on the color wheel, creating harmonious and pleasing combinations.

Complementary

Colors opposite on the color wheel, providing high contrast and vibrant looks.

Triadic

Three colors evenly spaced around the color wheel, offering vibrant balance.

Tetradic

Four colors forming a square on the color wheel, providing rich color variety.

Split-Complementary

Base color plus two colors adjacent to its complement, softer than complementary.

Monochromatic

Variations of a single color using different shades, tints, and tones.

CSS Variables

Modern CSS custom properties for dynamic theming

:root {
  --color-1: #3b82f6;
  --color-2: #ef4444;
}

SCSS Variables

Sass/SCSS variables for preprocessing workflows

$color-1: #3b82f6;
$color-2: #ef4444;

JSON

Structured data format for programmatic use

{
  "colors": [
    {"hex": "#3b82f6", "name": "Blue"}
  ]
}

Tailwind Config

Ready-to-use Tailwind CSS configuration

{
  "custom-1": "#3b82f6",
  "custom-2": "#ef4444"
}