How is the base color used?

It's used as the anchor hue; other colors are derived by rotating hue or adjusting lightness on the HSL wheel.

Can I export for Tailwind?

Yes, choose the Tailwind export format to get a ready-to-paste colors object.

What's the difference between triadic and tetradic?

Triadic uses three colors spaced 120° apart; tetradic uses four spaced 90° apart on the hue wheel.

Palette Generator

Generate complementary, analogous, triadic and other palettes.

Works Offline

Privacy First

No Login

No API

Base color

Scheme

Export as

Palette

#6366f1

#f1ee63

Export

:root {
  --color-1: #6366f1;
  --color-2: #f1ee63;
}

About the Palette Generator

Pick a base color and generate complementary, analogous, triadic, tetradic or monochromatic palettes, then export the results as CSS variables, a Tailwind color object, or JSON.

Examples

Complementary from indigo

#6366f1

Output

#6366f1, #a9a663

Related tools

Color Blindness Simulator

Color

Simulate how a palette looks with common color vision deficiencies.

Color Converter

Color

Convert colors between HEX, RGB, HSL, HWB, OKLCH and CMYK.

Color Mixer

Color

Blend two colors with a ratio slider and preview CSS blend modes.

Contrast Checker

Color

Check WCAG 2.1 contrast ratio between two colors.

Gradient Palette Extractor

Color

Extract and normalize colors from CSS gradients or lists.

Random Color Generator

Color

Generate random colors and palettes with HSL constraints.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-06 · Runs entirely in your browser