Palettengenerator

Das ist ein Palettengenerator. Wählen Sie ein Basis-HEX, eine Harmonie (Komplementär, Analog, Split, Triade, Tetrade, monochrom) und einen Stil. Sperren Sie ein Feld und erzeugen Sie neu — Komplementär zu #3B82F6 behält dieses Blau.

Gesperrte Felder bleiben beim Erzeugen. 2–8 Farben. Pfeile sortieren. HEX ist editierbar.

Streifenvorschau (Farbenblindheit ändert nur diese Ansicht).

Klicken Sie einen Wert zum Kopieren

Kontrast jedes Paars. 4,5+ ist AA für Fließtext. · Kontrast für Text? Nutzen Sie Farbumwandlung

Beispiele — klicken Sie ein Feld

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.