Farbumrechner – prüfen Sie 37 Farbschreibweisen

Programme speichern dieselbe Farbe auf unterschiedliche Weise. Figma und CSS erwarten einen Hex-Code[1], das Dialogfeld zur Farbauswahl in Word und Excel zeigt drei RGB-Zahlen[2], die Druckerei fragt nach CMYK, und eine Android-App speichert die Farbe als eine einzige Zahl mit der Deckkraft am Anfang[3]. Der Umrechner überträgt eine Farbe von einer dieser Schreibweisen in eine andere.

Die Listen unter Konvertieren von und Konvertieren nach enthalten dieselben 37 Schreibweisen in sechs Gruppen: Am häufigsten genutzt, CSS, Für Entwickler, Video und JPEG, Microsoft Office und CIE. Sie können in jedes der beiden Felder schreiben, der Umrechner füllt das andere aus.

Derselbe Code kann in zwei Schreibweisen zwei verschiedene Farben bedeuten. Deshalb liest das Feld Ihre Eingabe zuerst in der Schreibweise, die in seiner Liste gewählt ist. Passt sie nicht, sucht das Feld nach einer passenden Schreibweise, stellt die Liste um und meldet das in einer Zeile darunter. Das geschieht nach einer kurzen Tipppause oder sofort beim Einfügen. Fügen Sie zum Beispiel 3900150 in ein Feld mit HEX ein, erscheinen zwei Zeilen: „Wir haben die Schreibweise auf Dezimalzahl (RGB-Reihenfolge) umgestellt.“ und „Dieser Eintrag kann auch Dezimalzahl aus Office (VBA, Excel) bedeuten. Die passende Schreibweise wählen Sie in der Liste unter dem Feld.“ Die zweite Zeile nennt die andere Lesart, und welche stimmt, entscheiden Sie in der Liste.

Eine Farbe lässt sich auch ohne Tippen wählen. Die Farbfläche neben dem Feld Konvertieren von öffnet den Farbwähler Ihres Systems. In Chrome, Edge und Opera auf dem Computer gibt es daneben zusätzlich die Pipette Farbe vom Bildschirm aufnehmen. Mit ihr wählen Sie eine Farbe an beliebiger Stelle des Bildschirms, auch außerhalb des Browserfensters[4]. Firefox, Safari und Chrome auf Android stellen Webseiten diese Funktion nicht bereit, dort fehlt die Schaltfläche[4].

Alle löschen leert beide Felder, und Ergebnis kopieren übernimmt den Inhalt des Feldes Konvertieren nach in die Zwischenablage. Der Umrechner rechnet ausschließlich in Ihrem Browser, Ihre Farben gelangen nicht auf unseren Server.

Die drei Länder legen ihre Nationalfarben sehr unterschiedlich genau fest.

Deutschland

Das Grundgesetz sagt in Artikel 22 nur, dass die Bundesflagge schwarz-rot-gold ist. Für Flaggenstoffe empfahl das Bundesministerium des Innern die Farben RAL 9017 Verkehrsschwarz, RAL 3020 Verkehrsrot und RAL 1028 Melonengelb[6].

Feste Werte für Bildschirm und Druck nennt das Corporate Design der Bundesregierung: Schwarz #000000, Rot #FF0000 und Gold #FFCC00, in CMYK 0 | 0 | 0 | 100, 0 | 100 | 100 | 0 und 0 | 12 | 100 | 5. Das Rot hat dort die Pantone-Nummer 485, und für Gold gibt der Styleguide eine eigene Pantone-Mischung und als Alternative Pantone 7405 an[7].

Österreich

Die genauen Farbtöne von Rot und Weiß regeln die österreichischen Gesetze nicht. Nur ein Erlass für das Bundesheer vom 14. Mai 2018 schreibt vor, dass das Rot der Staatsfarben die Charakteristik Pantone 186 C aufweisen muss[8]. Einen Hex-Code nennt er nicht.

Schweiz

Das Wappenschutzgesetz, seit 2017 in Kraft, legt das Rot von Wappen und Fahne in Anhang 1 fest: Pantone 485 C und 485 U, CMYK 0/100/100/0, RGB 255/0/0 und #FF0000[9]. Das Schweizer Rot hat damit dieselbe Pantone-Nummer, dieselben CMYK-Werte und denselben Hex-Code wie das Rot im Corporate Design der Bundesregierung.

