Tint & Shade Generator
Generiert hellere Töne und dunklere Schattierungen von jeder Basisfarbe. Erstellen Sie eine vollständige Farbskala.
Über dieses Tool
Der Ton-und-Schatten-Generator erstellt hellere und dunklere Varianten aus jeder Grundfarbe. Toene entstehen durch Mischen der Grundfarbe mit Weiss (Helligkeit hinzufuegen), Schattierungen durch Mischen mit Schwarz (Helligkeit reduzieren).
Das Tool generiert bis zu 5 Tonstufen und 5 Schattierungsstufen sowie die urspruengliche Grundfarbe und liefert eine 11-stufige Palette um den gewahlten Farbton. Klicken Sie auf ein Farbmuster, um den Hex-Code zu kopieren.
Anleitung
- Waehlen Sie eine Grundfarbe mit dem Farbwaehler oder geben Sie einen Hex-Code ein.
- Verwenden Sie die Beispielschaltflaechen, um voreingestellte Farben schnell auszuprobieren.
- Passen Sie die Anzahl der Stufen (3-5) an, um die Breite der Palette zu steuern.
- Klicken Sie auf ein Farbmuster, um den Hex-Code zu kopieren. Verwenden Sie Alle kopieren fuer die vollstaendige Skala.
Anwendungsfälle
Designsysteme benoetigen eine systematische Farbskala fuer jede Markenfarbe. UI-Designer erstellen Hover-, Aktiv- und Deaktiviert-Zustaende aus einer einzigen Aktionsfarbe. Frontend-Entwickler erstellen konsistente Schaltflaechen-, Badge- und Karten-Farbvarianten.
Häufige Fragen
- Was ist der Unterschied zwischen Ton und Schattierung? — Ein Ton mischt die Farbe mit Weiss (heller); eine Schattierung mischt mit Schwarz (dunkler). Ein Tonwert mischt mit Grau und wird hier nicht generiert.
- Wie werden die Stufen berechnet? — Jede Stufe mischt die Grundfarbe mit Weiss oder Schwarz in Anteilen von 10%, 30%, 50%, 70% und 90% und liefert konsistente visuelle Schritte.
- Kann ich CSS-Variablen daraus erhalten? — Die Ausgabe sind Hex-Codes. Sie koennen sie als --color-500, --color-400 usw. in Ihr CSS einfuegen.