Farbnuancen-Generator Erstellen Sie dunklere Nuancen einer beliebigen Farbe mit anpassbarer Schrittanzahl.

🎨

Farbnuancen-Generator

Erstellen Sie dunklere Nuancen einer beliebigen Farbe mit anpassbarer Schrittanzahl.

Basisfarbe auswählen

Wählen Sie eine beliebige Farbe als Ausgangspunkt.

Schritte anpassen

Wählen Sie, wie viele progressiv dunklere Schattierungen generiert werden sollen.

Schattierungen kopieren

Kopieren Sie einzelne Schattierungen oder die gesamte Menge.

Loading tool...

What Is Farbnuancen-Generator?

Ein Farbschattengenerator erstellt progressiv dunklere Versionen einer Basisfarbe, indem er systematisch deren Helligkeit im HSL-Farbraum reduziert. Die Schatten behalten die ursprüngliche Farbtonung und Sättigung bei, während sie sich auf Schwarz zubewegen, was eine kohärente Reihe von dunkleren Varianten ergibt. Dies ist für Designsysteme unerlässlich, in denen Sie mehrere Intensitäten einer Markenfarbe benötigen - von der Originalfarbe für primäre Schaltflächen bis hin zu tiefen Versionen für Text, Ränder und Hover-Zustände. Im Gegensatz zur einfachen Hinzufügung von Schwarz im RGB-Farbraum (was die wahrgenommene Farbtonung verschieben kann), bewahrt der HSL-basierte Ansatz die Farbidentität über den gesamten Schattenumfang hinweg. Die einstellbare Anzahl der Schritte ermöglicht es Ihnen, alles von einem einfachen Drei-Schatten-Set bis hin zu einer umfassenden Fünfzehn-Stufen-Skala zu erstellen.

Why Use Farbnuancen-Generator?

HSL-basierte Verdunkelung bewahrt die Farbtonkonsistenz über alle Schattierungen hinweg
Anpassbare Schrittzahl (3 bis 15) für jeden Anwendungsfall
Jede Schattierung zeigt ihren Helligkeitsprozentsatz zur Referenz
Ideal für den Aufbau von Design-System-Farbskalen
Ein-Klick-Kopie für einzelne Schattierungen oder die gesamte Menge

Common Use Cases

Design-Tokens

Generieren Sie nummerierte Farbskalen (600, 700, 800, 900) für Design-Systeme.

Hover-Zustände

Erstellen Sie konsistente dunkle Hover-Zustände für Buttons mit der Basisfarbe.

Textfarben

Finden Sie dunkle Schattierungen von Markenfarben für Überschriften und Fließtext.

Ränder & Schatten

Erhalten Sie dunkle Varianten für Ränder, Konturen und Schattenfarben.

Technical Guide

Der Schattengenerator wandelt die Basisfarbe in HSL um und erstellt N Schatten, indem er die Helligkeit vom Basiswert auf fast Null reduziert. Die Formel für jeden Schatten lautet: L = basisHelligkeit × (1 - i/(N-1)), wobei i von 0 bis N-1 reicht. Dies ergibt eine gleichmäßige Verteilung von der Originalfarbe bis hin zu fast Schwarz. Der Farbton und die Sättigung bleiben konstant, was sicherstellt, dass alle Schatten wahrgenommene Farben mit unterschiedlichen Dunkelheitsgraden sind. In der Farbtheorie ist ein Schatten speziell eine Farbe, die mit Schwarz gemischt wird, im Gegensatz zu einer Tönung (gemischt mit Weiß) oder einem Ton (gemischt mit Grau). Der HSL-Ansatz ist perzeptuell gleichmäßiger als das Abdunkeln im RGB-Farbraum, was eine proportionale Anpassung aller drei Kanäle erfordern würde.

Tips & Best Practices

1
Verwenden Sie 9 Schritte, um eine Standard-Design-System-Skala (100-900) zu erstellen
2
Die dunkelste Schattierung eignet sich gut als Text auf hellen Hintergründen
3
Kombinieren Sie Schattierungs- und Tintengeneratoren für eine vollständige Farbskala
4
Schattierungen von warmen Farben (Rots, Orangetönen) machen hervorragende dunkle Hintergründe
5
Testen Sie dunkle Schattierungen auf ausreichenden Kontrast gegenüber dem beabsichtigten Hintergrund

Related Tools

Farbpicker

Interaktiver Farbpicker mit HEX-, RGB-, HSL- und CMYK-Ausgaben.

🎨 Color Tools

Monochromes Farbschema-Generator

Erstellen Sie ein monochromes Farbschema aus jeder Basisfarbe.

🎨 Color Tools

Farb-Tönung-Generator

Erstellen Sie hellere Tönungen jeder Farbe mit anpassbarer Schrittanzahl.

🎨 Color Tools

Farbmischer

Mischen Sie zwei Farben mit anpassbarem Verhältnis und sehen Sie den vollständigen Farbverlauf.

🎨 Color Tools

Kontrastverhältnis-Prüfer

Überprüfen Sie die Kontrastverhältnisse von WCAG zwischen Vordergrund- und Hintergrundfarben.

🎨 Color Tools

Frequently Asked Questions

Q Was ist der Unterschied zwischen einer Schattierung und einem Hauch?

Eine Schattierung ist eine Farbe, die durch das Hinzufügen von Schwarz (Verringerung der Helligkeit) verdunkelt wird. Ein Hauch ist eine Farbe, die durch das Hinzufügen von Weiß (Erhöhung der Helligkeit) aufgehellt wird. Ein Ton ist eine Farbe, die durch das Hinzufügen von Grau (Verringerung der Sättigung) abgemildert wird.

Q Warum nicht einfach in RGB verdunkeln?

RGB-Verdunkelung (Reduzierung aller Kanäle) kann die wahrgenommene Farbe verschieben. HSL-basierte Verdunkelung hält den Farbton konstant, sodass alle Schattierungen wie dieselbe Farbe bei unterschiedlichen Intensitäten aussehen.

Q Wie viele Schritte sollte ich verwenden?

Für Design-Systeme 9-10 Schritte (wie Tailwind CSS-Skalen). Für einfache Anforderungen 3-5 Schritte, die Basis-, dunkle und dunkelste Varianten abdecken.

About This Tool

Farbnuancen-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.