Palette generieren

Verwenden Sie eine Basisfarbe und passen Sie an, wie stark sich die Palette in Farbton, Sättigung und Helligkeit verändert. Der Generator begrenzt die Werte sicher, springt bei 360 Grad im Farbkreis um und rundet Exportwerte ab.

Basisfarbe

Geben Sie einen 3- oder 6-stelligen Hex-Farbcode ein, wie #C96C3D oder #f80.

Harmonie-Schema Verschiedene Schemata ändern die Abstände im Farbton, während der Variationsregler die Intensität bestimmt.

Palettengröße Für die Genauigkeit der Harmonie wiederholen einige Schemata Intervalle, wenn Sie mehr Farben anfordern.

Variationsspanne

48%

Eine geringe Spanne bleibt näher am Basiston. Eine höhere Spanne verstärkt helle und dunkle Akzente.

Palette bereit.

Ergebnisse

Der Vorschaustreifen zeigt die Palette als Sequenz. Jedes Farbfeld enthält eine Kontrastempfehlung für Text auf dieser Farbe.

Exportieren

Wählen Sie ein Format zwischen CSS Custom Properties und JSON. Kopieraktionen sind nur deaktiviert, wenn die Clipboard-API nicht verfügbar ist.

HEX RGB HSL CSS JSON

Export-Format

So funktioniert es

Der Generator konvertiert den Basis-Hex-Code in HSL, wendet Hue-Intervalle basierend auf der Harmonie-Regel an und passt Sättigung sowie Helligkeit an.

1. Eingabebereinigung

Hex-Eingaben werden normalisiert und bei Bedarf erweitert. Ungültige Einträge blockieren die Seite nicht; die letzte gültige Palette bleibt sichtbar.

2. Paletten-Berechnung

Farbtonwerte rotieren auf dem Farbkreis. Sättigung und Helligkeit werden zwischen 0 und 100 begrenzt, um gültige Ausgaben zu garantieren.

3. Produktionsfertiger Export

Exporte enthalten Benennungen, gerundete Werte und eine stabile Sortierung, ideal für Design Tokens oder Stylesheets.

Farben können auf verschiedenen Bildschirmen und Browsern variieren. Nutzen Sie dieses Tool als Ausgangspunkt und prüfen Sie die Ergebnisse im Zielmedium.