Farben und Barrierefreiheit
Eine HEX-Grundfarbe eingeben, Farbharmonien vergleichen und den Kontrast weißer Schrift prüfen.
Alle Berechnungen bleiben in diesem Browser-Tab; Farben werden nicht hochgeladen.
5 von 5 Farben sichtbar
Das Markenblau steht fest, aber für Flächen, Ränder und Akzente fehlen abgestimmte Werte. Ein Farbpaletten-Generator hält die Grundfarbe fest und zeigt, wie sich analoge, komplementäre und triadische Regeln auswirken. Wer eine Farbpalette erstellen möchte, erhält nachvollziehbare Vorschläge statt einer zufälligen Behauptung über den schönsten Farbton.
Dieser Farbpaletten-Generator ergänzt die Farbharmonie um neun helle bis dunkle Stufen, eine Mischung mit einer zweiten Farbe und einen gemessenen Kontrast zu weißer Schrift. Als Farbschema Generator verbindet er die Auswahl mit dem Ergebnis: Die CSS-Variablen enthalten die aktuell sichtbaren Palettenfarben sowie die Stufen und den Mischton.
Harmonische Farbtöne und lesbarer Text sind zwei verschiedene Prüfungen.
Aus demselben HEX-Wert entstehen benachbarte analoge Töne, die gegenüberliegende Komplementärfarbe oder eine Triade. Der Farbpaletten-Generator würfelt Ihre Markenfarbe dabei nicht neu aus. Auch die neun Abstufungen bleiben an derselben Basis, sodass sich die Regeln direkt vergleichen lassen.
Jedes Farbfeld zeigt den berechneten Kontrast zu weißer Schrift. Der Filter blendet Kandidaten unter 4,5:1 aus und nimmt sie auch aus dem CSS-Export. Komplementärfarben können auf dem Farbkreis weit auseinanderliegen und trotzdem als Texthintergrund ungeeignet sein.
Drei oder sechs HEX-Ziffern und der Farbwähler werden unterstützt. Das Beispiel startet mit #3B82F6; nach kurzer Eingabepause wird automatisch neu gerechnet. Für mehrere Änderungen schalten Sie die Automatik ab und starten mit Strg beziehungsweise Cmd plus Enter.
Analog ist als ruhiger Ausgangspunkt voreingestellt. Komplementär, Triade und die übrigen Regeln ändern die Winkel und teils auch die Zahl der Farbfelder. Der separate Regler mischt die zweite Farbe mit anfänglich 50 Prozent; RGB und HSL können unterschiedliche Zwischentöne ergeben.
Lesen Sie das Verhältnis für weiße Schrift und die Zahl sichtbarer Farbfelder. Der AA-Filter kann null Kandidaten lassen, verändert aber keinen HEX-Wert. Einzelne Farben lassen sich kopieren; der CSS-Block enthält sichtbare Palette, alle neun Stufen und den Mischton.
Analog, komplementär, triadisch, geteilt komplementär, tetradisch und monochrom bestimmen feste Positionen auf dem HSL-Farbkreis. Die eingegebene Grundfarbe bleibt dabei erhalten.
Vier hellere Töne, die exakte Grundfarbe und vier dunklere Töne helfen bei Flächen, Rahmen, Hover-Zuständen und Text. Die Stufen entstehen durch digitale RGB-Mischung mit Weiß oder Schwarz.
Zwischen 0 und 100 Prozent legen Sie den Anteil der zweiten Farbe fest. RGB interpoliert Kanäle; HSL nimmt den kürzeren Weg um den Farbtonkreis. Das Ergebnis ist ein Bildschirm-HEX, keine Simulation von Druckfarbe.
Die WCAG-Berechnung nutzt die relative Leuchtdichte der fertigen sRGB-Werte. Unter 4,5:1 liegende Farbfelder werden auf Wunsch verborgen; ohne Filter bleiben sie zur Prüfung sichtbar.
Kopieren oder laden Sie einen :root-Block herunter. Er enthält sichtbare Palettenfarben, alle Farbskalenstufen und den Mischton, nicht die durch den Filter entfernten Kandidaten.
Komplementäre Farbtöne liegen gegenüber, analoge liegen nahe beieinander und triadische verteilen sich in drei Richtungen. Das sagt etwas über den Farbton, nicht automatisch über den Helligkeitskontrast von Schrift aus.
Ja. Kopieren oder laden Sie den :root-Block mit CSS-Variablen herunter. Enthalten sind die sichtbare Palette, neun Abstufungen und die Mischung. Einen Tailwind-Export bietet diese Seite nicht.
Die Zahl folgt der gewählten Regel: Komplementär liefert zwei, Triade drei, Tetrade vier und Analog fünf Farbfelder. Eine beliebige Anzahl wäre bei diesen festen geometrischen Beziehungen irreführend; die neunstufige Skala ist separat.
Sie können die CSS-Datei speichern oder die Werte kopieren. Ein teilbarer Link und ein gespeicherter Palettenverlauf gehören nicht zu diesem Werkzeug; nach dem Schließen müssen Sie die gewünschten Werte selbst aufbewahren.
Ja. Zu jedem Farbton erscheint das Verhältnis für weiße Schrift samt AA-Markierung. Für schwarzen Text oder andere Hintergrundbedingungen brauchen Sie eine eigene Prüfung; eine ganze Website wird hier nicht zertifiziert.
Eine Frage zur Farbwahl ist offen?
Der Farbpaletten-Generator zeigt die Regel, den Weißtext-Kontrast und die CSS-Variablen gemeinsam, bevor Sie die Werte ins Projekt übernehmen.