Ein Farbmodell sagt, woraus eine Farbe besteht. Ein Bildschirm mischt rotes, grünes und blaues Licht, und das RGB-Modell beschreibt eine Farbe über den Anteil jeder dieser Lichtfarben[10]. Das CMYK-Modell beschreibt eine gedruckte Farbe über die Anteile von vier Druckfarben[11]. HSL und HSB rechnen die RGB-Zahlen in Farbton, Sättigung und Helligkeit um, die sich leichter lesen und von Hand anpassen lassen[5].

Ein Farbcode, also eine Schreibweise, ist die Form, in der ein Programm die Zahlen eines Modells speichert. #3B82F6, rgb(59, 130, 246) und die Zahl 3900150 sind drei Schreibweisen derselben RGB-Farbe. Der Umrechner kennt 37 davon, und sie unterscheiden sich in der Skala, in der Reihenfolge der Kanäle und darin, ob sie Deckkraft speichern.

Ein Farbraum legt fest, welche Farben sich schreiben lassen und wie sie genau aussehen. Webseiten nutzen den Farbraum sRGB, den Hewlett-Packard und Microsoft 1996 gemeinsam geschaffen haben[12]. Monitore mit großem Farbumfang zeigen mehr Farben, und CSS beschreibt sie unter anderem im Farbraum Display P3[5]. Lab, LCH, Oklab, OKLCH und XYZ hängen von keinem Bildschirm ab. Lab umfasst alle Farben, die ein Mensch sehen kann[5], deshalb passt jede Farbe in diese Schreibweisen.

Diese Schreibweisen stehen in der Gruppe Am häufigsten genutzt. Sie begegnen Ihnen in Grafikprogrammen, Office-Paketen und in CSS.

HEX

Ein Hex-Code schreibt die drei RGB-Zahlen im Sechzehnersystem, zwei Zeichen pro Kanal: Rot, Grün und Blau. Jedes Paar reicht von 00 bis FF, also von 0 bis 255, damit lassen sich mit Hex-Codes 16 777 216 Farben schreiben[13]. Sind in jedem Paar beide Zeichen gleich, lässt sich der Code auf drei Zeichen kürzen: #FF0 ist #FFFF00[5].

In Photoshop tippen Sie einen Hex-Code im Adobe-Farbwähler ein, der neben HSB-, RGB-, Lab- und CMYK-Werten auch den Hexadezimalwert anzeigt[14]. In LibreOffice steht dafür im Dialog Farbauswahl das Feld Hex #[15], und in GIMP 3.2 das Feld HTML-Notation, das auch Farbnamen annimmt[16]. Die Umrechnung Schritt für Schritt zeigt der Umrechner von HEX in RGB.

RGB (0–255)

RGB nennt drei Zahlen von 0 bis 255: wie viel rotes, grünes und blaues Licht eine Farbe enthält. Drei Nullen ergeben Schwarz, dreimal 255 ergibt Weiß. Felder Rot, Grün und Blau mit genau diesem Bereich hat der Dialog Farbauswahl in LibreOffice[15], und dieselben drei Felder zeigt das Dialogfeld zur Farbauswahl von Word, Excel und PowerPoint auf der Registerkarte für benutzerdefinierte Farben[2]. Im Umrechner trennen Sie die Zahlen mit Komma oder Leerzeichen, und rgb(255, 215, 0) fügen Sie direkt aus einem Stylesheet ein. Den Weg von den Zahlen zum Hex-Code zeigt der Umrechner von RGB in HEX.

HSL

HSL beschreibt eine Farbe über Farbton (englisch hue), Sättigung (saturation) und Helligkeit (lightness). Der Farbton ist ein Winkel auf dem Farbkreis in Grad: 0 ist Rot, 120 Grün und 240 Blau, Sättigung und Helligkeit stehen in Prozent[5]. Bei 50 % Helligkeit ist die Farbe am reinsten, 0 % und 100 % ergeben immer Schwarz und Weiß. CSS versteht HSL, das Ergebnis können Sie direkt in ein Stylesheet einfügen. Wie sich HSL von HSB und der Office-Skala unterscheidet, erklärt der Umrechner von HEX in HSL.

HSB / HSV (Photoshop, Figma)

HSB und HSV sind zwei Namen desselben Modells, das Alvy Ray Smith 1978 veröffentlicht hat[17]. Der Farbton funktioniert wie in HSL, aber die dritte Zahl, Helligkeit B (englisch brightness) oder Wert V (value), ergibt bei 100 % die reine Farbe, während in HSL eine Helligkeit von 100 % Weiß ergibt. Reines Rot #FF0000 ist deshalb in HSB hsv(0, 100%, 100%) und in HSL hsl(0, 100%, 50%).

