Color Palette Generator

This is a color palette generator. Pick a base HEX, a harmony (complementary, analogous, split, triadic, tetradic, monochromatic) and a style. Lock a swatch, then generate again — #3B82F6 complementary keeps that blue and rebuilds the rest.

Lock a swatch so Generate leaves it. 2–8 colors. Arrow buttons reorder. HEX on a swatch is editable.

Strip preview (color-blind modes recolor this view only).

Click a value to copy it

Contrast between every pair. 4.5+ marks AA for body text. · Need contrast for text? Use Color Converter

Examples — click a swatch

Color Palette Generator

This is a color palette generator: from one HEX it builds a set that follows a color-wheel harmony, the same idea as Adobe Color and Figma’s generator. Complementary is opposite on the wheel (H + 180°). Analogous walks ±20° and ±40°. Split complementary uses ±150°. Triadic is 120° / 240°. Tetradic is 90° / 180° / 270°. Monochromatic keeps H and S and steps L. #3B82F6 complementary includes that blue and its opposite. Styles (pastel, vivid, muted, earthy) change saturation and lightness, not the hue rule. HEX to Tailwind finds a default class; tint / shade mixes one color toward white or black. This page is a multi-color scheme.

How to use

  1. Set the base HEX (or the eyedropper / picker). Choose Harmony and Style, then Generate. Random picks a new base first.
  2. Lock a swatch so the next Generate keeps it and rebuilds the others. 2–8 colors. Add color appends the HEX field. × removes (not below 2). Arrows reorder like Figma.
  3. Edit the HEX on a swatch. Undo / Redo walk the last 40 states. Hue / saturation / lightness sliders shift unlocked colors together.
  4. Chips and Copy result copy the HEX list. CSS variables and JSON are extra exports. Download PDF prints HEX-labeled swatches.
  5. The contrast table is every pair’s WCAG ratio; 4.5+ shows AA. Full text-on-background checks stay on Color Converter. Color-blind view recolours the bar only (Protanopia, Deuteranopia, Tritanopia).

Harmonies, styles and limits

Hues are computed in HSL. Complementary of #3B82F6 (H ≈ 217°) sits near 37°. Pastel lowers S and raises L; vivid raises S; muted lowers S; earthy keeps mid S and lower L. Empty Generate uses #3B82F6. More than 8 colors is rejected. PDF labels stay HEX because the built-in font cannot cover every script. Nothing is uploaded; there is no account and no AI prompt box.

Where to use it

  • Brand or UI tokens: primary, accent, surface, text.
  • Checking whether two palette colors pass AA before you pick type colors.
  • Handing a PDF or a CSS :root block to a teammate.

Frequently asked questions

Is this the same as tint / shade?

No. Tint / shade mixes one HEX toward white or black. This page places several hues on the wheel.

Does lock survive Random?

Yes. Locked swatches stay; unlocked ones are replaced.

Is the color-blind view a diagnosis?

No. It is a rough RGB matrix preview, not a clinical simulation.

Related tools

Tint / shade: Tint Shade Generator. Contrast: Color Converter. 216 chart: Web Safe Colors.