HEX-Farbpaletten-Generator
Starten Sie mit einer HEX-Farbe und generieren Sie eine komplette Palette mit Tonabstufungen, Harmoniefarben, semantischen Token und kopierfertigen CSS-Variablen.
Schnell-Vorlagen
Basisfarbe (HEX)
#2563EB
Harmoniefarben
Primary
Hauptmarken- und CTA-Farbe
#2563EBSecondary
Sekundäre Markenfarbe
#6C59D5Accent
Hoher Kontrast-Akzent
#E3AA2DBackground
Hintergrundton der Seite
#F7F7F8Surface
Karten und Oberflächencontainer
#E8E9EEText
Standard-Textfarbe
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}So erstellen Sie ein vollständiges Farbsystem aus einem HEX-Code
Dieses Tool verwandelt eine Basis-HEX-Farbe in Echtzeit in eine strukturierte Palette. Sie können einen HEX-Wert manuell eingeben, aus der Farbauswahl wählen oder eine Zufallsfarbe generieren, um neue Richtungen zu erkunden. Sofort sehen Sie eine vollständige Palettenübersicht mit Harmoniefarben, Tonabstufungen, semantischen Token und kopierfertigen CSS-Variablen.
Schritt 1: Basisfarbe eingeben oder auswählen
HEX-Farbcode direkt eingeben, eine Farbe aus der Farbauswahl wählen oder auf "Zufallsfarbe" klicken, um automatisch eine zu generieren.
Schritt 2: Palettenübersicht ansehen
Basisfarbe zusammen mit automatisch generierten Harmoniefarben sehen, die Ihr Design ergänzen und erweitern.
Schritt 3: Tonabstufung & semantische Token erkunden
Tonabstufung (50-900) mit hellen bis dunklen Schattierungen prüfen, ideal für Hintergründe, Rahmen, Zustände und Textkontrast. Semantische Token werden ebenfalls für praktische UI-Nutzung generiert.
Schritt 4: CSS-Variablen oder Token kopieren
Generierte CSS-Variablen oder semantische Rollen mit einem Klick kopieren und direkt in das Stylesheet einfügen.
Strukturierte Farbpaletten für echte Projekte
Dieser HEX-Farbpaletten-Generator geht über einfache Farbfelder hinaus. Er erstellt strukturierte, systembereite Paletten, die sofort in Produkt-Interfaces, Design-Systemen und Branding-Workflows verwendet werden können.
Harmonie-basierte Farbgenerierung
Automatisch komplementäre Harmoniefarben generieren, die visuelle Balance und Kontrast wahren.
Tonabstufung (50-900)
Hell-zu-dunkel-Schattierungen, optimiert für UI-Ebenen, Zustände, Hintergründe und lesbaren Textkontrast.
Semantische Token für UI-Konsistenz
Vordefinierte Rollen helfen, konsistente Nutzung über primäre Aktionen, Erfolgszustände, Warnungen und neutrale Elemente hinweg zu wahren.
Kopierfertige CSS-Variablen
Gesamte Palette als CSS-Variablen mit einem Klick exportieren — bereit zur Implementierung im Stylesheet.