Farbpaletten-Generator
Generiere harmonische Farbpaletten aus einer Basisfarbe mit komplementaren, analogen, triadischen und monochromatischen Regeln.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromaforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
Der Farbpaletten-Generator von Chromaforge nutzt das HSL-Farbrad, um praezise Harmonien aus einer einzigen Ausgangsfarbe zu berechnen. Gib deine Farbe als Hexadezimalwert, HSL oder RGB ein und wähle eine Harmonieregel.
Jede Regel erzeugt eine andere Palette basierend auf festen Winkeln auf dem Farbrad:
- Komplementar: Zwei gegenueberliegende Farben bei 180 Grad. Sehr kontrastreich, ideal für Call-to-Actions und Hervorhebungen.
- Analog: Drei benachbarte Farben (±30 Grad). Weich und harmonisch, perfekt für moderne Interfaces und Illustrationen.
- Triadisch: Drei gleichmassig verteilte Farben bei 120 Grad. Ausgewogen und lebendig, verwendet in energiegeladenen Corporate-Identitaten.
- Monochromatisch: Helligkeits- und Sattigungsvarianten derselben Farbe. Elegant und konsistent, ideal für Design Systems.
- Split-komplementar: Eine Hauptfarbe und zwei Farben neben ihrer Komplementarfarbe. Weniger abrupt als reines Komplementar.
Nach der Generierung zeigt jede Farbe ihren Hexadezimalcode sowie RGB- und HSL-Werte. Du kannst jeden Code einzeln kopieren oder alles als CSS, JSON, Tailwind oder SCSS aus dem Haupttool exportieren.
Praktische Beispiele
Situationen, in denen ein Paletten-Generator deinen Workflow beschleunigt:
- Markenidentitat: Ausgehend vom Blau des Kundenlogos (#1E40AF) generierst du eine triadische Palette für konsistente Sekundar- und Tertiarfarben.
- Landing Page: Eine analoge Palette liefert abwechselnde Sektionshintergrunde ohne aggressive visuelle Bruche.
- Token-System: Die monochromatische Palette liefert direkt die Nuancen 100-900 für deine Primarfarben-Variablen.
- Umgestaltung eines bestehenden Themes: Gib die Hauptfarbe des Themes ein und erhalte passende Akzentvorschlage.
FAQ — Farbpaletten
Wie viele Farben enthalt eine generierte Palette?
Das hängt von der gewahlten Regel ab. Komplementare und monochromatische Harmonien konnen je nach gewunschter Nuancenanzahl 2 bis 10 Farbtone erzeugen. Triadische und analoge Regeln liefern in der Regel 3 bis 6 Basisfarben. Die Nuancenanzahl lasst sich im Chromaforge-Haupttool anpassen.
Ist die generierte Palette garantiert barrièrefrei?
Nein, die Palettengenerierung basiert auf Farbharmonie, nicht auf WCAG-Kontrast. Verwende nach der Generierung den WCAG-Kontrastprüfer oder das Barrièrefreie-Palette-Tool, um die Text/Hintergrund-Kombinationen zu validieren.
Kann ich Farben ausserhalb des sRGB-Farbraums verwenden?
Chromaforge arbeitet im sRGB-Farbraum, dem Webstandard. P3- oder ProPhoto-RGB-Farben werden nicht direkt unterstutzt, aber oklch()-Werte konnen manuell in sRGB-Hexadezimal umgerechnet werden, bevor du sie eingibst.
Wann wähle ich analoge statt triadischer Palette für eine UI?
Für professionelle Interfaces empfiehlt sich die analoge Palette: Die Farben fugen sich natuerlich zusammen und reduzieren die visuelle Ermuedung. Triadische Paletten eignen sich besser, wenn sich jede Farbe klar abheben muss, wie bei Datencharts, Kategorie-Tags oder spielerischen Elementen.