Über dieses Tool
Schattierungen (Shades) und Aufhellungen (Tints) sind die Grundlage eines nutzbaren UI-Farbsystems. Eine einzelne Markenfarbe reicht selten allein aus: Für Hintergründe, Hover-Zustände und dezente Flächen braucht es hellere Tints, für Text, Rahmen und Zustände, die auf hellem Hintergrund lesbar bleiben müssen, dunklere Shades. „Shade“ und „Tint“ haben in der Designterminologie eine präzise Bedeutung — ein Shade mischt die Basisfarbe mit Schwarz, ein Tint mit Weiß — im Unterschied zu einem „Tone“, der mit Grau gemischt wird und von diesem Tool nicht erzeugt wird.
Wählen Sie eine Basisfarbe und eine Anzahl von Schritten, um eine vollständige Abstufung von dunkel nach hell zu erzeugen: die dunkelste Schattierung zuerst, Ihre Ausgangsfarbe in der Mitte und die hellste Aufhellung zuletzt. Klicken Sie auf ein Farbfeld, um dessen Hex-Code in die Zwischenablage zu kopieren — für CSS-Variablen, Design-Tokens oder die Tailwind-Konfiguration. Alles läuft lokal in Ihrem Browser ab, während Sie Farbe oder Schrittzahl anpassen; nichts wird hochgeladen.
Häufige Fragen
Was ist der Unterschied zwischen einer Schattierung und einer Tönung?
Eine Schattierung ist Ihre Grundfarbe, gemischt in Richtung Schwarz (dunkler), während eine Tönung Ihre Grundfarbe gemischt in Richtung Weiß ist (heller). Beide behalten denselben Farbton.
Wie viele Stufen sollte ich für eine Design-System-Palette generieren?
Die meisten Design-Systeme verwenden 5-10 Stufen (ähnlich der 50-900-Skala von Tailwind) — genug, um Hintergründe, Rahmen, Text und Hover-Zustände abzudecken, ohne zu viele fast identische Farben.