CMYK-Werte in einen Hex-Code umrechnen

Inhalt zuletzt geprüft:

Geben Sie die vier Farbanteile ein, und der Hex-Code erscheint schon beim Tippen: cmyk(76%, 47%, 0%, 4%) ergibt #3B82F5. Das Feld nimmt Zahlen mit und ohne Prozentzeichen, mit Dezimalkomma und mit den Buchstaben C, M, Y, K an, Sie können die Werte also direkt aus dem Styleguide oder dem Datenblatt der Druckerei einfügen.

nach

Wie rechnet man CMYK in HEX um?

Aus den vier Druckfarben werden zuerst drei Lichtkanäle, danach schreiben Sie jeden Kanal mit zwei Hexadezimalzeichen. Die Prozentwerte setzen Sie als Dezimalbruch ein, 76% werden also zu 0,76.


Die Formel: R = 255 × (1 − C) × (1 − K). Grün berechnen Sie genauso aus Magenta, Blau aus Gelb.


Für cmyk(76%, 47%, 0%, 4%) ergibt der Rotkanal 255 × 0,24 × 0,96, das sind 59, Grün kommt auf 130 und Blau auf 245. Nun teilen Sie jede Zahl durch 16: 59 sind 3 Sechzehner mit Rest 11, und für 11 steht der Buchstabe B, Rot wird also zu 3B. Genauso wird 130 zu 82 und 245 zu F5. Das Ergebnis lautet #3B82F5.


Der CMYK-in-RGB-Umrechner hält auf halbem Weg bei den drei Zahlen an. Einen Bildschirmcode rechnen Sie mit dem HEX-in-CMYK-Umrechner in Druckfarben um.

Was sagen die vier CMYK-Zahlen und die sechs Hex-Zeichen?

Die vier Zahlen des CMYK-Farbmodells sind ein Rezept für die Druckmaschine: welcher Anteil des Papiers mit Cyan, Magenta, Gelb und Schwarz bedeckt wird[1]. Deshalb stehen sie in Datenblättern von Druckereien und in Styleguides, denn sie beschreiben die Druckfarbe und nicht das Bild am Monitor.


Die sechs Hex-Zeichen sind drei Zahlen von 0 bis 255 im Hexadezimalsystem, jeweils zwei Zeichen für rotes, grünes und blaues Licht[2]. Diesen Code tragen Sie im Stylesheet, im Website-Theme, in Canva und in Figma ein.


Das Ergebnis hat immer sechs Zeichen, weil Druckfarbe keine Transparenz kennt und es für ein siebtes und achtes Zeichen nichts gibt. Wir schreiben den Code in Großbuchstaben, der Browser liest #3b82f5 aber genauso[2].


Liegt Ihre Farbe in einer anderen Schreibweise vor, etwa als OKLCH, Lab oder Android-Code, zeigt der Farbumrechner sie gleichzeitig in allen Schreibweisen.

Welchen Hex-Code haben Rastertöne der vier Druckfarben?

Ein Rasterton ist eine Farbe, die nur einen Teil der Fläche bedeckt, zum Beispiel 50% Cyan. Die Übersicht zeigt, wie jede der vier Farben heller wird, wenn ihr Anteil sinkt. Alle Codes hat der Umrechner berechnet.
CMYK-WerteDruckfarbeHex-Code
100%, 0%, 0%, 0%Cyan 100%#00FFFF
50%, 0%, 0%, 0%Cyan 50%#80FFFF
20%, 0%, 0%, 0%Cyan 20%#CCFFFF
0%, 100%, 0%, 0%Magenta 100%#FF00FF
0%, 50%, 0%, 0%Magenta 50%#FF80FF
0%, 20%, 0%, 0%Magenta 20%#FFCCFF
0%, 0%, 100%, 0%Gelb 100%#FFFF00
0%, 0%, 50%, 0%Gelb 50%#FFFF80
0%, 0%, 20%, 0%Gelb 20%#FFFFCC
0%, 0%, 0%, 100%Schwarz 100%#000000
0%, 0%, 0%, 50%Schwarz 50%#808080
0%, 0%, 0%, 20%Schwarz 20%#CCCCCC
0%, 0%, 0%, 10%Schwarz 10%#E6E6E6
Ein Rasterton ändert im Code nur das Paar, das zu seiner Farbe gehört: Cyan senkt das rote Paar, Magenta das grüne und Gelb das blaue. Schwarz senkt alle drei Paare zugleich, darum ergeben seine Rastertöne Grau.