So arbeitet der Adobe-Farbwähler in Photoshop: Der Farbton ist eine Position auf dem Farbkreis, Sättigung und Helligkeit stehen in Prozent[14]. LibreOffice zeigt dasselbe Modell mit den Feldern Farbton, Sättigung und Helligkeit, den Farbton von 0 bis 359[15], und Figma nennt es HSB[1]. Der Umrechner schreibt das Ergebnis als hsv(…), im Programm tippen Sie nur die drei Zahlen ein. Beide Richtungen decken der Umrechner von RGB in HSV und der Umrechner von HSV in RGB ab.

CMYK (ohne Farbprofil)

CMYK nennt die Anteile von vier Druckfarben in Prozent: Cyan, Magenta, Gelb (Yellow) und Schwarz. Das K steht nach Standardwerken des Vierfarbdrucks für die Schlüsselplatte, englisch key plate[11], deshalb heißt das Feld für Schwarz in LibreOffice Key, neben Cyan, Magenta und Yellow[15]. Im Adobe-Farbwähler von Photoshop geben Sie CMYK als Prozentwerte in die Felder C, M, Y und K ein[14]. Weitere Rechenbeispiele finden Sie im Umrechner von HEX in CMYK und im Umrechner von CMYK in RGB.

CSS-Name

CSS-Farbnamen wie gold, navy oder tomato sind englisch, und Groß- und Kleinschreibung spielt keine Rolle[5]. Das Feld nimmt sie auch mit Leerzeichen an, Royal Blue ergibt also #4169E1. Hat eine Farbe keinen eigenen Namen, zeigt das Ergebnisfeld den nächstliegenden, und darunter steht „Diese Farbe hat keinen eigenen CSS-Namen, deshalb zeigen wir den nächstliegenden.“ Das Gold der deutschen Nationalfarben #FFCC00 erhält so den Namen gold.

Die Gruppe CSS sammelt die übrigen Schreibweisen, die ein Browser in einem Stylesheet versteht[5].

RGB (Schreibweise mit Leerzeichen)

Neueres CSS trennt die Zahlen mit Leerzeichen: rgb(59 130 246). Die ältere Schreibweise mit Kommas bedeutet dasselbe[5], und das Feld nimmt beide an.

RGB in Prozent

Die Kanäle lassen sich auch in Prozent angeben, wobei 100 % für 255 steht, rgb(100% 0% 0%) ist also reines Rot[5].

HWB

HWB beschreibt eine Farbe über ihren Farbton und darüber, wie viel Weiß und Schwarz beigemischt sind. Die CSS-Spezifikation beschreibt das Modell als HSL ähnlich, für Menschen aber oft noch leichter zu handhaben. Es stammt ebenfalls von Alvy Ray Smith, aus dem Jahr 1996[5]. Reines Rot mit 50 % Weiß ist hwb(0 50% 0%), also #FF7F80.

OKLCH

OKLCH nennt die Helligkeit L in Prozent, die Buntheit C (englisch chroma) und den Farbton H in Grad. Gerechnet wird im Farbraum Oklab, den Björn Ottosson im Dezember 2020 veröffentlicht hat[5]. L entspricht dabei der Helligkeit, die das Auge wahrnimmt. In HSL haben reines Blau und reines Gelb dieselbe Helligkeit von 50 %, obwohl Gelb viel heller wirkt. In OKLCH hat Blau 45,2 % und Gelb 96,8 %[5].

Deshalb lässt sich in OKLCH leichter eine Palette bauen, in der Farben mit gleichem L tatsächlich gleich hell wirken.

Oklab

Oklab ist derselbe Farbraum wie OKLCH, statt Buntheit und Farbtonwinkel hat er aber zwei Achsen: a von Grün nach Rot und b von Blau nach Gelb[5]. In der Praxis bleiben a und b innerhalb von ±0,5[5].

CIE Lab (Weißpunkt D50, wie in CSS)

Der 1976 standardisierte L*a*b*-Farbraum leitet sich vom CIEXYZ-Farbraum ab und hängt von keinem Gerät ab[18]. Er beschreibt eine Farbe über die Helligkeit L von 0 bis 100 und die Achsen a (Grün bis Rot) und b (Blau bis Gelb). Im Adobe-Farbwähler nimmt das Feld L Werte von 0 bis 100 an, die Felder A und B Werte von −128 bis +127[14].

