Quick presets:
Complementary
5 colors · Click any swatch to copy HEX
Base
rgb(13, 162, 231)
hsl(199°, 89%, 48%)
Base Light
rgb(101, 200, 246)
hsl(199°, 89%, 68%)
Base Dark
rgb(8, 95, 135)
hsl(199°, 89%, 28%)
Complement
rgb(231, 82, 13)
hsl(19°, 89%, 48%)
Complement Light
rgb(246, 147, 101)
hsl(19°, 89%, 68%)
Export
:root {
--color-base: #0da2e7;
--color-base-light: #65c8f6;
--color-base-dark: #085f87;
--color-complement: #e7520d;
--color-complement-light: #f69365;
}- 7 Harmonieregeln: Erstellen Sie Paletten mit komplementären, triadischen, analogen, geteilten Komplementär-, tetradischen, monochromatischen und Tailwind-artigen Farbskalen aus jeder Samenfarbe.
- Genaue Farbberechnung: Bei allen Konvertierungen werden geeignete RGB/HSL-Algorithmen mit Berechnung des WCAG-Kontrastverhältnisses verwendet. Sehen Sie sich die relative Leuchtdichte sowie die Pass/Fail-Abzeichen für weißen und schwarzen Text auf jedem Farbfeld an.
- HEX-, RGB- und HSL-Werte: Jedes Farbfeld zeigt seine HEX-, RGB- und HSL-Werte an. Klicken Sie auf ein beliebiges Farbfeld, um den HEX-Code sofort in Ihre Zwischenablage zu kopieren.
- Als CSS, SVG oder TXT exportieren: Laden Sie Ihre Palette als benutzerdefinierte CSS-Eigenschaften, als SVG-Farbfeld oder als reine Text-HEX-Liste herunter. Perfekt für Designsysteme, Tailwind-Konfigurationen und Dokumentation.
Häufige Anwendungsfälle für den Farbpalettengenerator
- UI-Design und Prototyping: Generieren Sie harmonische Farbpaletten für Website- und App-UI-Mockups. Verwenden Sie die komplementären und analogen Regeln, um ausgewogene Schnittstellen mit der richtigen Farbhierarchie zu erstellen.
- Rückenwind-CSS- und Design-Tokens: Verwenden Sie die Regel „Schattierungen 50→900“, um vollständige Farbskalen für benutzerdefinierte Markenfarben zu generieren. Exportieren Sie CSS-Variablen und fügen Sie sie direkt in die Konfiguration Ihres Designsystems ein.
- Design-System-Erstellung: Erstellen Sie ein konsistentes Farbsystem für Ihre Design-Tokens. Generieren Sie tetradische und triadische Paletten, die zusammenarbeiten, und exportieren Sie sie dann als benutzerdefinierte CSS-Eigenschaften für die Dokumentation Ihres Designsystems.
- Markenidentität und Logos: Verwenden Sie beim Aufbau einer Markenidentität die Split-Komplementär- oder analogen Regeln, um Farben zu finden, die Ihre primäre Markenfarbe ergänzen und gleichzeitig die visuelle Harmonie bewahren.
- Präsentations- und Foliendecks: Erstellen Sie zusammenhängende Farbschemata für Präsentationen. Verwenden Sie die Monochromatik-Regel, um eine Reihe von Farbtönen und Schattierungen zu erhalten, die Ihre Folien professionell und konsistent halten.
- Datenvisualisierungen und Diagramme: Generieren Sie zugängliche Farbpaletten für Diagramme und Infografiken. Jedes Muster enthält WCAG-Kontrastabzeichen, sodass Sie die Lesbarkeit sowohl vor weißem als auch vor schwarzem Hintergrund überprüfen können.
Häufig gestellte Fragen
Der Farbpalettengenerator unterstützt sieben Harmonieregeln: Komplementär (entgegengesetzte Farben auf dem Farbkreis – hoher Kontrast), Triadisch (drei gleichmäßig verteilte Farben – ausgewogen), Analog (benachbarte Farben – harmonisch), Split-Komplementär (Grundfarbe plus zwei nahezu komplementäre Farben), Tetradisch (vier Farben in einem Rechteck – komplex), Monochromatisch (gleicher Farbton bei unterschiedlichen Helligkeitsstufen) und Farbtöne 50→900 (zehnstufige Farbskala im Tailwind-Stil).
Klicken Sie einfach auf eine beliebige Musterkarte, um deren HEX-Code in Ihre Zwischenablage zu kopieren. Zur Bestätigung des Kopiervorgangs erscheint kurz ein Häkchensymbol. Jedes Farbfeld zeigt auch RGB- und HSL-Werte an, sodass Sie sie in jedem Design-Tool oder Code-Editor verwenden können. Verwenden Sie für den Massenexport die Downloadoptionen „CSS-Variablen“, „SVG“ oder „TXT“ im Abschnitt „Exportieren“.
Jedes Muster zeigt zwei Abzeichen – eines für weißen Text (⬜) und eines für schwarzen Text (⬛). Grüne Abzeichen zeigen an, dass die Farbe die WCAG-Kontrastanforderungen erfüllt; Rot zeigt an, dass es fehlschlägt. Die angezeigten Stufen sind AA Large (3:1), AA (4,5:1) und AAA (7:1). So können Sie schnell beurteilen, ob eine Farbe als Hintergrund für Text lesbar ist.
Ja! Wählen Sie die Harmonieregel „Farbtöne 50→900“, um eine zehnstufige Farbskala (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) zu generieren – das gleiche Muster, das von Tailwind CSS verwendet wird. Die Grundfarbe wird zum Farbton 500, wobei hellere und dunklere Varianten automatisch generiert werden. Exportieren Sie die CSS-Variablen, um sie direkt in Ihrer tailwind.config.js zu verwenden.
Sie können Ihre Palette in drei Formaten exportieren: CSS-Variablen (benutzerdefinierte Eigenschaften als :root { ... }), SVG Swatch Sheet (ein visuelles Raster aus Farbfeldern mit Hex-Beschriftungen) und Plain Text (Liste von Namen:Hex-Paaren). Verwenden Sie die Schaltfläche „CSS kopieren“ oder die Schaltfläche „Herunterladen“ für CSS-, SVG- oder TXT-Dateien.
Alle Farbkonvertierungen verwenden Standardalgorithmen für die RGB↔HSL-Konvertierung mit der richtigen Darstellung von Farbton (0–360°), Sättigung (0–100 %) und Helligkeit (0–100 %). Kontrastverhältnisse werden mithilfe der relativen Luminanzformel WCAG 2.1 berechnet, die die nichtlineare Gammakorrektur von Anzeigegeräten berücksichtigt. Dies gewährleistet genaue und zuverlässige Farbinformationen.
Ja, der Farbpalettengenerator ist völlig kostenlos und erfordert keine Anmeldung. Es gibt keine versteckten Gebühren, keine Premium-Funktionen und keine Begrenzung, wie viele Paletten Sie erstellen können. Da alles lokal in Ihrem Browser läuft, fallen keine Serverkosten oder API-Limits an.
Nach dem ersten Laden der Seite funktioniert der Farbpalettengenerator vollständig offline. Alle Farbberechnungs-, Farbfeld-Rendering- und Exportfunktionen laufen in Ihrem Browser ohne Serveranfragen. Dies macht es zu einem zuverlässigen Werkzeug für Designer und Entwickler, die in Umgebungen mit eingeschränkter oder keiner Internetverbindung arbeiten.