Farbraum-Gamut-Mapping: Konvertierung zwischen Farbräumen

Wenn Sie einen lebhaften Sonnenuntergang mit einer professionellen Kamera fotografieren und es in einem Webbrowser öffnen, geht etwas verloren. Die tiefen, gesättigten Orangetöne und Violetttöne, die der Wide-Gamut-Sensor der Kamera aufgezeichnet hat, können nicht exakt auf jedem Display reproduziert werden – und selbst wenn sie es können, überleben die Farben möglicherweise die Konvertierung in ein websicheres Format nicht. Dieser Prozess der Anpassung von Farben, die in einem Farbraum existieren, damit sie in die Grenzen eines anderen passen, wird Gamut-Mapping genannt. Es ist eine der am wenigsten sichtbaren, aber folgenreichsten Operationen in der gesamten digitalen Farbpipeline, und sie zu verstehen ist für jeden wichtig, dem Farbgenauigkeit vom Design bis zur Produktion wichtig ist.

Was ist Gamut-Mapping?

Eine Farbraum-Gamut ist der vollständige Bereich von Farben, den ein bestimmtes Gerät, Format oder Farbraum darstellen kann. Jeder Gamut hat Grenzen – Farben, die innerhalb dieser Grenzen fallen, können exakt dargestellt werden; Farben außerhalb nicht.

Verschiedene Geräte und Farbräume haben unterschiedliche Gamuts:

Wenn Sie eine Farbe von einem größeren Gamut in einen kleineren bewegen, können einige Farben außerhalb des Ziel-Gamuts fallen. Diese werden Out-of-Gamut-Farben genannt. Gamut-Mapping ist der Prozess, zu entscheiden, was mit ihnen zu tun ist.

Das Umgekehrte – von einem kleineren Gamut in einen größeren zu wechseln – ist im Allgemeinen verlustfrei, da alle Quellfarben in das Ziel passen. Eine sRGB-Datei auf einem Display-P3-Monitor angezeigt verwendet einfach eine Teilmenge des Monitorbereichs. Kein Gamut-Mapping erforderlich.

Das Problem der Out-of-Gamut-Farben

Betrachten Sie ein lebhaftes Cyan: #00FFFF (#00FFFF) in sRGB. Diese Farbe liegt nahe am Rand des sRGB-Gamuts. In Display P3 gibt es sattere Cyanfarben – Farben, die sRGB überhaupt nicht darstellen kann.

Stellen Sie sich vor, Sie gestalten eine Oberfläche in Display P3 mit einem lebhaften Grün, das außerhalb von sRGB fällt: ungefähr color(display-p3 0.0 0.9 0.3) – ein Grün, das wesentlich gesättigter ist als #00E84A (#00E84A) in sRGB. Wenn ein Nutzer dies auf einem Standard-sRGB-Monitor betrachtet, muss der Browser eine Entscheidung treffen: Welche sRGB-Farbe sollte dieses nicht reproduzierbare Grün darstellen?

Diese Entscheidung ist Gamut-Mapping, und es gibt mehrere Ansätze mit unterschiedlichen Abwägungen.

Clipping vs. wahrnehmungsorientierte Kompression

Die zwei primären Strategien für den Umgang mit Out-of-Gamut-Farben sind Clipping und wahrnehmungsorientiertes (Kompressions-)Mapping.

Clipping

Clipping ist der einfachste Ansatz: Farben außerhalb des Gamuts werden auf den nächsten Punkt auf der Gamut-Grenze gerundet. Es ist analog dazu, einen Wert von 1,5 auf einer 0-1-Skala einfach auf 1 zu setzen.

Für eine Farbe mit einem Out-of-Gamut-Sättigungswert setzt Clipping diese Sättigung auf den maximalen Wert, den der Ziel-Gamut erlaubt, während Helligkeit und Farbton unverändert bleiben. Das Ergebnis:

• Farben nahe der Grenze: minimale sichtbare Veränderung
• Farben weit außerhalb des Gamuts: erheblicher Verlust an Farbtongenauigkeit, Farben, die sehr unterschiedlich von der Originalfarbe erscheinen können

Das größte Problem beim Clipping ist die Farbtonverschiebung. Viele Out-of-Gamut-Farben clippen auf eine Weise, die ihren Farbton wahrnehmbar verschiebt. Ein lebhaftes Grün kann zu Gelbgrün clippen; ein tiefes Violett kann zu Blau clippen. Der ursprüngliche Farbton bleibt nicht erhalten.