Lab-Werte hängen immer vom gewählten Weißpunkt ab. CSS rechnet mit dem Weiß D50 und kommt vom Weiß D65 des sRGB-Farbraums über die Bradford-Transformation dorthin[5], und dieser Umrechner rechnet genauso. Ein Werkzeug, das Lab für das Weiß D65 berechnet, liefert für dieselbe Farbe andere a- und b-Werte, und beide Ergebnisse sind richtig.

CIE LCH (Weißpunkt D50, wie in CSS)

LCH ist Lab in anderer Schreibweise: Die Helligkeit L bleibt, und an die Stelle der Achsen a und b treten Buntheit C und Farbtonwinkel H[5]. Genauso verhält sich OKLCH zu Oklab.

Display P3

Die CSS-Spezifikation nennt Display P3 einen Farbraum, der für heutige Monitore mit großem Farbumfang typisch ist[5]. In CSS schreiben Sie ihn mit color(display-p3 …) und drei Zahlen von 0 bis 1. In Figma lässt sich das Farbprofil einer Datei auf sRGB oder Display P3 stellen[1]. Hex-Codes gelten immer in sRGB[5], eine aus einer Display-P3-Datei kopierte Farbe kann als Hex-Code deshalb anders aussehen.

Adobe RGB (1998)

Adobe RGB (1998) heißt in CSS a98-rgb. Seine grüne Primärfarbe liegt in der Normfarbtafel bei x 0,21 und y 0,71, in sRGB bei x 0,3 und y 0,6, deshalb fasst der Farbraum gesättigtere Grün- und Cyantöne[5]. Seine Kennlinie beschreibt der Exponent 256/563, der nahe an 1/2,2 liegt, aber nicht genau gleich ist[5]. Reines sRGB-Grün #00FF00 ist darin color(a98-rgb 0.565 1 0.2344).

ProPhoto RGB

ProPhoto RGB hat Kodak entwickelt, und die ISO hat den Farbraum als ROMM RGB genormt. Er hat das Weiß D50, dasselbe wie Lab in CSS, und Primärfarben, die sich physikalisch nicht erzeugen lassen. Laut CSS-Spezifikation dient er in der Digitalfotografie für Archivversionen von Bildern[5]. In CSS schreiben Sie ihn als color(prophoto-rgb …). Der Umrechner gibt hier fünf Nachkommastellen an, weil mit vier manche 8-Bit-Farben nicht zu denselben RGB-Werten zurückkehren.

Rec. 2020

Rec. 2020 ist der Farbraum der Empfehlung ITU-R BT.2020 für Ultra-HD-, 4K- und 8K-Fernsehen, und die CSS-Spezifikation weist darauf hin, dass heutige Bildschirme seinen Farbumfang nicht vollständig zeigen[5]. Ein Grün außerhalb von sRGB, etwa color(rec2020 0 1 0), bleibt in dieser Schreibweise unverändert, während der Hex-Code die nächstliegende Farbe zeigt, #00F272.

Lineares sRGB

Lineares sRGB hat dieselben Primärfarben und dasselbe Weiß wie sRGB, aber keine Kennlinie, die Zahlen wachsen also proportional zur Lichtmenge[5]. Dunkle Farben bekommen dadurch sehr kleine Zahlen, deshalb braucht diese Schreibweise mehr Nachkommastellen als sRGB, sonst entstehen in weichen Verläufen sichtbare Stufen[5]. #3B82F6 ist hier color(srgb-linear 0.04374 0.22323 0.92158), obwohl sein Rot in sRGB 0,231 beträgt.

Die Gruppe Für Entwickler sammelt die Schreibweisen, in denen Farben in Code landen: Unity, Android, Flutter, Swift, Python, LaTeX, die Discord-API und Displays für Arduino.

RGB 0–1 (Unity, matplotlib)

Unity gibt Farbanteile als Zahlen von 0 bis 1 an[19], ebenso matplotlib in Python[20]. In LaTeX nimmt das Paket xcolor im Modell rgb Brüche von 0 bis 1 und im Modell RGB ganze Zahlen von 0 bis 255[21]. Einen Wert von 0 bis 255 rechnen Sie in einen Bruch um, indem Sie ihn durch 255 teilen: Aus 59 wird 0,2314.

Android, Farbe in XML (Deckkraft zuerst)

