Softonic

Farbschattierungs-Generator

Schritt 1 / 2
Ergebnisse

Eine Schattierung ist das Ergebnis des Mischens einer Farbe mit Schwarz; jeder Schritt wird dunkler. Der Generator nimmt eine HEX-Basisfarbe und produziert 3 bis 20 Stufen (standardmäßig 10) zunehmend dunklerer Schattierungen sowie die helleren Tönungen derselben Basisfarbe. Nützlich für die Stufen einer Design-System-Palette (500 → 900), gedrückte/aktive Zustände von Schaltflächen, Textfarben, die lesbar bleiben, und Schattenüberlagerungen. Jede Stufe wird als Farbfeld mit ihrem HEX-Wert angezeigt und ist bereit zum Kopieren.

Wie die Schattierungsgenerierung funktioniert

  1. 1

    Wähle eine Basisfarbe

    Nutze den Farbwähler oder übergib im Schrittmodus einen HEX-Wert über die Seiten-URL. Die Basis liegt zwischen dem Tönungs- und dem Schattierungsbereich.

  2. 2

    Wähle die Schrittanzahl

    3 bis 20 Schritte, standardmäßig 10. Mehr Schritte ergeben eine weichere Leiter; weniger Schritte stärkere Sprünge.

  3. 3

    Mit Schwarz in gleichmäßigen Schritten mischen

    Jeder Schritt skaliert die Rot-, Grün- und Blaukanäle mit demselben Faktor, was einem Mischen mit Schwarz (bzw. mit Weiß für Tönungen) in gleichmäßigen Schritten entspricht. Bei 10 Schritten ist jeder Schritt etwa 9 % dunkler oder heller. Der Farbton bleibt identisch zur Basisfarbe.

  4. 4

    Skala ablesen

    Jedes Farbfeld zeigt seinen HEX-Wert. Wähle den Text aus, um ihn in CSS, ein Tailwind-Theme oder eine Design-Token-Datei zu kopieren.

Schattierung, Tönung und Ton

  • Schattierung (shade): Farbe + Schwarz → dunkler.
  • Tönung (tint): Farbe + Weiß → heller.
  • Ton (tone): Farbe + Grau → weniger gesättigt.

Dieser Generator erzeugt sowohl Schattierungen als auch Tönungen aus derselben Basisfarbe. Das Paar aus Tönung und Schattierung bildet normalerweise eine Design-System-Palette (z.B. brand-100 bis brand-900, wobei 500 die Basis ist).

Beispielskala: #3B82F6 (Tailwind blue-500)

Schritt HEX Mischung Rolle im Design-System
0 #3B82F6 Basis Primäre Marke (z.B. blue-500)
1 #316CCD 17 % Schwarz Hover-Zustand
2 #2756A4 33 % Schwarz Gedrückter/aktiver Zustand (blue-600)
3 #1D417B 50 % Schwarz blue-700
4 #132B52 67 % Schwarz blue-800
5 #091528 83 % Schwarz blue-900

Die Tabelle zeigt eine 5-Stufen-Skala: jeder Schritt ist ein Sechstel des Wegs zu Schwarz.

So werden die Schritte berechnet

Das Tool skaliert die Rot-, Grün- und Blaukanäle der Basisfarbe in jedem Schritt mit demselben Faktor. Das entspricht einem Mischen mit Schwarz für den Schattierungsbereich und mit Weiß für den Tönungsbereich, in gleichmäßigen Schritten. Bei 10 Schritten ist jeder Schritt etwa 9 % dunkler oder heller als der vorherige.

Da alle Kanäle gleich skaliert werden, bleibt der Farbton der Basis exakt erhalten: Eine blaue Basis bleibt blau, eine grüne Basis bleibt grün. Das Mischen mit Schwarz senkt außerdem die Sättigung zusammen mit der Helligkeit, sodass dunkle Schritte natürlich wirken statt zu leuchten. Wird nur die Helligkeit reduziert, ohne die Sättigung anzufassen, bleiben dunkle Farben übersättigt.

Verwendung von Schattierungen in der UI

  • Schaltfläche: Basis für den Ruhezustand, 1-2 Schritte dunkler für Hover, 2-3 Schritte dunkler für aktiv/gedrückt.
  • Fließtext: 2-3 Schritte dunkler als die Basis gewährleisten Lesbarkeit auf Weiß; heller für sekundären Text.
  • Rand / Trennlinie: 1-2 Schritte dunkler als der Hintergrund, genug, um abzugrenzen, ohne überwältigend zu sein.
  • Schatten: dunkelster Schritt (oder dunkler) mit reduziertem Alpha anstelle eines neuen Graus.
  • Datenvisualisierung: Verwende Schattierungen einer einzigen Farbe für eine sequenzielle Skala (Wertgrößen) oder kombiniere Schattierungen von zwei Farben für divergierende Skalen (positiv und negativ).

Häufige Fallstricke

  • Zu viele Schritte quetschen sich in ununterscheidbare Bänder. 10-Schritt-Skalen funktionieren gut, weil jeder Schritt etwa 9 % dunkler ist; bei 20 Schritten werden die Unterschiede subtil. Für starke Kontraste sind 3-5 Schritte besser.
  • Farbton-Drift ist hier nicht möglich: Jeder Schritt skaliert alle Kanäle gleich, ein Rot bleibt also rot und ein Grün bleibt grün. Farbton-Drift entsteht bei der Interpolation zwischen zwei verschiedenen Farben, was dieses Tool nicht tut.
  • Zugänglichkeit ignorieren: Töne, die harmonisch aussehen, können im Vergleich zum Hintergrund die WCAG-Kontraste nicht erfüllen. Überprüfe immer den Kontrast bei jedem Schritt.
  • Skalen, die nur aus Schattierungen bestehen, fühlen sich auf dunklen Hintergründen erdrückend an. Kombiniere sie mit einer Tönungsskala für einen benutzbaren Dunkelmodus.

Häufig gestellte Fragen

Für ein Design-System sind 5 Schattierungsstufen + 5 Tönungsstufen (insgesamt 10 um die Basis herum) die gängige Konvention. Für schnelle UI-Zustandsfarben (Hover, aktiv) genügen 3 Stufen.

Das hier verwendete gleichmäßige Mischen hält jeden Schritt auf einer geraden Linie zwischen Basis und Schwarz, die mittleren Stufen bleiben daher sauber. Eine matschige Mitte entsteht meist bei Tools, die zwischen zwei verschiedenen Farben interpolieren oder die Helligkeit ohne die Sättigung reduzieren.

Dunkle Farben haben bereits wenig Spielraum, um dunkler zu werden, bevor sie schwarz werden; eine dunkle lila Basis ergibt nur 2-3 ausgeprägte Stufen, bevor die Skala zusammenbricht. Wähle eine Basis mit mittlerer Helligkeit für reichhaltigere Skalen.

Ähnlich in der Absicht, aber das Mischen mit Schwarz reduziert die Sättigung zusammen mit der Helligkeit, was typischerweise natürlicher aussieht. Eine reine Helligkeitsreduktion hält die Sättigung hoch und kann zu übersättigten dunklen Farben führen.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Telefonnummern prüfen

Prüfen Sie die Struktur von Telefonnummern nach Land und zeigen Sie Region, Typ sowie E.164-, internationale, nationale und RFC-3966-Formate an.

HAR-Datei-Viewer

HAR-Netzwerkaufzeichnungen lokal öffnen, Anfragen filtern, maskierte Header und Zeitwerte prüfen und bereinigte Zusammenfassungen exportieren.