Unterschiedliche Farben, die zusammenpassen
Mehrere verschiedene Farben mit gleicher Helligkeit und Sättigung. Auf Icons, Tags, Diagrammen und Folien wirken sie wie ein Set.
Klicke auf eine Farbe, um den HEX-Code zu kopieren.
So wirken sie zusammen
- Start
- Nachrichten
- Kalender
- Dateien
- Fotos
- Musik
Code
#ea6a64
#bf9000
#4db155
#00acba
#6793fa
#c972ceDeine Farben prüfen
Füge die Farben ein, die du schon nutzt, eine pro Zeile oder mit Leerzeichen getrennt. Du siehst, ob sie auf einer Stufe liegen, und bekommst ein korrigiertes Set mit denselben Farbtönen.
Fragen und Antworten
Warum wirken Farben mit gleicher HSL-Helligkeit ungleichmäßig?
HSL behandelt alle Farbtöne gleich, das Auge aber nicht: Gelb und Grün wirken bei gleichen HSL-Werten viel heller als Blau. Dieses Tool rechnet in OKLCH, wo gleiche Helligkeit auch gleich aussieht. So sticht kein Icon und kein Balken zufällig heraus.
Wie viele verschiedene Farben kann man unterscheiden?
In einem Diagramm oder einer Legende unterscheiden die meisten Menschen schnell 6 bis 8 Farben. Bis zu 12 geht noch, wenn Beschriftungen daneben stehen. Bei mehr Kategorien fasse kleine zusammen oder nutze Beschriftungen, Muster oder Icons.
Welchen Look soll ich wählen?
Pastell und Sanft passen als Hintergrund für Tags und Badges mit dunklem Text. Hell und Kräftig passen für Icons, Balken und Linien auf weißem Grund. Tief und Dunkel passen für Kacheln mit weißem Text und für Akzente im Dark Mode.
Kann ich Text auf diese Farben setzen?
Ja. Die Vorschau wählt für jede Farbe schwarzen oder weißen Text. Helle Looks bekommen dunklen Text, tiefe Looks weißen. Prüfe für Fließtext das genaue Paar im Kontrastprüfer.
Sind Farben mit gleicher Helligkeit für Farbenblinde geeignet?
Farben auf einer Stufe unterscheiden sich nur im Farbton, und genau das ist für Menschen mit Farbenblindheit am schwersten. Füge in Diagrammen Beschriftungen oder Muster hinzu oder prüfe das Set im Farbenblindheits-Simulator. Für Icons mit Textbeschriftung ist es meist in Ordnung.