Toolosaurus

Farb- & Kontrast-Rechner

HEX, RGB, HSL und CMYK präzise umrechnen sowie WCAG-Kontrastverhältnisse (Barrierefreiheit) prüfen.

UtilityAktualisiert: Oktober 2026
Klicken zum Auswählen
HEX
#4F46E5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
CMYK
cmyk(66%, 69%, 0%, 10%)

WCAG 2.1 Kontrast-Prüfer

Barrierefreiheit nach offiziellen W3C-Richtlinien

Vordergrund:
Hintergrund:
Beispieltext für Kontrast
Dies ist Fließtext in normaler Schriftgröße (16px / Regular).
6.29:1
Kontrastverhältnis
Normaler Text (< 18pt)
AA BestandenAAA Nicht erfüllt
Großer Text (≥ 18pt / Fett)
AA BestandenAAA Bestanden
UI & Grafische Elemente
AA Bestanden
Schritt-für-Schritt

So funktioniert Farb- & Kontrast-Rechner

HEX, RGB, HSL und CMYK präzise umrechnen sowie WCAG-Kontrastverhältnisse (Barrierefreiheit) prüfen.

1

1. Ausgangs-Farbcode oder Farbraum eingeben

Geben Sie Ihren Farbwert in das Eingabefeld ein oder wählen Sie eine Farbe über die interaktive Farbpipette (Color Picker). Das Tool akzeptiert HEX (3-, 6- oder 8-stellig mit Alpha), RGB/RGBA, HSL/HSLA, HSV/HSB, CMYK, CIE-Lab oder CIE-LCh.

2

2. Automatische Farbraum-Erkennung überprüfen

Unser mathematischer Konverter erkennt das Eingabeformat vollautomatisch anhand der Syntaxpräfixe oder Wertbereiche und synchronisiert alle Farbmodelle in Echtzeit im Arbeitsspeicher.

3

3. Farbmodell-Transformationen und Kontraste analysieren

Prüfen Sie die simultan berechneten Zielwerte: moderne CSS Color Module 4 Syntaxen (z. B. lch(), lab(), color(display-p3)), standardisierte Druckfarben in CMYK mit Euroskala-Näherung sowie WCAG-Kontrastwerte.

4

4. Farbwerte mit einem Klick in die Zwischenablage kopieren

Klicken Sie neben dem gewünschten Format (CSS, Figma, Xcode, Android XML) auf das Kopieren-Symbol, um den formatierten Farbcode direkt in Ihr Designsystem oder Ihren Quellcode einzufügen.

Ihre Vorteile & Datensicherheit

