Farbrechner

Ein Farbrechner wandelt Farbwerte um, prüft barrierefreie Kontraste, vergleicht Farbunterschiede, erzeugt Paletten, mischt Farben und erstellt CSS-Verläufe.

In digitalen Projekten treffen mehrere Farbmodelle aufeinander. Ein Styleguide nennt HEX-Werte, ein Designprogramm zeigt HSL oder Lab, moderne CSS-Regeln verwenden OKLCh und eine Druckerei fragt nach CMYK. Der Rechner verbindet diese Aufgaben und macht zugleich deutlich, wo eine mathematische Umrechnung keine verbindliche Farbwiedergabe garantieren kann.

Funktionen des Farbrechners

• Umrechnung zwischen HEX, RGB, HSL, HSV, HWB und CMYK;
• Berechnung von CIE XYZ, Lab und LCh mit D65-Weißpunkt;
• Konvertierung zu OKLab und OKLCh;
• Alpha-Transparenz und Live-Vorschau;
• Prüfung des sRGB-Farbumfangs;
• Farbvergleich mit Delta E 76 und Delta E 2000;
• WCAG-Kontrast für normalen und großen Text;
• Empfehlung für schwarze oder weiße Schrift;
• Erzeugung verschiedener Farbharmonien;
• Mischung in sRGB, linearem RGB und OKLab;
• lineare, radiale und konische CSS-Verläufe;
• CSV-Export.

HEX und RGB codieren sRGB-Kanäle

HEX schreibt Rot, Grün und Blau als hexadezimale Werte. Bei #5869FF stehen 58, 69 und FF für die drei Kanäle. Dezimal entspricht das:

#5869FF = rgb(88, 105, 255).

Ein achtstelliger HEX-Wert ergänzt einen Alpha-Kanal. Die Endung 80 in #5869FF80 steht ungefähr für 50% Deckkraft. Erst die Mischung mit dem Hintergrund erzeugt die sichtbare Farbe.

HSL, HSV und HWB steuern Farbe unterschiedlich

HSL trennt Farbton, Sättigung und Helligkeit. Das Modell eignet sich für schnelle Varianten, doch identische HSL-Helligkeit bedeutet nicht identische wahrgenommene Helligkeit. Gelb kann deutlich heller erscheinen als Blau, obwohl beide denselben L-Wert besitzen.

HSV oder HSB verwendet Farbton, Sättigung und Wert. Viele Farbwähler nutzen dieses Modell. HWB beschreibt einen Farbton zusammen mit Weiß- und Schwarzanteil.

CMYK ohne ICC-Profil bleibt eine Näherung

CMYK beschreibt Cyan, Magenta, Gelb und Schwarz. Eine einfache Formel kann einen orientierenden Wert liefern, kennt aber weder Druckmaschine noch Papier, Farbe oder Wiedergabeabsicht.

Professionelles Farbmanagement nutzt ICC-Profile. Sie beschreiben das Verhalten von Eingabe-, Anzeige- und Ausgabegeräten und ermöglichen die Umrechnung über einen geräteunabhängigen Verbindungsfarbraum.

Der CMYK-Wert des Rechners eignet sich für Planung und Kommunikation. Für druckfertige Separationen müssen die Vorgaben der Druckerei, das passende ICC-Profil und ein Proof verwendet werden.

CIE XYZ bildet eine neutrale Umrechnungsbasis

CIE XYZ dient als geräteunabhängige Referenz für zahlreiche Konvertierungen. Der Rechner dekodiert zunächst die sRGB-Gammakurve in lineares RGB und wendet danach die sRGB-zu-XYZ-Matrix an.

Als Referenzweiß verwendet er D65, das auch sRGB zugrunde liegt. Die Y-Komponente hängt mit der Leuchtdichte zusammen, während X und Z die chromatische Beschreibung ergänzen.

Lab und LCh unterstützen den Farbvergleich

CIE Lab verwendet L für Helligkeit sowie a und b für Gegenfarbachsen. LCh beschreibt dieselbe Farbe polar:

Chroma = √(a² + b²).

Farbton = atan2(b, a).

Die CSS-Color-Spezifikation des W3C enthält Lab und LCh und dokumentiert die Umrechnung zwischen beiden Darstellungen. Lab bildet sichtbare Unterschiede besser ab als ein einfacher Abstand zwischen RGB-Kanälen, bleibt jedoch nicht vollkommen gleichabständig.

OKLab und OKLCh eignen sich für digitale Paletten