Clipping erzeugt auch Banding: Ein Bereich verschiedener Quellfarben clippt alle auf denselben Maximum-Sättigungs-Grenzpunkt und erzeugt sichtbare Stufen in Verläufen oder glatten Farbübergängen, die kontinuierlich erscheinen sollten.

Trotz dieser Nachteile ist Clipping für statische Bilder und CSS verbreitet, weil es rechnerisch trivial ist.

Wahrnehmungs-Rendering-Intent (Kompression)

Wahrnehmungsorientiertes Rendering – manchmal Kompressionsmapping genannt – verfolgt einen anderen Ansatz. Anstatt nur Out-of-Gamut-Farben anzupassen, skaliert es den gesamten Gamut proportional. Die gesättigtesten Farben der Quelle werden auf die gesättigtesten im Ziel verfügbaren Farben abgebildet, und alles andere skaliert entsprechend.

Stellen Sie sich vor, Sie passen ein großes Gemälde (Display-P3-Gamut) auf eine kleinere Leinwand (sRGB-Gamut), indem Sie das gesamte Gemälde proportional verkleinern, anstatt es zuzuschneiden. Keine Farben werden abgeschnitten; stattdessen werden alle Beziehungen zwischen Farben beibehalten – nur komprimiert.

Vorteile der wahrnehmungsorientierten Kompression: - Glatte Verläufe bleiben glatt (kein Banding) - Relative Beziehungen zwischen Farben bleiben erhalten - Im Allgemeinen für Fotografie und Verläufe visuell ansprechender

Nachteile: - In-Gamut-Farben werden ebenfalls verschoben (leicht in der Sättigung reduziert), auch wenn sie es nicht mussten - Farben können etwas weniger leuchtkräftig erscheinen als das Original, selbst wenn sie hätten genau reproduziert werden können

Wahrnehmungs-Rendering-Intent ist der Standard, der von ICC-Farbprofilen in Druck- und professionellen Fotografie-Workflows verwendet wird. Es ist auch der Ansatz des CSS-Gamut-Mapping-Algorithmus.

Relative Kolorimetrie (mit Schwarzpunktkompensation)

Ein dritter Ansatz – relative Kolorimetrie – bildet In-Gamut-Farben exakt ab und clippt Out-of-Gamut-Farben, während er für den Unterschied im Weißpunkt zwischen Quelle und Ziel angepasst wird. Es ist ein guter Kompromiss für Dokumente mit wenigen Out-of-Gamut-Farben, da es In-Gamut-Genauigkeit besser bewahrt als wahrnehmungsorientiertes Rendering.

Sättigungs-Rendering-Intent

Ein vierter Intent, hauptsächlich für Businessgrafiken verwendet: Sättigung auf Kosten der Farbtongenauigkeit maximieren. Wird für Balkendiagramme und Kreisdiagramme verwendet, wo lebhafte, unterschiedliche Farben wichtiger sind als genaue Farbtonreproduktion.

CSS Gamut-Mapping

CSS unterstützt mehrere Farbräume seit der CSS-Color-Level-4-Spezifikation, und Gamut-Mapping ist jetzt in den CSS-Farbauflösungsalgorithmus integriert.

Wide-Gamut-Farben in CSS angeben

/* sRGB (traditionell) */
color: #22C55E;
color: rgb(34, 197, 94);

/* Display P3 (Wide Gamut) */
color: color(display-p3 0.05 0.8 0.35);

/* Rec. 2020 (Ultra-Wide) */
color: color(rec2020 0.1 0.7 0.2);

/* OKLCH (wahrnehmungsgleichmäßig, kann Wide-Gamut-Farben adressieren) */
color: oklch(0.75 0.25 150);  /* Sehr lebhaftes Grün — kann außerhalb von sRGB liegen */

Wie CSS mit Gamut-Überlauf umgeht

Wenn ein CSS-Farbwert eine Farbe adressiert, die außerhalb des Display-Gamuts liegt, wendet der Browser den CSS-Gamut-Mapping-Algorithmus an, der in CSS Color Level 4 definiert ist. Der Algorithmus verwendet binäre Suche im OKLCH-Farbraum, um die ähnlichste In-Gamut-Farbe zu finden, wobei deltaE 2000 (ein wahrnehmungsorientiertes Farbunterschiedsmaß) als Distanzmaß verwendet wird.

