Farbpaletten-Generator

Farbpaletten- und Farbschema-Generator für Entwickler

Nutzen Sie diesen Farbpaletten-Generator, um eine deckende Grundfarbe in ein deterministisches Set für Benutzeroberflächen, Websites, Dashboards und Design-Systeme zu verwandeln. Dasselbe Tool funktioniert als Farbpaletten-Generator oder Farbschema-Generator, mit kopierbaren Vordergrund-Empfehlungen und entwicklerfertiger Ausgabe anstelle einer rein dekorativen Inspirationsquelle.

So erstellen Sie eine Farbpalette

1. Geben Sie eine deckende Grundfarbe als HEX-, RGB- oder HSL-Wert ein oder wählen Sie eine mit dem nativen Farbwähler aus.
2. Wählen Sie eine Harmonie aus und generieren Sie eine Farbpalette mit 3, 5, 6, 10 oder 12 Farben.
3. Überprüfen Sie die vorgeschlagenen Textfarben und die Komponenten-Vorschau, dann kopieren oder laden Sie CSS, Tailwind-kompatible Werte oder Design-Tokens herunter.

Monochromatische, analoge, komplementäre, gespalten-komplementäre und triadische Harmonie

Die Farbharmonie definiert die anfänglichen Beziehungen der Farbtöne. Monochromatisch behält einen Farbton bei, analog dreht um 30 Grad in jede Richtung, komplementär verwendet den gegenüberliegenden Farbton, gespalten-komplementär verwendet Drehungen um 150 und 210 Grad und triadisch verwendet 120 und 240 Grad. Neutrale Farben können diese Drehungen aufheben, da die Änderung des Farbtons einer Farbe mit Sättigung null keinen anderen HEX-Wert erzeugt.

Ein Generator für Farbpaletten mit 3, 5, 6, 10 und 12 Farben

Die Größenauswahl erstellt kompakte 3-Farben-Paletten, gängige 5-Farben-Paletten oder 6-Farben-Paletten-Sets und größere 10- oder 12-Farben-Systeme, ohne separate, schlanke Seiten zu veröffentlichen. Jede Größe ist ein stabiles Präfix derselben deterministischen Zwölf-Farben-Sequenz, sodass beim Vergrößern die bereits überprüften Farben erhalten bleiben.

Deterministische Tönungen und Schattierungen für Website-Farbschemata

Nach den Harmonie-Ankern mischt der Generator für Tönungen und Schattierungen jeden Anker in begrenzten sRGB-Schritten in Richtung Weiß und Schwarz. Dies unterstützt Website-Farbpaletten, Web-Farbschemata, Website-Theme-Farbschemata und die Arbeit mit Dashboard-Farbpaletten, ohne eine wahrnehmungsgleichmäßige Skala zu beanspruchen.

CSS-Variablen, Tailwind-Palettenwerte und Design-Tokens

Kopieren Sie CSS Custom Properties, ein Tailwind-kompatibles Farbobjekt oder JSON-Tokens im DTCG-Stil. Jeder Export enthält die Palettenfarbe und ihre ausgewählte schwarze oder weiße Textfarbe, was das Ergebnis als CSS-Farbpalette, Tailwind-Farbgenerator, Tailwind-Farbpalette oder fokussierter Design-Token-Generator nutzbar macht.

Vorschau einer Website- oder Dashboard-Farbpalette

Die Komponentenszene weist den generierten Farben illustrative Rollen für Oberfläche, Text, Rahmen, primäre Aktion, sekundäre Aktion und Status zu. Es handelt sich um eine schnelle Implementierungsvorschau für eine Website-Farbpalette, nicht um einen Beweis, dass jede reale Komponente, jeder Interaktionszustand, jedes Icon, jedes Diagramm, jeder Farbverlauf oder jede benachbarte Farbkombination die Barrierefreiheitsanforderungen erfüllt.

Anleitung für barrierefreie Textfarben und ehrliche Grenzen

Für jedes opake Farbfeld vergleicht das Tool Schwarz und Weiß und empfiehlt jeweils die Farbe mit dem höheren Kontrastverhältnis bei voller Präzision. Es zeigt das Verhältnis und das WCAG-AA-Ergebnis für normalen Text an. Dies ist nur eine Empfehlung für den Vordergrund: Der Generator testet nicht jedes Paar in der Palette, die semantische Bedeutung, den Nicht-Text-Kontrast, Fokus-Zustände oder die Farbunterscheidbarkeit und ist somit kein Prüfwerkzeug für Farbsehschwächen. Überprüfen Sie jedes Textpaar im Farbkontrast-Prüfer und verfeinern Sie ein einzelnes Farbfeld im Farbauswähler.

Private Palettenerstellung und explizites Speichern

Erstellung, Vorschauen, Kontrastberechnungen und Exporte finden in diesem Browser statt. Nichts wird gespeichert, bis Sie Speichern wählen, und ein erkannter Snapshot wird niemals ohne Wiederherstellen angewendet. Genaue Farben, Paletten, Verhältnisse, generierte Dateien, der gespeicherte Zustand und Share-Query-Werte sind von der Analyse ausgeschlossen.

Häufig gestellte Fragen

Wie erstelle ich aus einer Farbe eine Farbpalette?

Geben Sie eine deckende Grundfarbe ein, wählen Sie eine Harmonie und Größe aus und generieren Sie die Palette. Sie können auch ein beliebiges Farbfeld aus dem Ergebnis als nächste Grundfarbe auswählen und das Schema weiter verfeinern.

Welche Farbharmonie sollte ich verwenden?

Monochromatisch bleibt am nächsten an einem Farbton, analog erzeugt benachbarte Farbtöne, komplementär erzeugt ein gegensätzliches Paar, gespalten-komplementär erweitert dieses Paar und triadisch verteilt drei Ankerpunkte um den Farbkreis. Die beste Wahl hängt von den Rollen und dem Inhalt der tatsächlichen Benutzeroberfläche ab.

Sind die Aufhellungen und Abdunklungen wahrnehmungsgleichmäßig?

Nein. Es handelt sich um deterministische, begrenzte sRGB-Mischungen in Richtung Weiß und Schwarz. Der Generator erhebt keinen Anspruch auf OKLCH-Abstände oder Wahrnehmungsgleichmäßigkeit.

Sind die vorgeschlagenen Textfarben barrierefrei?

Der angezeigte Vorschlag für Schwarz oder Weiß ist die kontrastreichere Wahl für das jeweilige Farbfeld und beinhaltet dessen AA-Ergebnis für normalen Text. Sie müssen dennoch die tatsächliche Typografie, Komponentenzustände, Abgrenzungen, Icons und gerenderten Kombinationen testen.

Erstellt dies eine farbenblindenfreundliche Palette?

Nicht von allein. Diese Version simuliert keine Farbsehschwächen oder testet, ob jede Palettenfarbe unterscheidbar bleibt. Verwenden Sie das generierte Schema als Ausgangspunkt und überprüfen Sie es mit dedizierter Simulation und Tests an der realen Benutzeroberfläche.

Wird meine Palette automatisch hochgeladen oder gespeichert?

Nein. Die Generierung bleibt lokal, es wird nichts gespeichert, bevor Sie Speichern wählen, und der Freigabestatus erscheint erst dann in einem Link, wenn Sie diesen explizit kopieren.