OKLab wurde für wahrnehmungsnähere Operationen wie Interpolation und Helligkeitsänderung entwickelt. OKLCh verwendet Helligkeit, Chroma und Farbtonwinkel. Das W3C führt beide Modelle im CSS Color Module Level 4 auf.

Eine Änderung der OKLCh-Helligkeit wirkt häufig gleichmäßiger als eine vergleichbare HSL-Änderung. Hohe Chroma-Werte können allerdings außerhalb von sRGB liegen. Der Rechner erkennt diesen Fall und begrenzt die Vorschau auf darstellbare Kanalwerte.

Bedeutung einer Gamut-Warnung

Ein Farbraum kann nur einen bestimmten Farbumfang darstellen. Lab und OKLCh beschreiben Farben, die außerhalb von sRGB liegen. Bei der Rückrechnung entstehen dann lineare RGB-Kanäle unter null oder über eins.

Die Vorschau begrenzt solche Kanäle. Dieses Clipping verhindert ungültige CSS-Werte, kann aber Farbton, Chroma oder Helligkeit verändern. Anspruchsvolle Workflows verwenden deshalb ein gezieltes Gamut Mapping.

Farbunterschied mit Delta E messen

Delta E quantifiziert den Abstand zweier Farben. Delta E 76 berechnet den euklidischen Abstand in Lab:

ΔE76 = √((ΔL)² + (Δa)² + (Δb)²).

Delta E 2000 korrigiert Wechselwirkungen zwischen Helligkeit, Chroma und Farbton. Die Formel passt in vielen Bereichen besser zur menschlichen Wahrnehmung.

Ein universeller Grenzwert existiert nicht. Kleine Werte können bei Webdesign kaum auffallen, während Druck, Lack, Textil oder Qualitätssicherung strengere und branchenspezifische Toleranzen verlangen.

WCAG-Kontrast basiert auf relativer Leuchtdichte

Der Rechner verwendet die WCAG-Formel:

Kontrast = (hellere Leuchtdichte + 0,05) ÷ (dunklere Leuchtdichte + 0,05).

WCAG 2.2 verlangt für normalen Text mindestens 4,5:1 auf Stufe AA und 7:1 auf AAA. Großer Text benötigt 3:1 beziehungsweise 4,5:1. Als groß gilt Text ab 18 Punkt oder ab 14 Punkt bei Fettschrift; im Web werden häufig 24 CSS-Pixel oder etwa 18,66 Pixel fett verwendet.

Halbtransparente Schrift wird vor der Messung mit dem Hintergrund verrechnet. Der Rechner vergleicht außerdem Schwarz und Weiß und sucht eine hellere oder dunklere Variante, die das gewünschte Niveau erreicht.

Farbe darf Informationen nicht allein vermitteln

Guter Kontrast löst nicht jedes Barrierefreiheitsproblem. WCAG fordert zusätzlich, dass Farbe nicht die einzige Methode zur Informationsvermittlung bleibt.

Fehler und Erfolg sollten deshalb nicht ausschließlich Rot und Grün verwenden. Text, Symbole, Muster oder unterschiedliche Formen geben zusätzliche Orientierung.

So entstehen mathematische Farbharmonien

• Komplementär: ungefähr 180 Grad Abstand;
• Analog: benachbarte Farbtöne;
• Triadisch: ungefähr 120 Grad Abstand;
• Geteilt komplementär: Grundfarbe plus zwei Nachbarn des Gegenfarbtons;
• Tetradisch und quadratisch: vier Positionen im Farbkreis;
• Monochromatisch: ein Farbton mit variierter Helligkeit oder Sättigung;
• Shades, Tints und Tones: Mischung mit Schwarz, Weiß oder Grau.

Eine geometrisch korrekte Harmonie ist noch kein fertiges Designsystem. Rollen, Hierarchie, Kontrast, Fokus-, Hover-, Fehler- und Disabled-Zustände müssen separat definiert werden.

Warum unterschiedliche Mischräume andere Farben ergeben

Direktes sRGB-Mischen mittelt gammacodierte Kanäle. Lineares RGB dekodiert zunächst die Gammakurve, mischt Lichtwerte und codiert anschließend zurück. Der Mittelpunkt erscheint deshalb häufig heller.

OKLab interpoliert wahrnehmungsbezogene Koordinaten und kann gleichmäßigere digitale Übergänge erzeugen. Das Modell simuliert jedoch weder Farbpigmente noch einen physikalischen Lichtmischer.