Das Ergebnis ist ein Gamut-Mapping-Ansatz, der Prioritäten setzt: 1. Helligkeit zuerst beibehalten (Helligkeitsverschiebungen sind am stärksten wahrnehmbar) 2. Farbton als zweites beibehalten 3. Chroma (Sättigung) reduzieren, bis die Farbe in den Ziel-Gamut passt

Das ist eine erhebliche Verbesserung gegenüber einfachem sRGB-Clipping. Der CSS-Algorithmus erzeugt Ergebnisse, die der wahrnehmungsorientierten Kompression für Farben, die nur leicht out-of-gamut sind, ähneln, während er für Farben weit außerhalb des Gamuts elegant degradiert.

Die color-gamut-Medienabfrage

CSS bietet eine Medienabfrage, um zu erkennen, welchen Gamut das Display unterstützt, sodass Sie verschiedene Farben für verschiedene Fähigkeiten bereitstellen können:

/* Standard: sRGB-Farben für alle Displays */
.brand-color {
  color: #22C55E;
}

/* Verbessert: leuchtkräftigere P3-Farben für fähige Displays */
@media (color-gamut: p3) {
  .brand-color {
    color: color(display-p3 0.05 0.8 0.35);
  }
}

/* Ultra-Wide: maximale Lebhaftigkeit für Rec.-2020-Displays */
@media (color-gamut: rec2020) {
  .brand-color {
    color: color(rec2020 0.1 0.7 0.2);
  }
}

Die drei Werte für color-gamut: - srgb — Display deckt ungefähr den sRGB-Gamut ab (häufigster) - p3 — Display deckt ungefähr den Display-P3-Gamut ab (modernes Mac, iPhone, High-End-Android) - rec2020 — Display deckt ungefähr den Rec.-2020-Gamut ab (professionelle und HDR-Displays)

OKLCH und Wide Gamut

OKLCH eignet sich besonders gut für Wide-Gamut-Designarbeiten, weil hohe Chromawerte natürlich Farben außerhalb von sRGB adressieren. Ein Chromawert über ungefähr 0,37 in OKLCH liegt für die meisten Farbtöne außerhalb des sRGB-Gamuts und landet in Display P3 oder darüber hinaus.

/* In sRGB: lebhaftes Grün */
color: oklch(0.75 0.22 145);

/* Außerhalb von sRGB, in Display P3: leuchtkräftigeres Grün */
color: oklch(0.75 0.35 145);

/* Weit außerhalb von sRGB: Browser wird Gamut-Mapping anwenden */
color: oklch(0.75 0.5 145);

Wenn eine OKLCH-Farbe out-of-gamut ist, wendet CSS automatisch seinen Gamut-Mapping-Algorithmus an. Sie müssen das nicht manuell behandeln – der Browser löst es.

Nutzen Sie den Farbkonverter, um Farben zwischen Farbräumen zu konvertieren und zu sehen, wie Werte sich beim Wechsel zwischen sRGB, Display P3 und OKLCH-Darstellungen verschieben.

Praktische Lösungen für Designer

Das Verstehen von Gamut-Mapping verändert Ihren Ansatz bei Farbarbeiten für Bildschirme:

1. Im Ziel-Gamut gestalten

Wenn Ihr Produkt hauptsächlich auf Webnutzern mit einer Mischung von Geräten abzielt, gestalten Sie in sRGB. Wenn Sie wissen, dass Ihr Publikum hauptsächlich auf modernen Apple-Geräten (Mac, iPhone) ist, erwägen Sie das Gestalten in Display P3 mit sRGB-Fallbacks.

2. Den Gamut-Status Ihrer lebhaften Farben kennen

Viele lebhafte Farben, die in Tools wie Figma „funktionieren" (das Display P3 auf Apple-Hardware verwendet), können anders aussehen, wenn sie für die Webnutzung in sRGB exportiert werden. Überprüfen Sie immer die endgültigen Farben mit einem explizit definierten CSS-Wert, nicht nur damit, was Figma auf Ihrem Bildschirm rendert.

