Farb-Palette-Generator 2026

So funktioniert der Farb-Palette-Generator

Der Generator wandelt Ihre HEX-Basisfarbe in den HSL-Farbraum (Hue, Saturation, Lightness) um. Im HSL-Modell ist der Farbton ein Winkel von 0–360°. Durch gezieltes Verschieben dieses Winkels entstehen die klassischen Farbschemata: komplementär bei +180°, triadisch bei +120° und +240°, tetradisch in 90°-Schritten. Sättigung und Helligkeit werden je nach Schema dezent variiert, damit eine ausgewogene Palette entsteht – nicht nur knallige Vollfarben.

Anschließend wird das Ergebnis in HEX zurückgewandelt – das in CSS, HTML, Figma und Adobe-Programmen universell akzeptierte Format. Der ganze Vorgang dauert Millisekunden und passiert ausschließlich im Browser. Keine Library, kein Server, keine Daten-Pixel – nur reine JavaScript-Mathematik.

Standard und Spezifikation

HEX-Farben sind in CSS Color Module Level 4 standardisiert (W3C). Die Notation #RRGGBB ist seit den frühen Browser-Tagen Standard und wird universell unterstützt. HSL als alternative Schreibweise ist seit CSS3 fest verankert und wird von allen modernen Browsern verstanden – inklusive der Erweiterung für Alpha-Kanäle (HSLA).

Die Umrechnung zwischen HEX, RGB und HSL folgt mathematischen Standardformeln. Wir verwenden die in der MDN-Dokumentation und in zahllosen Open-Source-Bibliotheken eingesetzten Algorithmen – sie liefern reproduzierbare, exakte Ergebnisse.

Anwendungsfälle

Webdesign: Generieren Sie aus Ihrer Markenfarbe eine vollständige UI-Palette für Buttons, Links, Hover-States und Hintergründe.
Branding: Logo-Designer nutzen komplementäre Schemata für Marken, die auffallen sollen, und analoge Schemata für ruhige, vertrauenswürdige Marken.
Datenvisualisierung: Triadische und tetradische Paletten eignen sich für Diagramme, weil sie maximal unterscheidbare Farben liefern.
Print: HEX-Werte lassen sich in Adobe-Programmen direkt verwenden und nach CMYK umrechnen.

Datenschutz: Client-Side

Der gesamte Generator läuft als JavaScript im Browser. Ihre Eingaben verlassen nie Ihren Rechner – es gibt keinen Server, der HEX-Werte verarbeitet, keine Logs, keine Cookies, die mit Ihrer Auswahl verknüpft sind. Auch die Zwischenablage wird über die native Browser-API angesprochen, ohne Umweg.

Damit erfüllt das Tool ohne Zusatzaufwand die Anforderungen der DSGVO an datensparsame Verarbeitung – es findet schlicht keine Verarbeitung personenbezogener Daten statt.

Typische Fehler bei Farbpaletten

Zu viele Farben: Mehr als 5 Hauptfarben überfordern Nutzer und schwächen die Wiedererkennung.
Kein Kontrast-Check: Schöne Paletten sind oft nicht WCAG-konform. Immer Text/Hintergrund-Kombinationen prüfen.
Reine Vollfarben: 100 % Sättigung wirkt schreiend. Profis dimmen auf 60–80 %.
Identische Helligkeit: Wenn alle Farben dieselbe L-Stufe haben, fehlt visuelle Hierarchie. Variieren Sie L-Werte.
Komplementär ohne Neutral: Kontrastreiche Schemata brauchen eine ruhige neutrale Basis (Grau, Beige), sonst wirken sie chaotisch.

Häufige Fragen

Eine Farbpalette ist eine fest definierte Auswahl harmonischer Farben für ein Design – Webseite, App, Logo oder Druckprodukt. Sie sorgt für visuelle Konsistenz, Wiedererkennung und ein professionelles Erscheinungsbild. Statt willkürlich Farben zu wählen, basieren Paletten auf Farbtheorie: komplementäre, triadische oder analoge Beziehungen im HSL-Farbkreis. Eine gute Palette enthält 3–5 Hauptfarben plus neutrale Töne.

Monochromatisch nutzt eine Farbe in verschiedenen Helligkeiten – wirkt elegant und ruhig. Komplementär (gegenüberliegende Farben im Kreis) erzeugt starken Kontrast und Aufmerksamkeit. Triadisch (3 Farben im 120°-Abstand) ist lebendig und ausgewogen. Tetradisch (4 Farben) bietet maximale Vielfalt, ist aber schwerer zu balancieren. Analog (benachbarte Farben) wirkt natürlich und harmonisch – ideal für Naturthemen.

Der Generator wandelt die HEX-Basisfarbe ins HSL-Modell um (Hue, Saturation, Lightness). Im HSL-Raum werden mathematisch die Hue-Werte verschoben – etwa +180° für komplementär oder +120°/+240° für triadisch. Anschließend werden die Werte zurück nach HEX konvertiert. Alle Berechnungen laufen vollständig im Browser, es werden keine Daten an einen Server übertragen.

HSL steht für Hue (Farbton 0–360°), Saturation (Sättigung 0–100 %) und Lightness (Helligkeit 0–100 %). Anders als RGB orientiert sich HSL an der menschlichen Wahrnehmung – ideal für Designentscheidungen. Eine Farbe wird einfach heller, wenn man L erhöht, oder gedämpfter, wenn man S senkt. Der CSS-Standard unterstützt HSL nativ via hsl(220, 90%, 56%).

Im Webdesign haben sich 5 Farben bewährt: eine Primärfarbe (Hauptmarke), eine Sekundärfarbe (Akzent), eine Komplementärfarbe (CTAs), plus zwei neutrale Töne (Text, Hintergrund). Material Design und Tailwind nutzen 9–10 Abstufungen pro Farbton (50–900) für UI-Hierarchie. Für Marketing-Material reichen oft 3 Farben – weniger ist mehr.

Nein, harmonische Farben sind nicht automatisch WCAG-konform. Für Text auf farbigem Hintergrund braucht es einen Kontrastwert von mindestens 4,5:1 (AA) oder 7:1 (AAA). Prüfen Sie kritische Kombinationen mit unserem Kontrast-Prüfer. Faustregel: dunkler Text auf hellem Hintergrund (Lightness ≥ 90 %) oder weißer Text auf dunklem (Lightness ≤ 30 %) funktioniert meist.

Ja, kopieren Sie die HEX-Werte und tragen Sie sie in :root als CSS Custom Properties ein, etwa --color-primary: #3b82f6;. Alternativ als Tailwind-Theme-Erweiterung in tailwind.config.js unter theme.extend.colors. Auch SCSS-Variablen, Sketch-Paletten und Figma-Styles akzeptieren HEX direkt – ein universelles Format.

HEX ist eine kompakte hexadezimale Schreibweise für RGB-Werte: #FF0000 entspricht rgb(255, 0, 0). HEX ist kürzer und in CSS, HTML und Grafikprogrammen Standard. RGB erlaubt zusätzlich einen Alpha-Kanal (rgba), HEX seit CSS Color Module 4 ebenfalls (#FF0000FF). Beide beschreiben exakt dieselben Farben – nur die Notation unterscheidet sich.

Verbreitet sind Adobe Color, Coolors, Paletton und Figma-Plugins wie ColorBox. Profis arbeiten mit Design Tokens (Style Dictionary, Tokens Studio), die Paletten zentral verwalten und über Plattformen synchronisieren. Unser Generator deckt die Kernfunktion – mathematisch korrekte Schemata aus einer Basisfarbe – ab und liefert sofort kopierbare HEX-Codes.