Farbabstufungen erzeugen (Tints und Shades)

Wähle eine Ausgangsfarbe und erhalte sofort 10 hellere Varianten Richtung Weiß (Tints) und 10 dunklere Richtung Schwarz (Shades). Klicke auf ein Farbfeld, um seinen Hex-Code zu kopieren.

Klicke unten auf ein Farbfeld, um seinen Hex-Code zu kopieren.

☀️ Aufhellungen, Richtung Weiß

🌑 Abdunklungen, Richtung Schwarz

Alles passiert in deinem Browser: Es werden niemals Daten irgendwohin gesendet.

Warum Aufhellungen und Abdunklungen in einem Designsystem wichtig sind

Eine einzige Farbe reicht nie, um eine Oberfläche zu bauen: Du brauchst ihre Varianten. Aufhellungen (die Farbe mit Weiß gemischt) eignen sich gut für Hintergründe, Badges, Hover-Zustände und sanfte Flächen; Abdunklungen (die Farbe mit Schwarz gemischt) sind ideal für Text, Rahmen, Icons und aktive Zustände, die einen kräftigen Kontrast brauchen. Es ist dieselbe Idee wie bei den nummerierten Skalen 50–900 in Tailwind CSS und Material Design: Mit einer einheitlichen Skala erfindest du nicht mehr auf jedem Bildschirm neue Grautöne und Farbtöne, die knapp danebenliegen.

So werden die Varianten berechnet

Jede Stufe mischt deine Ausgangsfarbe mit zunehmenden Anteilen von Weiß oder Schwarz: Das erste Farbfeld enthält etwa 9 % Weiß (oder Schwarz), das letzte etwa 91 %. Die Mischung erfolgt auf den RGB-Kanälen, der gängigsten Methode in Design-Tools. So erhältst du eine gleichmäßige, vorhersehbare Skala mit Hex-Codes, die du direkt in dein CSS, in Figma oder in die Variablen deines Designsystems einfügen kannst.

Ähnliche Tools

Zufallsfarbe Zufällige Farben mit HEX- und RGB-Code erzeugen: Pastell, dunkel und kompletter Verlauf. Farbpaletten-Generator Erzeuge Paletten mit 5 Farben und Harmonien, sperre Favoriten und kopiere HEX-Codes. Farbwähler Wähle eine Farbe per Klick und kopiere HEX-, RGB- und HSL-Code, mit gespeichertem Verlauf. CSS-Farbnamen Alle 148 benannten CSS-Farben mit Vorschau und Hex-Code: suchen, nach Farbton sortieren, kopieren. Komplementärfarben Komplementäre, triadische, analoge und geteilt komplementäre Paletten mit Hex-Codes. CSS-Farbverlauf-Generator Lineare und radiale CSS-Farbverläufe mit Live-Vorschau und Code zum Kopieren.