Den Farbwähler verwenden
Mit diesem Farbwähler wählst du Farben visuell aus, gibst Werte direkt ein, nimmst Farben aus einem Bild auf oder erkundest Paletten über das Farbrad. Die aktuelle Farbe wird in Hex, RGB, HSL, HSV und OKLCH umgerechnet, damit sie in CSS, Design-Tools und exportiertem Code nutzbar ist.
Den Hex-Farbwähler verwenden
Du kannst den Auswahlpunkt ziehen, Kanalwerte bearbeiten oder einen Hex-Code eingeben. Wenn sich die Farbe ändert, aktualisieren sich Farbfelder, Harmonien, Variationen, Kontrastvorschauen und Exportierenbereiche aus demselben Wert.
Wie viele Hex-Farben gibt es?
Eine Hex-Farbe nutzt sechs hexadezimale Zeichen im Format #RRGGBB. Jedes Paar steuert Rot, Grün oder Blau von 00 bis FF. So entstehen 16,777,216 mögliche RGB-Farben.
Bild-Farbwähler
Der Bild-Farbwähler kann Farben direkt aus einem hochgeladenen Bild aufnehmen. Bewege einen Messpunkt über das Bild, um Farben zu erfassen, Werte zu vergleichen und ausgewählte Bildfarben zu exportieren.
Farbrad
Das Farbrad ist hilfreich, wenn du nach Farbton arbeitest. Ziehe am äußeren Ring, um den Farbton zu ändern, und verfeinere im inneren Bereich Sättigung und Helligkeit, während die Oberfläche synchron bleibt.
Schattierungen, Aufhellungen und Töne
Schattierungen mischen die Farbe mit Schwarz, Aufhellungen mit Weiß und Töne bewegen sie in Richtung Grau. Diese Varianten eignen sich für Hover-Zustände, Rahmen, Hintergründe, deaktivierte Zustände und UI-Flächen.
Farbharmonien
Harmoniepaletten entstehen aus Beziehungen im Farbrad. Analoge, komplementäre, geteilte komplementäre, triadische, tetradische und quadratische Kombinationen liefern schnelle Startpunkte für Markenfarben, UI-Akzente, Datenfarben und Illustrationen.
Farbräume
RGB beschreibt Bildschirmfarben über rotes, grünes und blaues Licht. HSL trennt Farbton, Sättigung und Helligkeit und lässt sich intuitiv anpassen. HSV ist in visuellen Wählern verbreitet, OKLCH unterstützt gleichmäßigere moderne CSS-Paletten.
Hex-Codes
Hex-Codes sind kompakt, leicht zu kopieren und breit in Browsern sowie Design-Tools unterstützt. Da Hex und RGB dieselben Kanäle beschreiben, kann man sie ohne sichtbare Farbänderung umrechnen.
Farbcodes exportieren
Exportierenbereiche sammeln die sichtbare Palette als Tailwind-Werte, Figma-Objekte, CSS-Variablen, präfixierte Farbfunktionen oder einfache Codelisten. Klicke ein Feld zum Kopieren oder nutze Exportieren für die ganze Gruppe.
WCAG und Barrierefreiheit
Lesbare Farbkombinationen hängen vom Kontrast ab. Der Kontrastprüfer vergleicht die gewählte Farbe auf hellen und dunklen Hintergründen, damit Text, Rahmen und Flächen zugänglich bleiben.
Farbenblindheits-Simulator
Der Simulator zeigt, wie sich die aktuelle Farbe bei häufigen Farbsehschwächen verändern kann. Er hilft, Paletten zu vermeiden, die nur auf Farbtonunterschieden beruhen, und fördert stärkeren Kontrast, Labels und zusätzliche Hinweise.
Helle und dunkle Themes
Schattierungen, Aufhellungen, Töne und Harmonien können die Basis für helle und dunkle Themes bilden. Beginne mit einer Farbe, prüfe die Varianten und exportiere Werte für Hintergründe, Vordergrund, Buttons und Akzentzustände.
Das Farbrad verwenden
Das Farbrad zeigt visuell, wie Farben zueinander stehen. Es ordnet Farbtöne im Kreis an und erleichtert die Wahl einer Basisfarbe, den Vergleich naher Farben und den Aufbau ausgewogener Paletten.
Was ist ein Farbrad?
Ein Farbrad platziert Rot, Orange, Gelb, Grün, Blau und Violett auf einem Kreis. Nahe Farben wirken meist verwandt und weich, gegenüberliegende Farben erzeugen stärkeren Kontrast und mehr Energie.
So verwendest du dieses Farbrad
Ziehe im Rad, um einen Farbton zu wählen, und passe danach im Wähler Sättigung und Helligkeit an. Die aktuelle Farbe aktualisiert Hex, RGB, HSL, HSV, OKLCH, die obere Palette, Harmoniefelder und Exportierenbereiche.
Primärfarben
Primärfarben sind Ausgangspunkte vieler Farbsysteme. In traditioneller Kunsttheorie sind es Rot, Gelb und Blau. Auf Bildschirmen nutzt RGB rotes, grünes und blaues Licht für Websites, Apps und digitale Design-Tools.
Sekundärfarben
Sekundärfarben entstehen durch das Mischen zweier Primärfarben. Im traditionellen Rad liegen Orange, Grün und Violett zwischen den Primärfarben und verbinden warme, kühle und neutrale Paletten.
Tertiärfarben
Tertiärfarben liegen zwischen Primär- und Sekundärfarben. Dazu gehören Gelb-Orange, Rot-Orange, Rot-Violett, Blau-Violett, Blau-Grün und Gelb-Grün und geben Paletten mehr Nuance.
Warme und kühle Farben
Warme Farben wie Rot, Orange und Gelb wirken oft aktiv, hell und aufmerksamkeitsstark. Kühle Farben wie Blau, Grün und Violett wirken ruhiger und weiter. Eine starke Palette nutzt oft eine Temperatur als Basis und die andere als Akzent.
Komplementärfarben
Komplementärfarben liegen sich im Rad gegenüber. Sie erzeugen hohen Kontrast und eignen sich für Buttons, Hervorhebungen, Badges und Elemente, die sich abheben sollen.
Analoge Farben
Analoge Paletten nutzen benachbarte Farben im Rad. Weil die Farbtöne nahe beieinanderliegen, wirkt das Ergebnis meist weich, natürlich und leichter kontrollierbar für Hintergründe, Karten, Diagramme und Illustrationen.
Triadische Farben
Triadische Paletten verwenden drei gleichmäßig verteilte Farbtöne. Sie können lebendig und ausgewogen wirken, wenn eine Farbe führt und die anderen sparsam als Akzente dienen.
Geteilte Komplementärfarben
Eine geteilte Komplementärpalette beginnt mit einer Basisfarbe und nutzt die zwei Farben neben ihrem direkten Komplement. Sie bietet starken Kontrast, aber einen weicheren und flexibleren Bereich.
Tetradische und quadratische Farben
Tetradische und quadratische Paletten nutzen vier Farben im Rad. Sie sind nützlich für mehrere Akzente, funktionieren aber am besten, wenn eine Farbe dominiert und der Rest über Aufhellungen oder Schattierungen ausbalanciert wird.
Schattierungen, Aufhellungen und Töne
Nach der Farbtonbeziehung machen Schattierungen, Aufhellungen und Töne die Palette praktisch. Helle Aufhellungen können Hintergründe werden, dunkle Schattierungen Text oder Rahmen und gedämpfte Töne sekundäre UI-Zustände.
Ein Farbschema aufbauen
Beginne mit der Hauptfarbe, wähle eine Harmonie und teste das Ergebnis an echten UI-Anforderungen. Ein vollständiges Schema enthält meist Primärfarbe, ein oder zwei Akzente, neutrale Flächen, lesbaren Text und kontrastsichere Zustände.
Farbrad-Farben exportieren
Wenn die Palette passt, exportiere sie als CSS-Variablen, Tailwind-Werte, Figma-Objekte, präfixierte Farbfunktionen oder einfache Codelisten. Jede sichtbare Farbe kann auch direkt kopiert werden.
Barrierefreiheit und Kontrast
Farbharmonie garantiert keine Lesbarkeit. Prüfe Kontrast für Text und wichtige Bedienelemente, verlasse dich nicht nur auf Farbe und nutze den Simulator für häufige Farbsehbedingungen.