So erzeugen Sie Farbtöne: Konsistente Paletten aus einer Farbe erstellen

Eine einzelne Markenfarbe reicht nicht aus. Sie benötigen hellere Versionen für Hintergründe und Hover-Zustände sowie dunklere für Text, Ränder und gedrückte Zustände. Das manuelle Auswählen jedes Schrittes ist mühsam und oft inkonsistent.

Farbtöne — Variationen einer Farbe, die nur durch Helligkeit verändert werden — geben Ihnen eine vollständige, konsistente Skala aus einer Entscheidung. So generieren Sie sie und verwenden sie in Designsystemen, Tailwind-Stilpaletten und CSS.

---

Was sind Farbtöne?

Töne sind Variationen einer einzelnen Farbe, die nur durch Helligkeit (in HSL) verändert werden. Farbton und Sättigung bleiben gleich, sodass Sie eine kohärente Familie von sehr hell bis sehr dunkel erhalten.

Im Gegensatz zu Tönungen (Hinzufügen von Weiß) oder Nuancen (Hinzufügen von Grau) sorgt die Generierung von Tönen über HSL-Helligkeit dafür, dass der Charakter der Farbe über die Skala hinweg erhalten bleibt und ein ausgewaschenes Aussehen in den helleren Schritten vermieden wird.

Das macht Töne ideal für:

• Designsystem-Skalen (z. B. primary-50 bis primary-900)
• Tailwind-Stilpaletten
• CSS-Custom-Properties für das Theming
• Buttons, Karten und UI-Komponenten

---

Warum einen Töne-Generator verwenden?

Eine Skala von Hand zu erstellen, ist langsam und leicht fehleranfällig. Sie müssen:

• Farbton und Sättigung identisch halten
• Helligkeitsschritte gleichmäßig verteilen
• Hex, RGB, HSL oder CSS für die Entwicklung exportieren

Der Tooladex Farbtöne-Generator erledigt dies automatisch: Sie wählen eine Basisfarbe und wie viele Schritte Sie möchten (z. B. 9 oder 11), und er produziert eine vollständige Skala mit Ihrer Basis in der Mitte. Sie können Hex, RGB, HSL oder einen bereit zum Einfügen :root-Block von CSS-Variablen kopieren.

---

Beispiel: Erstellen einer Button-Palette

Beginnen Sie mit einem Markenblau wie #3B82F6. Der Generator gibt Ihnen:

• Hellere Töne (50–400) — Hintergründe, Hover-Zustände, deaktivierte Buttons
• Ihre Basisfarbe (500) — Primäre Aktionen und Standardzustand
• Dunklere Töne (600–900) — Gedrückte Zustände, Ränder, Text auf hellen Hintergründen

Eine Farbentscheidung wird zu einer vollständigen Komponentenpalette. Verwenden Sie denselben Ansatz für sekundäre, Akzent- oder semantische Farben (Erfolg, Warnung, Fehler).

---

Wie viele Töne sollten Sie generieren?

Die meisten Designs verwenden 9–11 Schritte. Tailwind verwendet 10 (50, 100, 200…900). Weniger Schritte (5–7) eignen sich für einfachere Projekte; mehr Schritte bieten feinere Kontrolle, können aber übertrieben sein.

Das Tooladex-Tool unterstützt 3, 5, 7, 9, 11 oder 15 Töne. Für Tailwind-ähnliche Setups wählen Sie 9 (Bezeichnungen 100–900) oder 11 (50–950).

---

Ausgabeformate

Sie können Töne in mehreren Formaten kopieren:

• Hex — z. B. #EFF6FF, #DBEAFE — für Design-Tools und Inline-Stile
• RGB — z. B. rgb(239, 246, 255) — für programmatische Verwendung
• HSL — z. B. hsl(214, 100%, 97%) — zum Anpassen im Code
• CSS-Variablen — Ein :root { --color-100: #...; --color-200: #...; } Block, den Sie in Ihr Stylesheet einfügen können

Verwenden Sie die Option „Als CSS-Variablen kopieren“ mit einem Basisnamen (z. B. --color-primary), um eine vollständige Skala für das Theming zu erhalten.

---

Tipps für bessere Ergebnisse

• Betrachten Sie Ihre Basis als die Mitte — Denken Sie an die Basisfarbe als den 500 Schritt, nicht den dunkelsten. Der Generator platziert sie in der Mitte und baut von dort aus hellere und dunklere Töne.
• Überprüfen Sie den Kontrast frühzeitig — Verwenden Sie hellere Töne (50–200) für Hintergründe mit dunklem Text; verwenden Sie dunklere Töne (700–900) für Text auf hellen Hintergründen, um die Zugänglichkeitsrichtlinien zu erfüllen.
• Vermeiden Sie reines Schwarz oder Weiß als Basis — Beginnen Sie mit einer Farbe, die etwas Sättigung hat (z. B. 10%+). Reine Graustufen können flach aussehen; ein Hauch von Farbton hält die Skala nutzbarer und natürlicher.

Wenn eine Skala seltsam aussieht (z. B. zu flach oder zu hart), versuchen Sie, die Sättigung Ihrer Basisfarbe leicht anzupassen. HSL-Helligkeit funktioniert am besten mit moderater Sättigung (etwa 20–80%).

---

Probieren Sie den Farbtöne-Generator aus

Der Tooladex Farbtöne-Generator läuft vollständig in Ihrem Browser: Wählen Sie eine Basisfarbe, wählen Sie die Anzahl der Töne und kopieren Sie Hex, RGB, HSL oder CSS-Variablen. Kein Konto, keine Daten, die an einen Server gesendet werden — nur eine vollständige Palette aus einer Farbe.