Tönungs- und Schattengenerator

• Sofortige Tönungs- und Schattengenerierung: Der Generator aktualisiert bei jeder Farbänderung deine gesamte Palette ohne Verzögerung. Klicke auf ein beliebiges Farbfeld, um seinen HEX-Code sofort zu kopieren – kein Button nötig.
• Sicher und 100 % privat: Die gesamte Tönungs- und Schattengenerierung läuft vollständig in deinem Browser. Deine Farbdaten werden niemals an einen Server gesendet – sicher für unveröffentlichte Markenfarben und vertrauliche Designsysteme.
• Export als CSS-Variablen, Tailwind-Konfiguration oder HEX-Liste: Exportiere deine generierte Palette in drei Formaten: CSS-Custom-Properties (:root), Tailwind-CSS-Konfigurationsobjekt oder eine einfache HEX-Liste. Konfigurierbarer Variablenname und Stufenanzahl (5, 8, 10 oder 12 Stufen).
• 100 % kostenlos – keine Anmeldung nötig: Völlig kostenlos, ohne Konto, ohne Premium-Stufe, ohne Nutzungslimits und ohne Werbung, die die Oberfläche blockiert. Erzeuge Tönungen und Schattierungen so oft du möchtest.

• Farbskalen für Designsysteme: Design-System-Engineers nutzen den Generator, um vollständige Farbskalen für Komponentenbibliotheken zu erstellen. Exportiere direkt als CSS-Variablen oder Tailwind-Konfiguration, um sie in deine Design-Token-Pipeline zu integrieren.
• Erweiterung der Markenfarbpalette: Markendesigner nutzen den Generator, um eine einzelne Markenfarbe zu einer vollständigen Palette hellerer und dunklerer Varianten auszubauen – und erhalten die Bandbreite, die für Hintergründe, Ränder, Hover-Zustände und Text nötig ist.
• Farbbibliotheken für Figma & Sketch: UI-Designer nutzen den Generator, um Farbbibliotheken in Figma und Sketch zu erstellen. Kopiere die HEX-Codes aus der Farbfeldtabelle und füge sie direkt in die Farbstile deines Design-Tools ein.
• E-Commerce- und Marketing-Websites: Webentwickler nutzen den Generator, um Hover-Zustände, aktive Zustände und Hintergrundvarianten aus einer einzigen Markenfarbe zu erstellen – für visuelle Konsistenz über Produkt- und Landingpages hinweg.
• Farbanpassung für den Dunkelmodus: Entwickler von Dunkelmodus-Themes nutzen den Generator, um passende hellere Varianten ihrer Basisfarben für dunkle Hintergründe zu finden – mit ausreichendem Kontrast, ohne den Markenfarbton zu ändern.
• Individuelle Farben für Tailwind CSS: Tailwind-CSS-Entwickler nutzen den Generator, um individuelle Farbskalen zu erstellen, die der 50-900-Namenskonvention von Tailwind entsprechen. Exportiere direkt als Tailwind-Konfigurationsobjekt und füge es in tailwind.config.js ein.

In der Farbtheorie ist eine Tönung eine Farbe, die mit Weiß gemischt wird, wodurch sie heller und weniger gesättigt wird. Eine Schattierung ist eine Farbe, die mit Schwarz gemischt wird, wodurch sie dunkler und gesättigter wird. Zusammen bilden Tönungen und Schattierungen eine Farbskala – eine Bandbreite von Werten von nahezu Weiß bis nahezu Schwarz, die alle denselben Farbton wie die Basisfarbe teilen. Farbskalen sind die Grundlage moderner Designsysteme: Sie bieten die gesamte Wertebandbreite, die für Hintergründe, Ränder, Text, Hover-Zustände und Fokusindikatoren nötig ist, und wahren dabei visuelle Konsistenz. Unser browserbasierter Tönungs- und Schattengenerator erstellt diese Skalen sofort aus jeder Basisfarbe mittels linearer RGB-Interpolation.

1. Basisfarbe eingeben: Gib einen HEX-Wert (z. B. #3b82f6) oder RGB-Wert in die Farbeingabe ein oder nutze den nativen Farbwähler. Du kannst auch eine Preset-Farbe wählen, um schnell zu starten.
2. Stufenanzahl wählen: Wähle 5, 8, 10 oder 12 Stufen pro Seite. Mehr Stufen bieten eine feinere Granularität für komplexe Designsysteme; weniger Stufen eignen sich besser für einfache Paletten. Der Generator aktualisiert die Palette bei jeder Änderung sofort.
3. Kopieren oder exportieren: Klicke auf ein beliebiges Farbfeld, um seinen HEX-Code zu kopieren. Nutze den Exportbereich, um die gesamte Palette als CSS-Custom-Properties, ein Tailwind-CSS-Konfigurationsobjekt oder eine einfache HEX-Liste zu kopieren – mit konfigurierbarem Variablennamen.

• Tönungsformel: Jede Tönung wird durch lineare Interpolation zwischen der Basisfarbe und Weiß (RGB 255, 255, 255) berechnet. Eine Tönung mit Verhältnis r = Basis × r + Weiß × (1 − r). Die hellste Tönung hat den kleinsten r-Wert (am nächsten zu Weiß); die dunkelste Tönung hat den größten r-Wert (am nächsten zur Basis).
• Schattierungsformel: Jede Schattierung wird durch lineare Interpolation zwischen der Basisfarbe und Schwarz (RGB 0, 0, 0) berechnet. Eine Schattierung mit Verhältnis r = Basis × r. Die hellste Schattierung hat den größten r-Wert (am nächsten zur Basis); die dunkelste Schattierung hat den kleinsten r-Wert (am nächsten zu Schwarz).
• Stufenverteilung: Die Stufen werden gleichmäßig zwischen der Basisfarbe und Weiß/Schwarz verteilt, ohne die reinen Endpunkte. Das sorgt für konsistente visuelle Abstände zwischen den einzelnen Stufen der Palette.
• Ausgabeformate: Für jedes Farbfeld werden HEX-, RGB- und HSL-Werte bereitgestellt. Die HSL-Darstellung ist nützlich, um zu verstehen, wie sich die Helligkeit über die Skala ändert, während Farbton und Sättigung näherungsweise konstant bleiben.

Eine Tönung fügt einer Farbe Weiß hinzu (erhöht die Helligkeit, verringert die Sättigung). Eine Schattierung fügt einer Farbe Schwarz hinzu (verringert die Helligkeit, kann die Sättigung erhöhen oder verringern). Eine Abstufung fügt einer Farbe Grau hinzu (verringert die Sättigung, ohne die Helligkeit so drastisch zu ändern). Unser Generator konzentriert sich auf Tönungen und Schattierungen – die in UI-Designsystemen am häufigsten benötigten Varianten. Für Abstufungen nutze das Tool Farbmischer, um deine Basisfarbe mit einem neutralen Grau zu mischen.