Universelle Konvertierung zwischen HEX, RGB, HSL, HSV, CMYK, LAB, LCH und XYZ
Unterstützung für moderne CSS Color Module 4 Syntaxen (oklch, oklab, display-p3)
Präzise 8-stellige Hexadezimal-Codes mit Alphakanal (#RRGGBBAA) und CSS-Transparenz
Mathematisch exakte Farbraumtransformationen unter Berücksichtigung von D65-Weißpunkten
Integrierte WCAG 2.1 Kontrast- und Barrierefreiheitsberechnung für barrierefreies Webdesign
Praktische 1-Klick-Kopierfunktion für CSS, Tailwind CSS, Swift/iOS und Android XML
100 % clientseitige Berechnung im Browser ohne Latenz und mit absolutem Datenschutz

Geprüft & Entwickelt vom Toolosaurus Engineering-Team

DSGVO-konforme Verarbeitung • Strikte browserbasierte Privatsphäre • Hosting in Deutschland

DSGVO-zertifiziertISO 27001 Rechenzentrum
Praxisratgeber & Hintergrundwissen

Alles Wissenswerte zu Farb- & Kontrast-Rechner

Farbmodelle im Vergleich: Additive vs. Subtraktive Farbräume

In der modernen Informations- und Medientechnik existieren fundamentale Unterschiede in der physikalischen Erzeugung von Farben. Bildschirme und digitale Displays emittieren Licht durch additive Farbmischung der Primärfarben Rot, Grün und Blau (RGB). Werden alle drei Lichtkanäle mit maximaler Intensität (255, 255, 255) gebündelt, entsteht reines weißes Licht. Im physischen Druckverfahren hingegen gilt das Prinzip der subtraktiven Farbmischung: Druckfarben in Cyan, Magenta, Gelb und Schwarz (CMYK) absorbieren bestimmte Wellenlängen des einfallenden Umgebungslichts. Je mehr Farbe auf das Papier aufgetragen wird, desto dunkler wirkt das Druckbild. Da der RGB-Farbraum signifikant größer (Wide Gamut) ist als der druckbare CMYK-Farbraum, führt eine unbedachte Farbumrechnung häufig zu matten Druckergebnissen. Unser Farbkonverter nutzt kalibrierte Farbraumtransformationen, um Gamut-Grenzen zu visualisieren und verlässliche Entsprechungen für digitale Interfaces und Print-Erzeugnisse zu ermitteln.

Zylindrische Farbräume: HSL und HSV für intuitives UI-Design

Während RGB-Werte für Maschinen und Grafikkarten optimal sind, fällt es menschlichen Designern schwer, eine Farbe wie Olivgrün intuitiv als Zahlenkombination (128, 128, 0) zu erfassen. Hierfür wurden zylindrische Farbmodelle wie HSL (Hue, Saturation, Lightness) und HSV/HSB (Hue, Saturation, Value/Brightness) entwickelt. Der Farbton (Hue) wird als Winkel auf einem Farbkreis von 0° bis 360° abgetragen – beginnend bei Rot (0°), über Grün (120°) bis Blau (240°). Die Sättigung beschreibt die Reinheit der Farbe gegenüber neutralem Grau. Der entscheidende Unterschied liegt in der dritten Dimension: Während HSL bei 100% Lightness ausnahmslos reines Weiß ausgibt (sodass 50% Helligkeit die intensivste Primärfarbe darstellt), repräsentiert 100% Value in HSV die hellste Nuance der gewählten Farbe, ohne Weiß beizumischen. Unser Tool schlüsselt beide Modelle präzise auf, was die Anlage harmonischer Farbpaletten und Design-Tokens in Figma und CSS enorm erleichtert.

Wahrnehmungsgerechte Farbräume: CIE-Lab, LCh und modernes Oklch in CSS

Klassische Farbräume wie sRGB und HSL leiden unter einem gravierenden Mangel: Sie sind nicht wahrnehmungsgerecht (perceptually uniform). Ein reines Gelb (rgb(255,255,0)) besitzt für das menschliche Auge eine dramatisch höhere wahrgenommene Helligkeit als ein reines Blau (rgb(0,0,255)), obwohl beide im HSL-Modell denselben rechnerischen Helligkeitswert von 50% besitzen. Die Internationale Beleuchtungskommission schuf mit CIE L*a*b* und CIE L*C*h geräteunabhängige Farbräume, die auf der Farbwahrnehmung des menschlichen Sehapparats basieren. Das moderne CSS Color Module Level 4 führt mit oklab() und oklch() eine revolutionäre Weiterentwicklung ein: Farbübergänge wirken organisch ohne schmutzige Grauzonen, und Helligkeitsabstufungen in UI-Themes verhalten sich über alle Farbtöne hinweg konsistent. Unser Konverter stellt Ihnen alle mathematischen Parameter dieser zukunftsweisenden Farbräume in Echtzeit zur Verfügung.

Barrierefreiheit & Kontrastprüfung nach WCAG 2.1 Richtlinien

Die barrierefreie Gestaltung digitaler Produkte ist kein optionales Feature, sondern ein gesetzlicher und ethischer Standard. Nach den Richtlinien der Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) müssen Textinhalte und interaktive Komponenten ein definiertes Mindestkontrastverhältnis gegenüber ihrem Hintergrund aufweisen. Für normalen Fließtext fordert das Konformitätsniveau AA ein Kontrastverhältnis von mindestens 4,5:1, während für Großtext (ab 18pt bzw. 14pt fett) 3,0:1 genügt. Das anspruchsvollere Niveau AAA setzt sogar 7,0:1 voraus. Unser Farbkonverter berechnet simultan zu jeder Farbänderung die relative Luminanz nach ISO-Standard und blendet eine sofortige Konformitätsbewertung für Weiß- und Schwarztext ein. So stellen Sie sicher, dass Ihre Websites auch für Menschen mit Sehschwächen oder bei hellem Sonnenlicht optimal lesbar bleiben.

FAQ

Häufig gestellte Fragen

Themen-Cluster

Passende verwandte Tools

Alle 50 Tools ansehen

ZIP Master

Mehrere Dateien hochladen und als komprimiertes ZIP-Archiv herunterladen.

Öffnen

Smart Converter

Konvertieren Sie Einheiten (Länge, Gewicht, Temp) und aktuelle Wechselkurse.

Öffnen

Sicherer Passwort Generator

Erstellen Sie hochsichere Passwörter mit anpassbaren Regeln, Sonderzeichen und Entropie-Check.

Öffnen

Text Verschlüsselung

Verschlüsseln und dekodieren Sie Texte (Base64, SHA256).

Öffnen