Farbkonvertierung
#ca4e4e
≈ Chestnut Rose
Variationen
Der Zweck dieses Abschnitts besteht darin, Tönungen (reines Weiß hinzugefügt) und Schattierungen (reines Schwarz hinzugefügt) deiner ausgewählten Farbe in 10%-Schritten genau zu erzeugen.
Profi-Tipp: Verwende Schattierungen für Hover-Zustände und Schatten, Tönungen für Highlights und Hintergründe.
Schattierungen
Dunklere Variationen, die durch Hinzufügen von Schwarz zu deiner Grundfarbe erstellt werden.
Aufhellungen
Hellere Variationen, die durch Hinzufügen von Weiß zu deiner Grundfarbe erstellt werden.
Häufige Anwendungsfälle
- • UI-Komponentenzustände (Hover, Aktiv, Deaktiviert)
- • Tiefe mit Schatten und Highlights erstellen
- • Konsistente Farbsysteme aufbauen
Design-System Tipp
Diese Variationen bilden die Grundlage einer zusammenhängenden Farbpalette. Exportiere sie, um Konsistenz in deinem gesamten Projekt zu gewährleisten.
Farbkombinationen
Jede Harmonie hat ihre eigene Stimmung. Verwende Harmonien, um Farbkombinationen zu entwickeln, die gut zusammen funktionieren.
Anwendung
Klicke auf eine Farbe, um ihren Hex-Wert zu kopieren. Diese Kombinationen sind mathematisch bewährt für visuelle Harmonie.
Warum es wichtig ist
Farbharmonien schaffen Balance und wecken spezifische Emotionen in deinen Designs.
Komplement
Eine Farbe und ihr Gegenteil auf dem Farbkreis, +180 Grad des Farbtons. Hoher Kontrast.
Split-komplementär
Eine Farbe und zwei neben ihrem Komplement, +/-30 Grad Farbton vom Wert gegenüber der Hauptfarbe. Kräftig wie ein gerades Komplement, aber vielseitiger.
Triadisch
Drei Farben, die gleichmäßig entlang des Farbkreises verteilt sind und jeweils 120 Grad Farbtonabstand aufweisen. Am besten lässt du eine Farbe dominieren und verwendest die anderen als Akzente.
Analog
Drei Farben mit gleicher Luminanz und Sättigung mit Farbtönen, die auf dem Farbkreis nebeneinander liegen, 30 Grad auseinander. Weiche Übergänge.
Monochromatisch
Drei Farben desselben Farbtons mit Leuchtdichtewerten von +/-50%. Subtil und raffiniert.
Tetradisch
Zwei Sätze von Komplementärfarben, getrennt durch 60 Grad Farbton.
Farbtheorie-Prinzipien
Balance
Verwende eine dominante Farbe, unterstütze mit Sekundärfarbe und akzentuiere sparsam.
Kontrast
Stelle ausreichenden Kontrast für Lesbarkeit und Barrierefreiheit sicher.
Harmonie
Farben sollten zusammenarbeiten, um ein einheitliches visuelles Erlebnis zu schaffen.
Farbkontrast-Prüfer
Teste Farbkombinationen, um sicherzustellen, dass sie den WCAG-Barrierefreiheitsstandards für die Lesbarkeit von Text entsprechen.
Textfarbe
Hintergrundfarbe
Kontrast
WCAG-Standards
Jeder Mensch ist ein Genie. Aber wenn man einen Fisch nach seiner Fähigkeit beurteilt, auf einen Baum zu klettern, wird er sein ganzes Leben lang glauben, dass er dumm ist.