Der Styleguide nennt einen anderen Hex-Code als der Umrechner. Welcher gilt?

Nehmen Sie den Code aus dem Styleguide. Die Formel geht von idealen Druckfarben auf ideal weißem Papier aus, darum wird ihr Ergebnis heller und kräftiger als ein echter Druck. Der Code im Styleguide liegt meist viel näher an dem, was auf dem Papier zu sehen ist.


Das Corporate Design der Bundesregierung zeigt das deutlich. Für das Blau nennt der Styleguide 100% Cyan und 40% Magenta sowie den HEX-Wert #0077B6[3]. Die Formel macht aus denselben Farben #0099FF, ein helles, leuchtendes Blau. Mit dem Druckprofil PSO Coated v3, das wir mit der Bibliothek Little CMS[4] aus der Datei der European Color Initiative[5] gerechnet haben, ergibt sich #0074BD, fast der Wert aus dem Styleguide.

Papierbahn mit bedruckten Zeitungsseiten zwischen den Stahlwalzen einer Druckmaschine
Eine Papierbahn mit bedruckten Zeitungsseiten läuft zwischen den Stahlwalzen einer Druckmaschine hindurch. Auf so einem Druck hängt die Farbe von Druckfarbe und Papier ab und nicht nur von vier Zahlen, und genau diese Bedingungen beschreibt ein Druckprofil. Foto: Bank Phrom, Unsplash

Nennt ein Styleguide nur CMYK, gibt Ihnen der Umrechner einen Arbeitswert. Vergleichen Sie ihn dann mit einem gedruckten Flyer oder einer Visitenkarte und dunkeln Sie die Farbe in Figma oder im Stylesheet ab, wenn sie am Bildschirm stärker leuchtet als auf Papier.

Farben der Bundesregierung: Formel, Druckprofil und Styleguide

Fünf Farben aus dem Corporate Design der Bundesregierung mit ihren CMYK-Werten aus dem Styleguide[3]. Die Profilspalte ist farbmetrisch relativ mit Tiefenkompensierung berechnet.
CMYK im StyleguideFarbeHEX nach der FormelHEX mit PSO Coated v3HEX im Styleguide
0%, 12%, 100%, 5%Gold (Nationalfarbe)#F2D500#F6CF00#FFCC00
100%, 40%, 0%, 0%Blau#0099FF#0074BD#0077B6
100%, 0%, 100%, 20%Grün#00CC00#007F33#00854A
0%, 100%, 65%, 10%Rot#E60050#D40039#C0003C
80%, 100%, 20%, 10%Violett#2E00B8#4F2068#5F316E
Beim Grün ist der Abstand am größten: Die Formel liefert ein grelles #00CC00, das Druckprofil und der Styleguide ein gedecktes Grün um #00854A.

Kommen CMYK-Werte nach der Umrechnung in HEX und zurück wieder heraus?

Die Formel in Gegenrichtung setzt immer mindestens eine der drei Buntfarben auf null. Ein Wert, bei dem Cyan, Magenta und Gelb zugleich über null liegen, kommt deshalb verändert zurück. Wir haben 1 875 000 solche Werte geprüft, und keiner kam unverändert zurück.
CMYK am AnfangHex-CodeCMYK nach dem Rückweg
100%, 80%, 0%, 0%#0033FF100%, 80%, 0%, 0%
76%, 47%, 0%, 4%#3B82F576%, 47%, 0%, 4%
0%, 12%, 100%, 5%#F2D5000%, 12%, 100%, 5%
20%, 30%, 40%, 0%#CCB3990%, 12%, 25%, 20%
40%, 30%, 20%, 10%#8AA1B825%, 13%, 0%, 28%
60%, 40%, 40%, 100%#0000000%, 0%, 0%, 100%
100%, 100%, 100%, 100%#0000000%, 0%, 0%, 100%
Tiefschwarz 60%, 40%, 40%, 100% und Passerschwarz werden beide zu #000000, und aus diesem Code kommt nur noch reines Schwarz zurück. Für die Druckdatei tragen Sie deshalb die CMYK-Werte aus dem Styleguide oder dem Datenblatt der Druckerei ein und nicht das Ergebnis eines Umwegs über HEX.

Welche CMYK-Schreibweisen nimmt dieser Umrechner an?

