Encoders & Utilities

Farb-Konverter & WCAG-Kontrast

HEX ↔ RGB ↔ HSL umrechnen mit Palette und WCAG-Kontrast-Check.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

Über dieses Tool

Color Converter wandelt Farben zwischen den gängigen Webformaten um: HEX (#3B82F6), RGB (rgb(59 130 246)), RGBA mit Alpha, HSL (hsl(217 91% 60%)), HSLA, HWB, CMYK und benannte CSS-Farben. Sie geben eine Farbe in einem Format ein, alle anderen werden parallel aktualisiert. Eine Live-Vorschau zeigt die Farbe als Block.

Zusätzlich liefert das Tool kontextbezogene Informationen: Helligkeit (für Lesbarkeit auf Hintergrund), passende Komplementär- und Analog-Farben, eine Palette aus 5 Tönen, die WCAG-Kontrast-Bewertung gegen Weiß und Schwarz (für Barrierefreiheit), und die nächstgelegene CSS-benannte Farbe. Ein Color-Picker zum Klicken ergänzt die manuelle Eingabe.

Wann Sie dieses Tool nutzen sollten

Design-Token-Konvertierung. Ein Figma-HEX-Wert in HSL für CSS-Variablen umrechnen.
Barrierefreiheit prüfen. Hat Text auf farbigem Hintergrund ausreichenden Kontrast (WCAG AA: 4,5:1, AAA: 7:1)?
Palette-Erkundung. Aus einer Grundfarbe verwandte Töne generieren.
Cross-Tool-Übertragung. Photoshop-CMYK in Browser-RGB übersetzen (mit Vorbehalt — sRGB ≠ CMYK).

Farbraum-Hinweise

RGB und HEX sind dieselbe sRGB-Welt, nur unterschiedlich notiert. HSL ist intuitiver für Menschen (Hue/Saturation/Lightness), aber als gleicher sRGB-Raum dargestellt — keine wahrgenommene Helligkeit. CMYK ist Druck-spezifisch (subtraktiv, Cyan/Magenta/Yellow/Key) und nur eine Näherung — exakte CMYK-Werte hängen vom Drucker, Papier und ICC-Profil ab. Für seriöse Druck-Workflows nutzen Sie ein Tool mit ICC-Color-Management.

Häufige Fragen

Warum unterscheiden sich HEX und RGB nicht im Ergebnis?

Weil sie dieselbe Farbe in zwei Notationen darstellen. HEX #3B82F6 ist exakt rgb(59 130 246) — je zwei Hex-Stellen sind ein Byte (0–255) für R, G, B. Modern bevorzugen viele HEX, weil es kompakter ist; RGB liefert Klarheit über die Werte. Bei RGBA mit Alpha schreibt man rgba(...,0.5) oder als 8-stelliges HEX #3B82F680.

Was ist HSL besser?

HSL trennt Farbton (Hue, 0–360°), Sättigung (Saturation, 0–100%) und Helligkeit (Lightness, 0–100%). Das ist intuitiver für Menschen: "etwas dunkler, etwas weniger gesättigt" ist in HSL eine Wert-Änderung pro Achse, in RGB müssen Sie alle drei Kanäle anpassen. Für Design-Systeme mit vielen Schattierungen einer Grundfarbe ist HSL klar überlegen. Im Resultat ist die Farbe dieselbe wie in RGB.

Wie wird der Kontrast berechnet?

Nach WCAG 2.x: relativer Luminanzunterschied zweier Farben. Wir berechnen die relative Luminanz beider (gewichtetes Mittel der linearen RGB-Komponenten) und das Verhältnis (hell:dunkel + 0.05) / (dunkel:hell + 0.05). WCAG AA für normalen Text verlangt ≥ 4.5:1, AAA ≥ 7:1; für großen Text (18pt+ oder 14pt+ bold) reichen 3:1 (AA) bzw. 4.5:1 (AAA).

Funktioniert das mit P3- oder anderen erweiterten Farbräumen?

Aktuell rechnen wir in sRGB — dem für Web universellen Farbraum. P3, Rec.2020 oder andere wide-gamut-Räume werden nicht direkt unterstützt; CSS-Color-4-Notation (color(display-p3 ...)) ist auf der Roadmap. Für Print-Farbmanagement nutzen Sie Adobe-Tools oder ICC-aware Bildbearbeiter.