Farb-Editor
Passe Farben präzise an. Ändere Farbton, Sättigung und Helligkeit, erstelle Farbabstufungen und überprüfe den Barrierefreiheitskontrast für Texte.
Über dieses Tool
Der Farb-Editor ist ein vollständiges Werkzeug zum präzisen Anpassen und Verfeinern beliebiger Farben. Gib eine Farbe als HEX, RGB, HSL oder sogar als Namen ein und nutze die Regler für Farbton (die Farbnuance), Sättigung (die Farbintensität) und Helligkeit (wie hell oder dunkel die Farbe ist). Änderungen werden in Echtzeit übernommen, sodass du das Ergebnis sofort siehst und die Lesbarkeit mit hellem und dunklem Text prüfen kannst. Außerdem wandelt das Tool die Farbe automatisch in die gängigsten Formate für Webdesign und -entwicklung um, darunter HEX, RGB, HSL, HSV und OKLCH.
Funktionen
Wofür Du den Farb-Editor Nutzen Kannst
- Konsistente Paletten für Design-Systeme, Komponenten und Web-Interfaces erstellen
- Prüfen, ob Farbkombinationen die WCAG- und APCA-Barrierefreiheitskriterien erfüllen, bevor sie veröffentlicht werden
- Markenfarben für verschiedene Kontexte anpassen, z. B. Dark Mode, Hover- und deaktivierte Zustände
- Farbskalen im Tailwind-Stil generieren und als CSS-Variablen oder Design-Tokens exportieren
- Farben zwischen HEX, RGB, HSL und OKLCH konvertieren, wenn verschiedene Design- und Entwicklungstools kombiniert werden
So Verwendest Du den Farb-Editor
Grundfarbe eingeben
Gib einen beliebigen HEX-Wert, RGB, HSL oder einen Farbnamen in das Feld Grundfarbe ein. Das Tool lädt die Farbe automatisch und konvertiert sie in alle verfügbaren Formate
Mit den Reglern anpassen
Nutze die Regler für Farbton, Sättigung und Helligkeit, um die Farbe in Echtzeit zu verändern. Alle Ausgaben und die Farbskala werden sofort aktualisiert
Kontrast prüfen
Der Barrierefreiheitsbereich zeigt das Kontrastverhältnis mit weißem und schwarzem Text nach WCAG 2.1 und APCA und gibt an, ob die Kombination die Kriterien erfüllt oder nicht
Werte kopieren
Klicke auf einen Formatblock (RGB, HSL, HSV, OKLCH), um den Wert direkt zu kopieren. Der HEX-Wert wird in der Hauptvorschau angezeigt
Farbskala exportieren
Wähle im Bereich Tints & Shades das Exportformat (CSS, SCSS, JSON, Tailwind) und das Farbformat (HEX, RGB, HSL oder OKLCH). Klicke auf Kopieren, um es in deinem Projekt zu verwenden
Häufig Gestellte Fragen
WCAG 2.1 verwendet eine einfache mathematische Formel zur Berechnung des Kontrasts zwischen Farben. APCA (Accessible Perceptual Contrast Algorithm) ist ein moderneres Modell, das berücksichtigt, wie das menschliche Auge Helligkeit in verschiedenen Lesekontexten wahrnimmt. Für normalen Fließtext gilt ein APCA-Wert von 60 oder mehr als ausreichend.
Wähle das Tailwind-Exportformat und das gewünschte Farbformat. Der generierte Code kann direkt in tailwind.config.js oder als CSS Custom Properties eingefügt werden. Bei Verwendung von OKLCH ist er nativ mit Tailwind 4 kompatibel.
OKLCH ist ein wahrnehmungsgleichmäßiger Farbraum — das bedeutet, dass Änderungen an Helligkeit oder Chroma visuell vorhersehbare Ergebnisse liefern. Es ist das Format, das intern von Tailwind 4 und CSS Color Level 4 verwendet wird, und eignet sich ideal für die Generierung gleichmäßigerer Farbskalen als HSL.