In Android-Ressourcendateien beginnt eine Farbe mit einer Raute und hat die Form #RGB, #ARGB, #RRGGBB oder #AARRGGBB[22]. Die Deckkraft steht vorne, anders als in CSS, wo ein achtstelliger Code mit der Deckkraft endet[5]. Dieselbe Zeichenfolge bedeutet deshalb zwei verschiedene Farben: #803B82F6 ist unter Android #3B82F6 mit etwa 50 % Deckkraft, in CSS dagegen das Violett rgba(128, 59, 130, 0.96). Das Feld liest einen achtstelligen Code nach der Schreibweise in seiner Liste: bei HEX wie CSS, bei „Android, Farbe in XML (Deckkraft zuerst)“ wie Android.

Android, ARGB-Ganzzahl (Java, Kotlin)

In Java- und Kotlin-Code speichert Android Farben seit API-Level 1 in einer einzigen 32-Bit-Ganzzahl mit den Kanälen in der Reihenfolge A, R, G, B[3]. Das Beispiel der Dokumentation ist 0xff0000ff, ein deckendes Blau[3]. Mit dem Deckkraft-Byte FF wird die Zahl in Java negativ, weil int ein Vorzeichen hat, 0xFF3B82F6 ist also -12877066. In dieser Schreibweise nimmt das Feld beide Formen an und liest eine Zahl ohne Deckkraft-Byte, etwa 0x3B82F6, wörtlich. Sie hat dann die Deckkraft 0, genau wie unter Android.

Flutter, Jetpack Compose

Flutter baut eine Farbe aus einer Hex-Zahl mit der Deckkraft vorne, etwa Color(0xFF42A5F5), was die Dokumentation neben Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5) zeigt[23]. Jetpack Compose hat eine Funktion Color, die eine Farbe aus einer ARGB-Zahl erzeugt[24], Color(0xFF3B82F6) funktioniert also in beiden unverändert.

UIColor (UIKit)

UIColor in UIKit nimmt Rot, Grün, Blau und Alpha als Brüche an. Seit iOS 10 rechnet es im erweiterten sRGB-Farbraum und schneidet Anteile unter 0 oder über 1 deshalb nicht ab[25]. Das Feld nimmt Anteile auch als Division an, wie sie oft in Swift-Code stehen: UIColor(red: 59/255, green: 130/255, blue: 246/255, alpha: 1) ist #3B82F6.

SwiftUI

SwiftUI baut eine Farbe mit Color(red:green:blue:opacity:) und nennt die Deckkraft opacity[26]. Der Umrechner schreibt opacity nur dazu, wenn die Farbe teilweise transparent ist.

Dezimalzahl (RGB-Reihenfolge)

Diese Schreibweise packt die drei Kanäle in eine einzige Zahl: Rot mal 65 536 plus Grün mal 256 plus Blau. Discord nutzt sie: Bots und Webhooks übergeben die Farbe eines Embeds als ganze Zahl im Feld color[27]. Das Gold der Nationalfarben #FFCC00 ist in dieser Schreibweise 16763904.

HSV aus OpenCV (Farbton 0–180)

OpenCV halbiert bei 8-Bit-Bildern den Farbton, damit er in ein Byte passt. Der Farbton reicht hier also von 0 bis 180, Sättigung und Wert reichen von 0 bis 255[28]. Das Gold der Nationalfarben ist in OpenCV 24, 255, 255, in HSB hat es den Farbton 48°.

HSV 0–1 (Python colorsys)

Das Python-Modul colorsys aus der Standardbibliothek liefert Farbton, Sättigung und Wert als Brüche von 0 bis 1[29], auch den Farbton, den andere Schreibweisen in Grad angeben. Ein Farbton von 0,5 bedeutet hier 180°, und das Gold der Nationalfarben ist 0.1333, 1, 1.

RGB565 (Arduino, TFT-Displays)

RGB565 bringt eine Farbe in 16 Bit unter: 5 Bit Rot, 6 Bit Grün und 5 Bit Blau, das Rot in den höchstwertigen Bits[30]. So speichert die Bibliothek Adafruit GFX Farben für Farbdisplays am Arduino, mit Weiß als 0xFFFF und Rot als 0xF800[31]. Sechzehn Bit ergeben 65 536 Farben[31], das Ergebnis ist also die nächstliegende davon: #3B82F6 wird zu 0x3C1E und zurück zu #3A82F7.

Der Umrechner rundet jede Komponente auf die nächste Stufe, wie das Format UNORM in Direct3D, in dem lauter Einsen den vollen Wert bedeuten[32]. Die Funktion color565() aus Adafruit GFX schneidet die unteren Bits ab[33], ihr Ergebnis liegt deshalb in einer Komponente manchmal eine Stufe tiefer. Ist in der Liste RGB565 (Arduino, TFT-Displays) gewählt, nimmt das Feld 0xF800, #F800 und eine Dezimalzahl wie 63488 an.

