Farbabstufungs-Generator
Einen vollständigen Bereich von Tints und Shades aus einer einzigen Farbe erzeugen — Aufhell-/Abdunkelschritt und Anzahl der Abstufungen wählen und jeden Wert sofort kopieren.
Basisfarbe, Schrittgröße und Anzahl wählen — alle Tints und Shades werden sofort im Browser berechnet.
Über Farbabstufungs-Generator
Der Color Shades Generator erweitert eine einzelne Farbe zu einer vollständigen Reihe von Auf- und Abtönungen. Gib eine Grundfarbe an, und er erzeugt auf der einen Seite zunehmend hellere Aufhellungen und auf der anderen zunehmend dunklere Abtönungen: die klassische 50-bis-900-Skala, wie sie in modernen Designsystemen verwendet wird.
Zwei Regler formen das Ergebnis: Der Schrittprozentsatz legt fest, wie viel heller oder dunkler jeder Ton wird (1–25 % pro Schritt), und die Anzahl bestimmt, wie viele Auf- und Abtönungen auf jeder Seite der Grundfarbe erscheinen, bis zu zehn. Ein Verlaufsstreifen zeigt die gesamte Skala auf einen Blick.
Die Erzeugung geschieht sofort in deinem Browser, während du tippst: Nichts wird an einen Server gesendet. Kopiere einen einzelnen Wert, die vollständige Liste oder die gesamte Skala als CSS-Variablen, bereit für eine Design-Token-Datei oder eine Tailwind-artige Farbskala.
So verwenden Sie Farbabstufungs-Generator
- Wähle eine Grundfarbe mit dem Farbwähler oder gib einen Wert ein; klicke auf „Zufällige Farbe“ zur Inspiration.
- Stelle den Schrittprozentsatz ein, um zu steuern, wie stark jeder Ton auf- oder abgehellt wird.
- Wähle die Anzahl der Töne, um festzulegen, wie viele Auf- und Abtönungen auf jeder Seite erscheinen.
- Klicke auf ein Farbmuster, um es zu kopieren, oder nutze „Alle kopieren“ und „CSS-Variablen kopieren“ für die gesamte Skala.