Jede dieser Schreibweisen nimmt das Feld an und rechnet sie um, Sie müssen vor dem Einfügen also nichts korrigieren. Die Tabelle zeigt, was der Umrechner mit jeder davon macht, und die Ergebnisse hat er selbst berechnet.
Was Sie eingebenWas der Umrechner zeigtWie wir es lesen
76, 47, 0, 4#3B82F5Vier Zahlen lesen wir als Prozentwerte in der Reihenfolge Cyan, Magenta, Gelb und Schwarz.
76 47 0 4#3B82F5Leerzeichen genügen, weil Kommas zwischen den Zahlen nicht nötig sind.
cmyk(76%, 47%, 0%, 4%)#3B82F5Die Schreibweise mit Klammern, wie im Ergebnis des HEX-in-CMYK-Umrechners, nehmen wir samt Namen an.
C 76 M 47 Y 0 K 4#3B82F5Die Kanalbuchstaben, mit denen Styleguides die Farben kennzeichnen, lassen wir weg und nehmen die Zahlen.
76 %, 47 %, 0 %, 4 %#3B82F5Das Leerzeichen vor dem Prozentzeichen, das in deutschen Texten üblich ist, stört die Umrechnung nicht.
76,5 47 0 4#3A82F5Ein Komma zwischen zwei Ziffern lesen wir als Dezimalkomma, weil sonst fünf Zahlen statt vier herauskämen.
0,76 0,47 0 0,04#3B82F5Dezimalbrüche von 0 bis 1, die manche Programme und Bibliotheken ausgeben, rechnen wir in Prozent um.
device-cmyk(76% 47% 0% 4%)#3B82F5Die Schreibweise aus der Spezifikation CSS Color Module Level 5 nehmen wir ebenfalls an.
150, 0, 0, 0#00FFFFEinen Wert über 100 begrenzen wir auf 100 und einen negativen auf null, weil Farbe nicht mehr als die ganze Fläche bedecken kann.
Die Schreibweise device-cmyk() ist in CSS Color Module Level 5 festgelegt[6].

Andere Einheiten in HEX umrechnen

RGB in HEXHSL in HEX

CMYK in andere Einheiten umrechnen

CMYK in RGB

Quellen

  1. CMYK-Farbmodell — Wikipedia
  2. CSS Color Module Level 4: The RGB Hexadecimal Notations — W3C (englische Version)
  3. Das Corporate Design der Bundesregierung: Farben — Die Bundesregierung
  4. Little CMS — Marti Maria (englische Version)
  5. Downloads: ICC profiles from ECI — European Color Initiative (englische Version)
  6. CSS Color Module Level 5: Specifying Uncalibrated CMYK Colors — W3C (englische Version)
  7. Color Bridge Guide Coated — Pantone (englische Version)

Alle Werte in den Tabellen haben wir aus den Einheitendefinitionen berechnet und vor der Veröffentlichung rechnerisch geprüft. Historische Angaben und die Namen lokaler Einheiten stützen sich auf die oben genannten Quellen.

Inhalt zuletzt geprüft: · erstellt und geprüft vom Arteon-Team

Häufige Fragen zur Umrechnung von CMYK in HEX

Kann ich eine Pantone-Nummer eingeben?

Nein. Das Feld erwartet vier CMYK-Zahlen, eine Pantone-Nummer steht dagegen für eine fertig gemischte Druckfarbe. CMYK- und HTML-Werte für Pantone-Farben nennt der Fächer Pantone Color Bridge[7], und dessen CMYK-Werte können Sie hier in einen Hex-Code umrechnen.

Was passiert, wenn ich nur drei Zahlen eingebe?

Das Ergebnisfeld bleibt leer, und darunter erscheint der Hinweis, dass sich die Eingabe nicht als CMYK-Farbe lesen lässt, mit einem Beispiel aus vier Zahlen. Bei fünf Zahlen passiert dasselbe, weil der Umrechner nicht rät, welche davon wegfallen soll.

Kann ich den Hex-Code aus diesem Umrechner in CSS verwenden?

Ja. Das Ergebnis hat die Form #RRGGBB, die jeder Browser versteht[2]. Die Schaltfläche Ergebnis kopieren kopiert den Code samt Raute.

Screenshot des kostenlosen Arteon-Werkzeugs: CMYK-Werte in einen Hex-Code umrechnen

Helfen Sie uns, unsere Werkzeuge zu verbessern

Haben Sie eine Idee für eine Funktion, einen Fehler gefunden oder einen Vorschlag für ein neues Werkzeug? Schreiben Sie uns.