Farbumrechner
Konvertieren Sie Farben in Echtzeit zwischen HEX, RGB, HSL, CMYK und CIE LAB. Inklusive WCAG 2.1 Kontrastprüfung, Druck-Farbraum-Warnung und Simulator für Farbfehlsichtigkeiten.
Online-Werkzeuge#3B82F6
Erkennung additiver RGB-Leuchtstofffarben außerhalb des Farbraums, die im subtraktiven Vierfarbdruck nicht darstellbar sind.
Echtzeit-Berechnung der relativen Leuchtdichte und Lesbarkeitsprüfung gegen reines Weiß und Schwarz.
Design-Systeme & Digitale Typografie
Hohe visuelle Kontrastklarheit für digitale Oberflächen, Software-Design-Systeme und barrierefreie Benutzererlebnisse.
Design-Systeme & Digitale Typografie
Hohe visuelle Kontrastklarheit für digitale Oberflächen, Software-Design-Systeme und barrierefreie Benutzererlebnisse.
Wissenschaftlich modellierte Wahrnehmungsmatrizen (Brettel / Machado) für angeborene Farbsehschwächen.
Trichromasie (Normale Sicht)
Standardmäßige menschliche Farbwahrnehmung im gesamten sichtbaren Lichtspektrum
Protanopie (Rotblindheit)
L-Zapfen-Defekt; verringerte Empfindlichkeit für lange rote Wellenlängen (~1% der Männer)
Deuteranopie (Grünblindheit)
M-Zapfen-Defekt; Grünschwäche, häufigste Farbfehlsichtigkeit (~5% der Männer)
Tritanopie (Blaublindheit)
S-Zapfen-Defekt; Blau-Gelb-Verwechslung, seltene Fehlsichtigkeit (~0,01% der Bevölkerung)
Achromatopsie (Monochromie)
Vollständiges Fehlen der Zapfenfunktion; reines Graustufensehen (~0,003% der Bevölkerung)
Sofortige bidirektionale mathematische Synchronisation über 7 Industriestandard-Farbformate.
Harmonische UI-Farbtöne durch mathematische Variation der Helligkeit bei gleichbleibendem Farbton und Sättigung.
Direkt einfügbare Design-System-Tokens und Quellcode-Definitionen.
// Tailwind CSS beliebige Farbklassen <div className="bg-[#3b82f6] text-white border-[#3b82f6]" />
Bedienungsanleitung: Farbumrechner & Barrierefreiheits-Studio (Schritt für Schritt)
Beherrschen Sie Farbraumkonvertierungen, WCAG 2.1-Kontrastprüfungen, Druck-Farbräume und Entwickler-Token.
Farbe eingeben oder Omni-Paste nutzen
Geben oder fügen Sie ein beliebiges Farbformat in das intelligente Suchfeld ein – ob HEX (#3b82f6), RGB, HSL, HSV, CMYK, CIE LAB oder CSS-Farbnamen wie 'coral' oder 'indigo'. Die Engine erkennt das Format automatisch und synchronisiert alle Farbräume sofort.
Farbkanäle mit interaktiven Schiebereglern anpassen
Verfeinern Sie Farbkanäle in Echtzeit über Schieberegler für Rot, Grün, Blau, Alpha, Farbton (Hue), Sättigung, Helligkeit oder CMYK-Druckfarben. Nutzen Sie die 5-Stufen-Monochrom-Palette für konsistente Helligkeitsabstufungen in Benutzeroberflächen.
WCAG 2.1-Barrierefreiheit & Kontrastverhältnis prüfen
Der integrierte Kontrast-Auditor testet Kontrastwerte auf weißem und schwarzem Hintergrund. Stellen Sie sicher, dass Ihre Texte die Konformitätsstufen AA (mindestens 4,5:1 für Fließtext, 3:1 für großen Text) und AAA (7:1) zuverlässig erfüllen.
Druck-Farbraum (CMYK-Gamut) kontrollieren
Prüfen Sie, ob stark gesättigte Bildschirmfarben im physischen CMYK-Offsetdruck reproduzierbar sind. Bei einer Gamut-Warnung genügt ein Klick auf 'Auf Druckfarbraum begrenzen', um eine druckbare Näherung ohne Abriss zu erhalten.
Farbsinnstörungen (Farbenblindheit) simulieren
Testen Sie, wie Ihre gewählte Farbe für Menschen mit Protanopie (Rotblindheit), Deuteranopie (Grünblindheit), Tritanopie (Blaublindheit) oder Achromatopsie (vollständige Farbenblindheit) erscheint, um ein inklusives Design zu gewährleisten.
Entwickler-Code und Design-Tokens exportieren
Kopieren Sie die berechneten Farbwerte mit einem Klick oder übernehmen Sie fertige Code-Snippets für Tailwind CSS, CSS-Variablen (:root), SwiftUI (iOS) oder Jetpack Compose (Android).
Häufig gestellte Fragen (FAQ)
Technische Antworten zu Farbtheorie, digitalen Farbräumen, Barrierefreiheit und Drucktechnik.
Q:Was ist der Unterschied zwischen RGB, HSL und CMYK?
RGB ist ein additives Farbmodell für digitale Bildschirme, das rotes, grünes und blaues Licht im Wertebereich 0 bis 255 kombiniert. HSL beschreibt Farben intuitiv über Farbton (Hue 0–360°), Sättigung (Saturation 0–100 %) und Helligkeit (Lightness 0–100 %), was UI-Anpassungen vereinfacht. CMYK ist ein subtraktives Druckmodell aus Cyan, Magenta, Gelb und Schwarz; da Druckfarben Licht reflektieren und absorbieren, ist der CMYK-Farbraum kleiner als RGB.
Q:Welche Kontrastanforderungen gelten für WCAG 2.1 Stufe AA und AAA?
Die Web Content Accessibility Guidelines (WCAG 2.1) fordern Mindestkontraste zwischen Schrift und Hintergrund zur Gewährleistung barrierefreier Lesbarkeit. Stufe AA verlangt ein Verhältnis von mindestens 4,5:1 für regulären Fließtext sowie 3:1 für großen Text (ab 18pt bzw. 14pt fett) und UI-Elemente. Stufe AAA erfordert einen erweiterten Kontrast von 7:1 für Standardtext und 4,5:1 für großen Text.
Q:Warum wirken leuchtende Bildschirmfarben im Druck oft stumpf oder verfälscht?
Digitale Monitore emittieren Licht im sRGB- oder DCI-P3-Spektrum und können grelle Neon-Töne, intensive Blautöne und leuchtende Violetttöne darstellen. Papier absorbiert Umgebungslicht, und standardisierte CMYK-Druckfarben können diese extremen Sättigungen physikalisch nicht wiedergeben. Unser Werkzeug warnt vor Farbraumüberschreitungen und berechnet den nächstgelegenen druckbaren Näherungswert.
Q:Was ist der CIE LAB-Farbraum und warum ist er wichtig?
CIE L*a*b* ist ein geräteunabhängiger, wahrnehmungsgerechter Farbraum der Internationalen Beleuchtungskommission. 'L' definiert die wahrgenommene Helligkeit (0–100), 'a' die Grün-Rot-Achse und 'b' die Blau-Gelb-Achse. Im Gegensatz zu RGB oder HEX entspricht ein mathematischer Abstand im LAB-Farbraum exakt dem vom menschlichen Auge wahrgenommenen Farbunterschied, was ihn ideal für Farbabstimmungen macht.
Q:Wie funktioniert der Simulator für Farbenblindheit?
Der Simulator verwendet mathematische Transformationsmatrizen auf Basis physiologischer Rezeptormodelle: Protanopie (Fehlen von L-Zapfen für Rot), Deuteranopie (Fehlen von M-Zapfen für Grün), Tritanopie (Fehlen von S-Zapfen für Blau) und Achromatopsie (vollständiges Fehlen der Farbzapfen). Er transformiert Ihre Farbe in das exakte visuelle Erlebnis der Betroffenen, um Barrieren in Benutzeroberflächen zu vermeiden.
Q:Was ist die relative Luminanz und wie berechnet sich das Kontrastverhältnis?
Die relative Luminanz (Y) bezeichnet die wahrgenommene Helligkeit einer Farbe normiert zwischen 0 (Schwarz) und 1 (Weiß), berechnet nach der sRGB-Formel: Y = 0,2126·R_lin + 0,7152·G_lin + 0,0722·B_lin. Das WCAG-Kontrastverhältnis zweier Farben errechnet sich als (L1 + 0,05) / (L2 + 0,05), wobei L1 die Luminanz der helleren und L2 die Luminanz der dunkleren Farbe darstellt.
Q:Werden meine Farbwerte oder Paletten an externe Server übertragen?
Nein. Sämtliche Berechnungen, Farbraumtransformationen, WCAG-Audits und Code-Generierungen finden zu 100 % lokal in Ihrem Browser statt. Es werden zu keinem Zeitpunkt Daten über das Netzwerk gesendet oder auf Servern gespeichert.
Was ist Farbumrechner?
Häufige Fehler vermeiden: Das Print-Gamut-Szenario
Technische Spezifikationen im Überblick
| Modul | Funktion | Anwendung in der Praxis |
|---|---|---|
| CIE LAB Farbraum | Geräteunabhängiger, wahrnehmungsorientierter Farbraum. | Ideal für die exakte Farbabstimmung zwischen verschiedenen Monitoren und Druckern. |
| Farbfehlsichtigkeits-Simulator | Modelliert Wahrnehmungsmatrizen für erbliche Sehschwächen. | Stellt sicher, dass Designs auch für Menschen mit Deuteranopie (Grünblindheit) lesbar bleiben. |
| Entwickler-Snippets | Bereitstellung von kopierbarem Code für verschiedene Plattformen. | Direkter Export von Farbklassen für Tailwind CSS oder SwiftUI. |