Color Palette Generator — Complementary, Triadic, Analogous

Color theory, one page

A color palette is a small, coherent set of colors chosen to work together. Good palettes share a mathematical relationship on the color wheel — they are not picked by feel alone. This tool generates six classical palette types from any base color so you do not have to eyeball it.

The color wheel used here is HSL (Hue, Saturation, Lightness). Hue is the angle around the wheel, 0° to 360°: red at 0, yellow at 60, green at 120, cyan at 180, blue at 240, magenta at 300. Saturation is how pure the color is (0% = gray, 100% = fully saturated). Lightness is how bright it is (0% = black, 50% = the true color, 100% = white). Every scheme below is just a rule for rotating the hue and optionally adjusting lightness.

The six schemes

Complementary (two colors)

Base color plus the one directly opposite it on the wheel — a 180° rotation. This is maximum hue contrast. Great for call-to-action buttons against a neutral background, warning badges, or any place where you want one element to pop. Used heavily, though, complementary pairs start to feel aggressive and can vibrate at the edges when placed directly next to each other. Give them whitespace.

Analogous (three colors, ±30°)

Base color plus its two immediate neighbors on the wheel. Very harmonious because the hues are close. Feels natural and restful — think sunsets (yellows into oranges into reds) or forests (yellow-greens into greens into blue-greens). Good for backgrounds, gradients, illustrations, and any design where you want cohesion rather than drama.

Triadic (three colors, 120° apart)

Three colors spaced evenly around the wheel. The most playful, balanced palette shape. Many cartoons, kids' brands, and retro designs use triads. The trick is to let one color dominate and use the other two as accents — all three at equal weight looks chaotic.

Split-complementary (base + two neighbors of the complement)

Instead of the direct complement, pick the two colors 30° to either side of it (so 150° and 210° from base). You get almost the contrast of a complementary pair but with more room to breathe. A safer, more flexible alternative that works well for UIs with multiple states (default / hover / active).

Tetradic / rectangle (four colors, two complementary pairs)

Four colors that form a rectangle on the wheel — two complementary pairs. Rich and complex, suited to editorial design and illustrations. Difficult to balance: you almost always want one color to dominate and treat the others as accents. Otherwise it reads as noise.

Monochromatic (five shades of one hue)

Same hue, five different lightness levels. The most elegant and safest option, especially for minimal UIs, dashboards, and documents. Works because lightness variation gives you enough visual hierarchy without hue conflict. Most of this site is monochromatic zinc.

How to use this tool

1. Enter a hex color (3- or 6-digit, with or without the #) — or use the native color picker next to the field
2. Optionally click a preset chip (Indigo, Emerald, Rose, Amber, Sky, Slate) to jump to a common starting point
3. Click a scheme button — the swatches regenerate instantly
4. Click any swatch to copy its hex value to the clipboard
5. Use Copy as CSS variables to get a paste-ready :root block for your stylesheet
6. Use Copy as JSON for hex/rgb/hsl triples you can feed to a design system or script

CSS output format

The Copy as CSS variables button produces:

:root {
  --color-1: #4f46e5;
  --color-2: #10b981;
  --color-3: #f43f5e;
}

Drop this into your main stylesheet and reference the tokens wherever you need them: background: var(--color-1);. The base color is always --color-1 for most schemes; for monochromatic the base sits in the middle of the lightness ramp.

Accessibility notes

• Palette generation does not check contrast ratios. A mathematically correct complementary pair can still fail WCAG AA for body text. Verify foreground/background combinations with a contrast checker before shipping
• Monochromatic palettes are the easiest to make accessible because lightness variation directly controls contrast
• For text, aim for at least 4.5:1 contrast (AA) or 7:1 (AAA). Large text (18pt+ or 14pt+ bold) can go down to 3:1 (AA)
• About 8% of men and 0.5% of women have some form of color vision deficiency. Do not rely on hue alone to convey meaning — always pair with shape, position, or text

Under the hood

The generator converts your hex input to RGB, then to HSL. Each scheme is a pure function that returns new HSL values by rotating the hue (adding 30°, 120°, 150°, 180°, 210°, 240° — whatever the scheme requires) or adjusting lightness (monochromatic only). The results are converted back to RGB and rendered as CSS background colors on the swatches. Zero dependencies — just color math running in your browser.

The text color on each swatch flips automatically based on lightness: light swatches get dark text, dark swatches get light text. This is the simplest accessibility heuristic that actually works, though it does not guarantee WCAG compliance — see the note above.

Tips from real design work

• Start with your brand's primary color, not with a scheme. The scheme exists to generate accents around the primary, not to replace it
• 60-30-10 rule: 60% of the page is one color (usually a neutral or the base), 30% is a supporting color, 10% is an accent. Palettes with more than three active colors almost always need this discipline
• Neutrals are colors too. A palette of brand-red + brand-blue often works better as brand-red + brand-blue + a warm gray and a cool gray. This tool gives you the brand colors; pair them with zinc, slate, or stone from your framework
• Test in both light and dark mode. A palette that sings on white backgrounds can look muddy on near-black backgrounds, and vice versa. Monochromatic schemes tend to adapt best
• Trust your eyes over the math. If a mathematically correct triadic scheme looks wrong to you, rotate the base color a few degrees and regenerate. Color theory is a starting point, not a final answer

Privacy

Everything runs in your browser. No color you enter is ever sent to a server. No analytics, no telemetry, nothing logged. Safe for unreleased brand work.

Frequently asked questions

Which scheme should I use for a web app?

Start with monochromatic. It is the safest choice for interfaces because you get automatic hierarchy from lightness without hue conflict. Add one complementary or triadic accent for buttons, notifications, and highlights. This is what most modern design systems (Tailwind, Radix, Material) do by default.

Why does the tool show only 2, 3, 4, or 5 colors?

Because classical color theory only defines those shapes on the wheel. Larger palettes (10, 20 colors) are usually tints and shades of a smaller set, not independent hues. To build a full design system, pick a palette here, then generate tints and shades of each color externally (Tailwind's 50-950 scale is a good reference).

Can I save or share a palette?

Not via this tool directly — there are no accounts or databases. Use Copy as CSS variables or Copy as JSON to export, then paste into your design file, stylesheet, or a shared doc. The privacy trade-off (nothing saved anywhere) is the whole point of a client-side tool.

Do you support HSL or RGB input?

Hex only, for simplicity — hex is the universal format that every design tool, browser DevTools panel, and color picker speaks. If you have an RGB or HSL value, convert it first with the Color Converter, then paste the resulting hex here.

How is this different from Coolors, Adobe Color, Paletton?

Those tools do more: they let you lock colors, generate random palettes, export to Adobe Swatch Exchange, save to accounts, and so on. This tool intentionally does less — it is the 90-second version for when you already have a base color and just need the classical schemes around it, instantly, with no signup or paywall.

Is my data sent anywhere?

No. All conversion and scheme generation happens in your browser with no network calls. The colors you work with never leave your device.