Farben für das Web auswählen und umrechnen
Übersetzen Sie jede Farbe zwischen HEX, RGB, HSL und OKLCH; erstellen Sie barrierearme Kontrastpaare; exportieren Sie eine Palette, auf die Ihr Designsystem bauen kann.
Weitere Utilities, die gut zu dieser Anleitung passen:
Warum das wichtig ist
Eine Designerin übergibt der Entwicklung eine Figma-Datei mit #5B2A6F. Die Farbe landet in einer CSS-Variable. Zwei Wochen später meldet QA: Der Call-to-Action-Button erfüllt WCAG AA auf dem gedämpften Hintergrund nicht. Die Lösung ist oft eine kleine HSL-Anpassung bei der Helligkeit — aber ohne Zahlen sehen Sie nicht, ob der Kontrast über 4,5:1 steigt. Ein Farb-Tool mit allen Modellen und Kontrastbewertung schließt die Lücke zwischen „sieht gut aus“ und „besteht das Audit“.
Drei echte Szenarien
Vorder- und Hintergrundfarbe einfügen, Kontrastverhältnis lesen, Helligkeit so lange anpassen, bis ≥ 4,5.
Barrierearme Oberfläche
Von der Markenfarbe ausgehen und hellere/dunklere Stufen in OKLCH erzeugen — für perceptiv gleichmäßige Töne.
Einheitliche Abstufungen
Pantone-Referenz nach RGB umsetzen und in HSL verfeinern, bis der Bildschirm zur gedruckten Probe passt.
On-brand Kampagne
Schritt für Schritt
Öffnen Sie den Farbeditor.
Farbe wählen oder einfügen
Klicken Sie auf die Farbfläche und nutzen Sie den Picker, oder fügen Sie eines von
#5B2A6F,rgb(91 42 111),hsl(280 45% 30%),oklch(35.5% 0.12 304)ein.Alle Modelle lesen
Nebeneinander: HEX, RGB, HSL, HSV, OKLCH. Bearbeiten Sie ein beliebiges Feld — die anderen folgen.
Kontrastpaar aufbauen
Zweite Farbe in den Hintergrund-Slot. Das Kontrastverhältnis erscheint mit WCAG-AA-/AAA-Hinweisen.
Varianten erzeugen
Mit dem OKLCH-Picker die Helligkeit schrittweise ändern, Ton und Chroma konstant halten — sauber für Design-Tokens.
Exportieren
Kopieren als CSS, Sass, JSON oder Design-Token-Format.
HEX
#5B2A6FAndere Modelle
RGB: rgb(91, 42, 111)
HSL: hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)
Profi-Tipps
- OKLCH für Design-Tokens. Helligkeit in HSL zu ändern ergibt perceptiv ungleiche Schritte; OKLCH kommt der menschlichen Helligkeitsempfindung näher.
- Dem Monitor beim Druck nicht blind vertrauen. Für Pantone oder CMYK brauchen Sie kalibrierte Displays.
- Dark-Mode-Paare: Helligkeit in OKLCH spiegeln und Chroma etwas dämpfen, um Augenstress zu vermeiden.
- HEX und perceptuelle Werte dokumentieren. Ihre Nachfolgerinnen werden es Ihnen danken.
Typische Stolpersteine
Stolperstein
Gleicher HEX, anderes Erscheinungsbild auf Handy und Laptop
Verschiedene Farbräume (sRGB vs. Display P3) und Helligkeitseinstellungen verändern den Eindruck. Kennzeichnen Sie P3-Farben explizit mit color(display-p3 ...).
Stolperstein
Kontrast-Tool sagt „fail“, optisch wirkt es okay
Das Kontrastverhältnis ist eine mathematische Maßzahl; der optische Kontrast hängt vom Kontext ab. Die Mathematik ist Basis für Audit und Recht; streben Sie für Fließtext wo möglich mehr als 4,5:1 an.
Stolperstein
Farben driftieren zwischen Komponenten
Definieren Sie das kanonische Token einmal und referenzieren Sie es überall. Varianten sollten abgeleitet werden (oklch(from var(--brand) calc(l + 0.1) c h)), nicht neu getippt.
Wann dieses Tool nicht passt
- Print-Color-Management — Adobe mit kalibriertem Workflow.
- Massen-Analyse von Bildfarben — Skript mit z. B.
chroma.jsoderculori. - Farbenblind-Simulation — Spezialtools (z. B. axe DevTools) simulieren Deuteranomalie/Protanomalie über einfache Ratios hinaus.
FAQ
Was ist der Unterschied zwischen HSL und OKLCH?
HSL ist perceptiv nicht gleichmäßig: eine Hue-Verschiebung um 10° kann je nach Helligkeit völlig anders wirken. OKLCH (Polarkoordinaten von OKLab) korrigiert das für vorhersagbarere Anpassungen.
Unterstützt das Tool CSS Color 5?
Ja — color-mix() und oklch(from ...) in modernen Browsern. Das Tool liefert Werte passend zur gewählten Browser-Feature-Kombination.
Werden meine Farben gespeichert?
Nein. Alles bleibt lokal; in die Zwischenablage kopieren ist optional.
Nächste Schritte
- Prüfen Sie gewählte Farben gegen die Gesamtpalette eines Bildes mit dem Bildkonverter.
- Exportieren Sie Favicon oder Logo mit dem SVG-zu-PNG-Konverter.
- Bildfarben für eingebettete Use Cases über Bild zu Base64 aufbereiten.