Schattierungen & Tönungen
Hellere und dunklere Varianten jeder Grundfarbe
Füge oben eine Farbe hinzu, um Schattierungen und Tönungen zu erzeugen
Unterstützt #RGB und #RRGGBB – du kannst mehrere Farben auf einmal eingeben
So funktioniert der Generator für Schattierungen & Tönungen
Baue aus jeder Grundfarbe eine komplette Farbskala: hellere Tönungen und dunklere Schattierungen für Designsysteme und UI-Entwicklung.
Tönungen (heller)
Erzeuge schrittweise hellere Varianten, indem du die Grundfarbe mit Weiß mischst. Perfekt für Hintergründe, Hover-Zustände und dezente UI-Flächen.
Schattierungen (dunkler)
Erzeuge tiefere Varianten durch Mischen mit Schwarz. Nutze sie für Text auf farbigen Hintergründen, aktive Zustände und Dark-Mode-Varianten.
Einstellbare Schritte
Bestimme die Anzahl der Schritte pro Skala: 5 schnelle Varianten oder 20 feine Abstufungen für detaillierte Design-Token-Systeme.
Kopieren & teilen
Kopiere jeden Wert als HEX, RGB oder HSL. Teile die ganze Skala per Link, damit dein Team exakt dieselben Farben sieht.
Häufig gestellte Fragen
Eine Schattierung (Shade) ist eine mit Schwarz gemischte Farbe – also dunkler. Eine Tönung (Tint) ist eine mit Weiß gemischte Farbe – also heller. Zusammen bilden sie eine komplette Helligkeitsskala von der hellsten Tönung bis zur tiefsten Schattierung einer Grundfarbe.
Designsysteme nutzen nummerierte Farbskalen (50, 100, 200 … 900), damit Farben im ganzen Produkt einheitlich eingesetzt werden. Die hellsten Werte eignen sich für Hintergründe und Rahmen, mittlere für Icons und sekundären Text, dunkle für Haupttext und Hervorhebungen.
Ja. Gib eine beliebige Farbe als HEX, RGB oder HSL als Grundfarbe ein – der Generator erzeugt daraus die komplette Skala aus Tönungen und Schattierungen. Du kannst die Grundfarbe auch visuell mit dem Color Picker wählen.
opacity wirkt auf das ganze Element samt Text und Rahmen, und das Ergebnis hängt vom Hintergrund dahinter ab. Tönungen sind deckende Farben, die auf jedem Hintergrund gleich aussehen. Sie sind berechenbarer und barrierefreier als Transparenz.