YCbCr zerlegt eine Farbe in die Helligkeit Y und zwei Farbdifferenzen: Cb, Blau minus Helligkeit, und Cr, Rot minus Helligkeit[34]. So speichern JPEG-Dateien und digitales Video die Farbe. Die Gruppe Video und JPEG enthält drei Varianten dieser Schreibweise, die sich in den Gewichten der Kanäle und im Zahlenbereich unterscheiden.

YCbCr (JPEG, 0–255)

Das Dateiformat JPEG (JFIF) speichert Y, Cb und Cr im vollen Bereich von 0 bis 255. Es gewichtet Rot mit 0,299, Grün mit 0,587 und Blau mit 0,114, rundet das Ergebnis und begrenzt es auf 0 bis 255[35]. Weiß ist deshalb Y 255, Cb 128, Cr 128 und reines Rot Y 76, Cb 85, Cr 255, denn die Formel ergibt für Cr 255,5, was auf 255 begrenzt wird.

YCbCr BT.601 (SD-Video, 16–235)

Die Empfehlung ITU-R BT.601 für Fernsehen in Standardauflösung nutzt dieselben Gewichte wie JPEG, lässt aber Reserve im Signal: Die Helligkeit belegt die Codes 16 bis 235, die Farbdifferenzen 16 bis 240 mit der Mitte bei 128[34]. Schwarz ist hier Y 16, Cb 128, Cr 128 und Weiß Y 235, Cb 128, Cr 128.

YCbCr BT.709 (HD-Video, 16–235)

Die Empfehlung ITU-R BT.709 für HD-Fernsehen behält den Codebereich, ändert aber die Gewichte auf 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau[36]. Reines Rot ist in BT.709 also Y 63, Cb 102, Cr 240 und in BT.601 Y 81, Cb 90, Cr 240. Ein Player, der HD-Material als BT.601 dekodiert, zeigt die Farben deshalb leicht verschoben.

YCbCr-Codes mit 8 Bit haben weniger Stufen als RGB, der Bereich 16 bis 235 noch weniger, deshalb kann eine hin- und zurückgerechnete Farbe in einem Kanal um ein oder zwei Stufen abweichen. Das Feld nimmt drei Zahlen mit Buchstaben an, etwa Y 81, Cb 90, Cr 240, oder drei Zahlen ohne Buchstaben in der Reihenfolge Y, Cb, Cr.

HSL aus Office (Skala 0–255)

Das Dialogfeld zur Farbauswahl in Word, Excel und PowerPoint bietet auf der Registerkarte für benutzerdefinierte Farben die Farbmodelle RGB und HSL[2]. Im HSL-Modell zählt Office Sättigung und Helligkeit bis 255: Bei 255 ist die Sättigung am stärksten, und eine Helligkeit von 255 ergibt Weiß[2]. Der Umrechner liest auch den Farbton in dieser Skala. Eine so grobe Skala trifft nicht jede Bildschirmfarbe: #3B82F6 ist in Office 154, 233, 153, und diese Zahlen ergeben zurückgerechnet #3C83F6.

Dezimalzahl aus Office (VBA, Excel)

Die VBA-Funktion RGB gibt eine Farbe als einzige ganze Zahl zurück[37], und mit dieser Funktion setzen Sie über die Eigenschaft Interior.Color die Füllfarbe einer Excel-Zelle[38]. In dieser Zahl steht Rot im niederwertigsten Byte, wie im Windows-Wert COLORREF[39], die Kanäle stehen also in umgekehrter Reihenfolge als in der Schreibweise Dezimalzahl (RGB-Reihenfolge). Das Gold der Nationalfarben ist in Excel 52479 und in RGB-Reihenfolge 16763904.

Die Füllfarbe der Zelle A1 zeigt ein Makro mit einer einzigen Zeile, MsgBox Range("A1").Interior.Color. Die Zahl aus dem Meldungsfenster fügen Sie in ein Feld mit Dezimalzahl aus Office (VBA, Excel) ein, und der Umrechner macht daraus HEX, RGB oder CMYK.

XYZ geht auf das 1931 entwickelte CIE-Normvalenzsystem zurück, das auf standardisierten Farbabgleichsversuchen mit normalsichtigen Personen beruht[40]. Der Lab-Farbraum ist davon abgeleitet[18]. Y steht für die Helligkeit (Luminanz), und CSS skaliert sie so, dass Weiß den Wert Y = 1 hat[5].

XYZ (Weißpunkt D65)

