Farbton-Generator
Erstellen Sie eine vollständige Farbpalette mit Tönungen, Schattierungen und WCAG-Kontrastwerten
Farbton-Generator
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
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.
Farbtheorie für Webdesign - Töne und WCAG-Kontrast
Meistern Sie Farbtheorie, Töne, WCAG-Standards und den Aufbau einer Design-System-Palette.