Farbton-Generator

Erstellen Sie eine vollständige Farbpalette mit Tönungen, Schattierungen und WCAG-Kontrastwerten

Farbton-Generator

Grundfarbe

HEX

RGB

HSL

Generierte Palette Klicken zum Kopieren

Vorschau

Exportieren

100% clientseitig. Ihre Farben verlassen niemals Ihren Browser.

Anwendungsbeispiele

Hellere Tönungen (50-200) eignen sich am besten für Hintergründe und subtile Akzente.

Mittlere Töne (400-600) sind ideal für Schaltflächen, Links und Primärelemente.

Dunklere Töne (700-900) sind perfekt für Überschriften und kontrastreichen Text.

Überprüfen Sie immer den WCAG-Kontrast - AA erfordert 4,5:1 für normalen Text.

Kontrast

WCAG contrast requirements

AA: 4.5:1 (Normal text)
AA Groß: 3:1 (Large text)
AAA: 7:1 (Normal text)

Funktionen

Vollständige 50-900 Palette

Generieren Sie eine komplette Tailwind-Palette aus jeder Grundfarbe

WCAG-Kontrast

Jeder Ton zeigt Kontrastwerte gegen weiße und schwarze Hintergründe

Mehrere Exportformate

Kopieren Sie als CSS-Variablen, SCSS, Tailwind-Konfig oder JSON

Privat & Offline

Läuft vollständig in Ihrem Browser, keine Daten an einen Server gesendet

Verwendung

Grundfarbe wählen

Wählen Sie eine Farbe mit dem Auswahlwerkzeug oder geben Sie einen HEX-, RGB- oder HSL-Wert ein.

Palette überprüfen

Sehen Sie die generierten Töne mit WCAG-Kontrastindikatoren für Barrierefreiheit.

Exportieren oder kopieren

Kopieren Sie einzelne Farben oder exportieren Sie die gesamte Palette als CSS, SCSS, Tailwind oder JSON.

Häufig gestellte Fragen

Das Tool konvertiert Ihre Grundfarbe in HSL und passt den Lightness-Wert an, um 10 gleichmäßig verteilte Stufen zu erstellen. Stufe 50 ist die hellste (nahe Weiß), Stufe 900 die dunkelste (nahe Schwarz). Die Skala entspricht dem Tailwind CSS Farbpaletten-Ansatz, bei dem Stufe 500 Ihrer ursprünglichen Grundfarbe am nächsten kommt.

Jede Stufe zeigt ihr Kontrastverhältnis gegenüber Weiß und gegenüber Schwarz. Für WCAG AA-Konformität benötigt normaler Text 4,5:1, großer Text 3:1. Für AAA: 7:1 normal, 4,5:1 groß. Helle Stufen (50-300) erfüllen AA meist gegenüber schwarzem Text; dunkle Stufen (700-900) erfüllen AA meist gegenüber weißem Text.

Klicken Sie auf „Tailwind-Konfig exportieren" und kopieren Sie das JavaScript-Objekt. Fügen Sie es in den Abschnitt „colors" Ihrer tailwind.config.js ein. Tailwind generiert automatisch Utility-Klassen wie bg-brand-500, text-brand-700 und border-brand-200.

Klicken Sie auf „CSS-Variablen exportieren" für CSS-Custom-Property-Deklarationen (z. B. --color-500: #0ea5e9). Fügen Sie diese in Ihren :root-Block ein und referenzieren Sie sie mit var(--color-500). Funktioniert mit jedem CSS-Setup.

Eine Tönung ist eine hellere Version (Mischung mit Weiß, höherer Lightness-Wert). Eine Schattierung ist eine dunklere Version (Mischung mit Schwarz, niedrigerer Lightness-Wert). Stufen 50-400 sind Tönungen, Stufen 600-900 sind Schattierungen, Stufe 500 entspricht annähernd der Originalfarbe.

Die WCAG-Kontrastanforderungen erklären dies: heller Hintergrund + dunkler Text ergibt hohen Kontrast. Hintergründe der Stufen 50-100 kombiniert mit Text der Stufen 700-900 erfüllen typischerweise WCAG AA. Dunkle Hintergründe (800-900) mit weißem oder Text der Stufen 50-100 funktionieren ebenfalls gut.

Ja. Geben Sie eine beliebige gültige HEX-, RGB- oder HSL-Farbe ein. Der Generator erstellt eine vollständige benutzerdefinierte Palette aus Ihrer genauen Grundfarbe – nützlich für Markenfarben, die nicht in der Standard-Tailwind-Palette vorhanden sind.

Nein. Alle Farbberechnungen laufen lokal in Ihrem Browser über JavaScript.

Was ist ein Farbton-Generator?

Ein Farbton-Generator erstellt eine vollständige Palette von Tönungen und Schattierungen aus einer einzigen Grundfarbe. Anstatt zu raten, welche hellere oder dunklere Variation verwendet werden soll, erhalten Sie eine konsistente Palette, die über Schaltflächen, Hintergründe, Ränder und Text hinweg funktioniert. Dieses Tool erzeugt eine 10-stufige Skala von 50 (am hellsten) bis 900 (am dunkelsten), die dem beliebten Tailwind CSS Farbsystem entspricht.

Wie es funktioniert

Der Generator konvertiert Ihre Grundfarbe in HSL und passt den Helligkeitswert an, um 10 gleichmäßig verteilte Stufen zu erstellen. Jeder Ton wird dann mit der WCAG 2.1 Kontrastformel gegen weiße und schwarze Hintergründe bewertet, sodass Sie sofort wissen, welche Farben für Text barrierefrei sind. Alles läuft in Ihrem Browser ohne Server-Kommunikation.

Häufige Anwendungsfälle

Designer verwenden Ton-Generatoren, um Markenpaletten zu erstellen, Design-Tokens zu generieren und visuelle Konsistenz in einem Produkt zu erhalten. Entwickler lieben sie für die Erstellung von Tailwind-Konfigurationseinträgen oder CSS-Custom-Properties. Sie sind auch für Barrierefreiheits-Audits unerlässlich und helfen Ihnen, Text- und Hintergrundpaare auszuwählen, die WCAG AA oder AAA Anforderungen erfüllen.

Datenschutz und Sicherheit

Dieser Farbton-Generator ist 100% clientseitig. Alle Farbberechnungen erfolgen in Ihrem Browser mit JavaScript. Keine Farben, Paletten oder Exporte werden an einen Server gesendet. Keine Cookies verfolgen Ihre Auswahl, und nichts wird über Ihre aktuelle Sitzung hinaus gespeichert. Sicher für vertrauliche Markenarbeit und interne Designsysteme.

Sicherheit und Datenschutz

Ihre Datensicherheit ist unsere Priorität

Lokale Verarbeitung

Alle Verarbeitung erfolgt in Ihrem Browser

Keine Datenübertragung

Ihre Daten werden nicht an unsere Server gesendet

Keine Datenspeicherung

Es werden keine Daten gespeichert oder geteilt

SSL-Verschlüsselung

SSL-Verschlüsselung für sichere Verbindung

War dieses Werkzeug hilfreich?

Farbton-Generator