color(xyz-d65 …) gibt XYZ bezogen auf das Weiß D65 an, das Weiß von sRGB und Display P3. Die kürzere Schreibweise color(xyz …) liest CSS genauso[5]. Weiß #FFFFFF ist hier color(xyz-d65 0.95046 1 1.08906).

XYZ (Weißpunkt D50)

color(xyz-d50 …) gibt XYZ bezogen auf das Weiß D50 an, von dem aus CSS Lab und LCH berechnet[5]. Weiß ist hier color(xyz-d50 0.9643 1 0.8251), dieselbe Farbe hat in den beiden XYZ-Schreibweisen also andere X- und Z-Werte.

CIE xyY

Aus der Normfarbtafel mit dem Farbort x, y und der Helligkeit Y ergibt sich der xyY-Farbraum, der eine Farbwahrnehmung vollständig beschreibt[40]. Der Umrechner rechnet Y wie in der XYZ-Schreibweise von 0 bis 1, Weiß #FFFFFF ist hier also x 0.3127, y 0.329, Y 1.

CIE Luv (Weißpunkt D65)

Das CIE-LUV-Farbraumsystem von 1976 wird wie Lab aus dem XYZ-System berechnet, um Unterschiede zwischen Farben besser beurteilen zu können. Man setzt es bevorzugt für Lichtfarben ein, etwa bei der Bewertung von Lichtquellen, Monitoren und Projektoren[41]. Der Umrechner nimmt das Weiß D65 wie in sRGB, #FFFFFF ist also L 100, u 0, v 0 und reines Rot L 53.24, u 175.01, v 37.77.

Die Deckkraft, auch Alphakanal genannt, sagt, wie stark eine Farbe den Hintergrund verdeckt: Bei 0 ist sie völlig transparent, bei 1, also 100 %, deckt sie vollständig[5]. In CSS schreiben Sie sie nach einem Schrägstrich, rgb(59 130 246 / 50%), in der älteren Schreibweise als vierte Zahl in rgba(59, 130, 246, 0.5) und im Hex-Code als letzte zwei Zeichen, etwa #3B82F680[5]. RGBA ist also RGB mit dieser vierten Zahl.

Die beiden Deckkraft-Zeichen eines achtstelligen Hex-Codes reichen von 00 bis FF, also von 0 bis 255, deshalb bedeutet 80 den Wert 128 von 255, also 50,2 %. Darum zeigt „RGB (Schreibweise mit Leerzeichen)“ #3B82F680 als rgb(59 130 246 / 0.502).

Diese Schreibweisen speichern keine Deckkraft: CMYK (ohne Farbprofil), CSS-Name, Dezimalzahl (RGB-Reihenfolge), HSV aus OpenCV (Farbton 0–180), RGB565 (Arduino, TFT-Displays), YCbCr (JPEG, 0–255), YCbCr BT.601 (SD-Video, 16–235), YCbCr BT.709 (HD-Video, 16–235), HSL aus Office (Skala 0–255), Dezimalzahl aus Office (VBA, Excel), CIE xyY und CIE Luv (Weißpunkt D65). Bei ihnen erscheint unter dem Ergebnis eine Zeile, zum Beispiel „CMYK (ohne Farbprofil) speichert keine Deckkraft, deshalb zeigt das Ergebnis die Farbe ohne Transparenz.“

Das Schlüsselwort transparent ist in CSS transparentes Schwarz, rgb(0 0 0 / 0%)[5], und der Umrechner liest es genauso: transparent und rgba(0,0,0,0) ergeben beide #00000000.

Weil der Umrechner CMYK ohne Farbprofil berechnet, mit einer Formel, die die CSS-Spezifikation naiv nennt. Für firebrick, #B22222, ergibt sie cmyk(0%, 81%, 81%, 30%), dasselbe Ergebnis, das auch das W3C angibt[42]. So wird eine Bildschirmfarbe zu vier Zahlen, ohne dass feststeht, wie sie auf Papier aussieht.

Eine Druckerei rechnet CMYK mit einem ICC-Profil, das ihre Maschine, Farben und Papier beschreibt. Im Beispiel derselben Spezifikation weicht das naive Ergebnis vom Druck um 14,3 DeltaE-2000-Einheiten ab, was das W3C als sehr deutlich sichtbaren Unterschied einstuft[42]. Das Gold der Nationalfarben zeigt den Abstand ebenfalls: Der Styleguide der Bundesregierung nennt CMYK 0 | 12 | 100 | 5[7], die Formel ergibt cmyk(0%, 20%, 100%, 0%).