Einige extrem lebhafte Grüntöne, Cyanfarben und Magentatöne in Display P3 haben kein sRGB-Äquivalent. Wenn Ihre Markenfarbe color(display-p3 0.0 0.9 0.3) ist – ein Grün, das lebhafter ist als jedes sRGB-Grün – müssen Sie entscheiden, welchen sRGB-Fallback Sie verwenden, oder akzeptieren, dass sRGB-Nutzer eine weniger lebhafte Version sehen.

3. Verlaufsübergänge über Gamuts hinweg testen

Verläufe zwischen zwei Wide-Gamut-Farben können Banding erzeugen, wenn sie auf sRGB-Monitoren angezeigt werden, weil intermediäre Farben, die in P3 unterschiedlich aussahen, alle ähnlichen sRGB-Werten zugeordnet werden (Farb-Clipping in der Mitte des Verlaufs). Wenn Sie Banding in einem Verlauf sehen, versuchen Sie:

• Den Chroma beider Endpunkte auf sRGB-sichere Werte reduzieren
• Intermediäre Verlaufspunkte hinzufügen, um den Übergang zu verteilen
• Den Verlauf durch OKLCH für wahrnehmungsgleichmäßige Abstände routen

4. Das richtige Exportformat verwenden

Für Bilder mit Wide-Gamut-Farben: - JPEGs: Farbprofil einbetten (Display P3 oder Adobe RGB) – Browser verwenden es für das Farbmanagement - PNGs: Gleich – Profil einbetten - WebP: Unterstützt ICC-Profile; für genaue Farbe einbetten - SVG: Farben werden in CSS angegeben – color()-Funktion für Wide Gamut verwenden

Bilder ohne eingebettete Profile werden als sRGB angenommen und ohne Gamut-Konvertierung angezeigt. Ein Wide-Gamut-Bild ohne eingebettetes Profil erscheint auf P3-Displays ausgewaschener als beabsichtigt.

5. Der sichere Wide-Gamut-Ansatz

Für Designer, die reichhaltigere Farben ohne die Komplexität des Verwaltens mehrerer Gamut-Ziele wünschen, bleibt OKLCH mit moderatem Chroma (0,18–0,25) meistens innerhalb von sRGB, während es etwas leuchtkräftigere Ergebnisse als typische RGB-Farben in diesem Bereich liefert. Das CSS-Gamut-Mapping behandelt automatisch alle Grenzfälle.

/* Lebhafte, aber meistens sRGB-sichere Blautöne */
--color-primary: oklch(0.55 0.22 255);
--color-primary-hover: oklch(0.60 0.22 255);

Wichtige Erkenntnisse

• Ein Farbraum-Gamut ist der Bereich von Farben, den ein Gerät oder Farbraum darstellen kann. sRGB ist der Web-Standard; Display P3 ist ~26 % größer und auf modernen Apple- und High-End-Geräten verfügbar.
• Out-of-Gamut-Farben sind Farben, die außerhalb eines Ziel-Gamuts fallen und auf diesem Gerät nicht genau reproduziert werden können – etwas muss passieren, um sie in die Grenzen zu bringen.
• Clipping rundet Out-of-Gamut-Farben auf die Gamut-Grenze – schnell, kann aber Farbtonverschiebungen und Banding verursachen. Wahrnehmungsorientierte Kompression skaliert den gesamten Gamut proportional – langsamer, aber bewahrt Farbbeziehungen und Verläufe.
• CSS Color Level 4 definiert einen Gamut-Mapping-Algorithmus, der OKLCH und deltaE 2000 verwendet, um Chroma intelligent zu reduzieren und dabei Helligkeit und Farbton zu erhalten – weit überlegen gegenüber naivem sRGB-Clipping.
• Die color-gamut-Medienabfrage ermöglicht es Ihnen, leuchtkräftigere color(display-p3)-Farben an fähige Displays bereitzustellen, während sRGB-Fallbacks für andere beibehalten werden.
• Wide-Gamut-Design-Fallstricke: Figma auf Apple-Hardware rendert standardmäßig Display P3 – Farben, die in Figma lebhaft aussehen, können weniger gesättigt aussehen, wenn sie als sRGB für die Webnutzung exportiert werden. Immer mit expliziten CSS-Werten verifizieren.
• Nutzen Sie den Farbkonverter, um zu prüfen, wie jede Farbe über sRGB, Display P3 und OKLCH übersetzt, um ihren Gamut-Status zu verstehen und das nächstgelegene In-Gamut-Äquivalent zu finden.