CSS-Verläufe mit Farbstopps erstellen

Der Verlaufsmodus erzeugt lineare, radiale und konische Gradients. Jeder Farbstopp erhält eine Farbe und eine Position zwischen 0% und 100%. Lineare und konische Verläufe verwenden zusätzlich einen Winkel.

Der Rechner zeigt eine Vorschau und liefert die vollständige CSS-Deklaration. Auf großen Flächen können Displays mit geringer Farbtiefe oder komprimierte Bilder trotzdem sichtbare Abstufungen zeigen.

Praxisbeispiel: Markenfarbe als Webpalette aufbauen

Eine Marke verwendet als Primärfarbe #5869FF. Der Rechner wandelt den Wert zunächst in RGB, Lab und OKLCh um. Anschließend erzeugt der Nutzer mehrere hellere und dunklere OKLCh-Varianten für Flächen, Rahmen, Hover-Zustände und Text.

Jede Variante wird gegen Weiß, Schwarz und die vorgesehenen Hintergrundfarben geprüft. Eine helle Variante kann sich gut als Fläche eignen, während derselbe Farbton für kleinen Text zu wenig Kontrast bietet. Der Rechner hilft dabei, Rollen nach Messwerten statt nur nach optischem Eindruck zu verteilen.

Liegt eine Variante außerhalb von sRGB, wird Chroma schrittweise reduziert. So bleibt der Farbcharakter möglichst erhalten, während Browser den Wert zuverlässig darstellen können.

Praxisbeispiel: Zwei ähnliche Farben vergleichen

Ein bestehendes Logo nutzt einen gemessenen Lab-Wert, während das neue Webdesign einen HEX-Wert enthält. Die Umrechnung beider Farben in Lab ermöglicht einen Delta-E-Vergleich. Delta E 76 liefert einen einfachen geometrischen Abstand; Delta E 2000 berücksichtigt wahrnehmungsbezogene Korrekturen.

Der Messwert allein entscheidet nicht über die Freigabe. Die verantwortliche Person sollte zusätzlich das Ausgabemedium, das Profil, die Beleuchtung und die zulässige Markentoleranz kennen. Ein Bildschirmvergleich ersetzt keine verbindliche Druckabnahme.

Kontrast für komplette Komponenten prüfen

Text ist nur ein Teil einer Benutzeroberfläche. Eingabefeld-Rahmen, Fokusmarkierungen, Diagrammlinien und wichtige Symbole benötigen ebenfalls ausreichenden Kontrast. WCAG nennt für relevante grafische Objekte und Zustände häufig ein Mindestverhältnis von 3:1 zum angrenzenden Hintergrund.

Ein Button kann daher lesbaren Text besitzen und trotzdem schwer erkennbar sein, wenn seine Kontur mit der Umgebung verschmilzt. Prüfen Sie Text, Rand, Fokuszustand und Statussymbol getrennt.

Typische Fehler

• HSL-Helligkeit mit wahrgenommener Helligkeit gleichsetzen;
• RGB-Abstand statt einer geeigneten Delta-E-Formel verwenden;
• Kontrast ohne tatsächlichen Hintergrund prüfen;
• Alpha-Transparenz ignorieren;
• jede Lab- oder OKLCh-Farbe als sRGB-kompatibel behandeln;
• generische CMYK-Werte direkt an die Druckmaschine geben;
• nur Grundfarben und keine UI-Zustände testen;
• Status ausschließlich über Farbton ausdrücken;
• identische Anzeige auf allen Monitoren erwarten.

Ergebnis fachlich kontrollieren

Webfarben sollten im endgültigen CSS, in den Zielbrowsern und auf den realen Hintergründen geprüft werden. Fokus, Hover, Disabled, Fehler und andere Zustände benötigen eigene Tests.

Für Druck und Markenfarben gehören kalibrierter Monitor, korrektes ICC-Profil und Proof zum Workflow. Beim Austausch von Lab- oder XYZ-Werten sollten Farbraum und Weißpunkt immer mitgeliefert werden.

Häufig gestellte Fragen

Offizielle technische Quellen

• W3C CSS Color Module Level 4
• W3C Web Content Accessibility Guidelines 2.2
• W3C-Technik G18 für Textkontrast
• W3C-Erläuterung zum Nicht-Text-Kontrast
• W3C-Erläuterung zur Verwendung von Farbe
• International Color Consortium: ICC-Profilformat

Quellen geprüft: 21. Juni 2026.