Was sind Farbabstufungen
Das ist die Reihe von Tönen, die aus einer Farbe entstehen: von fast Weiß bis fast Schwarz. Alle haben denselben Grundton, deshalb passen sie mühelos zusammen.
Aufhellung, Abdunklung und Abtönung
Eine Aufhellung ist die Farbe mit Weiß gemischt: heller und sanfter. Eine Abdunklung ist die Farbe mit Schwarz gemischt: dunkler und tiefer. Eine Abtönung ist die Farbe mit Grau gemischt: gedämpfter und eleganter.
So nutzt du Abstufungen im Design
Nimm die hellen Töne (50 bis 200) für Hintergründe, die mittleren (400 bis 600) für Buttons und Links und die dunklen (700 bis 950) für Texte und Rahmen. Mit nur einer Farbe bekommst du ein aufgeräumtes, stimmiges Interface.
Häufige Fragen
Wie werden die Abstufungen berechnet?
Wir nutzen den Farbraum OKLCH, der nachbildet, wie das Auge Helligkeit wahrnimmt. So wirken die Schritte zwischen den Tönen gleichmäßig, ohne harte Sprünge.
Was bedeuten die Zahlen 50 bis 950?
Das ist die Skala von Tailwind CSS und vielen Designsystemen: 50 ist der hellste Ton, 950 der dunkelste. Deine Farbe landet bei der Zahl, die am besten passt.
Kann ich die Abstufungen in Tailwind oder CSS nutzen?
Ja. Gib einen Namen ein, wähle das Format und kopiere den Code: fertige CSS-Variablen zum Einfügen oder den Farbblock für die Tailwind-Konfiguration.
Was ist der Unterschied zwischen Abstufungen und einer Farbpalette?
Abstufungen sind Töne einer einzigen Farbe. Eine Palette kombiniert verschiedene Farben, die zusammenpassen. Viele Paletten nutzen Abstufungen für Hintergründe und Texte und dazu ein oder zwei Akzentfarben.