Wenn Sie in Photoshop ein RGB-Bild in den CMYK-Modus konvertieren, passt das Programm Farben außerhalb des CMYK-Farbumfangs an, und diesen Umfang bestimmt der CMYK-Arbeitsfarbraum aus dem Dialogfeld Farbeinstellungen[43]. LibreOffice zeigt im Dialog Farbauswahl zwar CMYK-Felder an, nutzt für den Druck aber nur RGB[15]. Legen Sie eine Druckdatei deshalb in CMYK mit dem Profil Ihrer Druckerei an, und lassen Sie Bildschirmgrafiken in RGB oder HEX. Wie Sie den Modus einer Datei Schritt für Schritt ändern und welche Profile Druckereien verwenden, erklärt der Umrechner von RGB in CMYK.

In OKLCH, Oklab, CIE Lab (Weißpunkt D50, wie in CSS), CIE LCH (Weißpunkt D50, wie in CSS), Display P3, Adobe RGB (1998), ProPhoto RGB, Rec. 2020, Lineares sRGB, XYZ (Weißpunkt D65), XYZ (Weißpunkt D50), CIE xyY und CIE Luv (Weißpunkt D65) gibt der Umrechner die Farbe exakt an, auch wenn sie außerhalb von sRGB liegt. Die übrigen Schreibweisen umfassen nur sRGB, deshalb sucht der Umrechner für sie die nächstliegende Farbe mit dem Verfahren aus CSS Color 4[5] und meldet das unter dem Ergebnis, etwa so: „Diese Farbe liegt außerhalb des sRGB-Farbraums, deshalb zeigt HEX die nächstliegende Farbe, die sich darin speichern lässt.“

Solche Farben kommen zum Beispiel aus Tailwind CSS. In Version 4 hat Tailwind die gesamte Standardpalette von RGB auf OKLCH umgestellt, um den größeren Farbumfang neuer Bildschirme zu nutzen[44]. Blue-500 ist dort oklch(62.3% 0.214 259.815)[45]. Diese Farbe liegt außerhalb von sRGB, und die nächstliegende sRGB-Farbe ist laut Umrechner #2B7FFF. In Version 3 war blue-500 noch #3b82f6[46], die Farbe aus den Beispielen des Umrechners.

Weil RAL, HKS, NCS und Pantone Systeme physischer Farben sind, deren digitale Werte nur ihre Eigentümer herausgeben.

RAL

Die erste RAL-Farbsammlung mit 40 genormten Farbtönen stellte 1927 der Reichs-Ausschuß für Lieferbedingungen zusammen. Heute heißt sie RAL Classic und umfasst 216 Farbtöne, die seit 1940 vierstellige Nummern tragen, etwa RAL 9010 Reinweiß, RAL 7016 Anthrazitgrau oder RAL 5002 Ultramarinblau[47]. RGB- und Lab-Werte für mehr als 2 500 RAL-Farben verkauft RAL in einer digitalen Bibliothek[48].

HKS

HKS ist ein System von Druckfarben, dessen Name aus den Anfangsbuchstaben dreier Hersteller stammt: Hostmann-Steinberg Druckfarben, Kast & Ehinger Druckfarben und H. Schmincke & Co. Sie gründeten den HKS Warenzeichenverband, der im Colour Book HKS 3000+ alle 3 520 HKS-Töne als 4c-Separation herausgibt[49], also als Mischung aus den vier Druckfarben von CMYK. Die CMYK-Werte einer HKS-Farbe finden Sie deshalb im Colour Book.

NCS und Pantone

Pantone nennt die nächstliegenden RGB-, CMYK-, Hex- und Lab-Entsprechungen seiner Farben in der App Pantone Connect[50], und auch die Hilfe von Microsoft verweist für RGB-Werte einer Pantone-Farbe auf die Website von Pantone[2]. NCS zeigt seine Farben auf der Plattform NCS+[51]. Aus Photoshop hat Adobe im Oktober 2023 die letzten drei Pantone-Farbtafeln entfernt[14].

Um eine solche Farbe auch am Bildschirm zu nutzen, übernehmen Sie die Werte aus der Bibliothek des Eigentümers und geben sie in das Feld Konvertieren von ein. Wenn Sie eine Wand streichen oder Fenster, Türen und Bauteile in einer RAL-Farbe bestellen, wählen Sie die Farbe am physischen Farbfächer aus. Ein Bildschirm leuchtet, Wandfarbe reflektiert dagegen Licht, deshalb wirkt derselbe Ton an der Wand und auf dem Monitor unterschiedlich.