Hex-Code in die vier CMYK-Druckfarben umrechnen

Inhalt zuletzt geprüft:

Geben Sie einen Farbcode ein, und die CMYK-Werte erscheinen schon beim Tippen: #3B82F6 ergibt cmyk(76%, 47%, 0%, 4%). Der Umrechner arbeitet mit der Standardformel ohne Druckprofil. Das Ergebnis ist ein schneller Anhaltspunkt, die Werte für die Druckdatei liefert Ihr Grafikprogramm mit dem Profil, das Ihre Druckerei vorgibt.

nach

Wie rechnet man einen Hex-Code in CMYK um?

Zuerst wird der Code zu drei Zahlen, danach werden diese Zahlen zu vier Farbanteilen. Der Code #3B82F6 besteht aus drei Zeichenpaaren: 3B, 82 und F6. Jedes Paar ist eine Zahl im Sechzehnersystem, in dem nach den Ziffern 0 bis 9 die Buchstaben A bis F für die Werte 10 bis 15 stehen. 3B bedeutet also 3 × 16 + 11, das sind 59, aus 82 wird 130 und aus F6 wird 246.


Die Formel: K = 1 − (größter Kanal ÷ 255), danach C = (1 − R ÷ 255 − K) ÷ (1 − K). Magenta berechnen Sie genauso aus dem Grünkanal, Gelb aus dem Blaukanal.


In #3B82F6 ist der Blaukanal am hellsten. 246 ÷ 255 ergibt 0,965, Schwarz liegt also bei 0,035, das sind 4%. Cyan kommt auf 76%, Magenta auf 47% und Gelb auf 0%, weil der Blaukanal das Schwarz bestimmt hat. Das Ergebnis lautet cmyk(76%, 47%, 0%, 4%).


In zwei Schritten kommen Sie mit dem HEX-in-RGB-Umrechner und danach dem RGB-in-CMYK-Umrechner zum selben Ergebnis. CMYK-Werte aus einem Styleguide rechnen Sie mit dem CMYK-in-HEX-Umrechner in einen Code zurück.

Was ist ein Hex-Code, und was sind CMYK-Werte?

Ein Hex-Code beschreibt eine Bildschirmfarbe im Hexadezimalsystem. Die sechs Zeichen nach der Raute bilden drei Paare für rotes, grünes und blaues Licht, und jedes Paar reicht von 00 bis FF, also von 0 bis 255. Groß- und Kleinschreibung spielt keine Rolle. CSS erlaubt außerdem eine Kurzform aus drei Zeichen, bei der jedes Zeichen verdoppelt wird, #38F steht also für #3388FF, und eine Form mit acht Zeichen, deren letztes Paar die Transparenz angibt[1]. Hex-Codes aus einem Foto holen Sie mit dem Bild-Farbextraktor heraus.


Das CMYK-Farbmodell beschreibt Farbe als Druckfarbe. Die vier Zahlen geben an, welcher Anteil des Papiers mit Cyan, Magenta, Gelb und Schwarz bedeckt wird. Das K geht nach den Standardwerken des Vierfarbdrucks auf die Schlüsselplatte zurück, englisch key plate, die das Schwarz druckt[2]. Null bedeutet blankes Papier, 100 volle Deckung.


Die beiden Skalen laufen in entgegengesetzte Richtungen. Ein Bildschirm leuchtet, daher wird die Farbe mit höheren Paaren im Hex-Code heller. Papier wirft Licht zurück und Farbe schluckt es, daher wird es mit höheren CMYK-Werten dunkler. Druckfarbe kennt auch keine Transparenz, darum lässt der Umrechner das letzte Paar eines achtstelligen Codes weg.


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

Welche CMYK-Werte haben gängige Hex-Codes?

Die Übersicht enthält die Grundfarben des Bildschirms und die Farben, die in CSS einen Namen haben. Alle Werte hat der Umrechner berechnet, Sie sehen also dieselben Zahlen, wenn Sie den Code ins Feld eingeben.
Hex-CodeName in CSSCMYK-Werte
#FFFFFFwhite0%, 0%, 0%, 0%
#000000black0%, 0%, 0%, 100%
#FF0000red0%, 100%, 100%, 0%
#00FF00lime100%, 0%, 100%, 0%
#0000FFblue100%, 100%, 0%, 0%
#FFFF00yellow0%, 0%, 100%, 0%
#00FFFFaqua100%, 0%, 0%, 0%
#FF00FFfuchsia0%, 100%, 0%, 0%
#C0C0C0silver0%, 0%, 0%, 25%
#808080gray0%, 0%, 0%, 50%
#800000maroon0%, 100%, 100%, 50%
#008000green100%, 0%, 100%, 50%
#000080navy100%, 100%, 0%, 50%
#800080purple0%, 100%, 0%, 50%
#FFA500orange0%, 35%, 100%, 0%
Maroon, green, navy und purple bekommen jeweils 50% Schwarz, weil ihr hellster Kanal bei 128 liegt, ungefähr der Hälfte des Höchstwerts. Die Farbnamen stammen aus der Spezifikation CSS Color Module Level 4[1].

Warum zeigt Photoshop andere CMYK-Werte als ein Rechner?

Die Formel geht von idealen Druckfarben aus, ein Grafikprogramm rechnet dagegen mit einem ICC-Profil, also einer Beschreibung bestimmter Farben, eines Papiers und eines Druckverfahrens. Am deutlichsten wird der Unterschied bei Schwarz und Grau. Die Formel setzt immer mindestens eine der drei Buntfarben auf null und überlässt das ganze Grau der schwarzen Farbe, #808080 wird für sie also zu 50% Schwarz und sonst nichts. Das Profil PSO Coated v3 für gestrichenes Papier arbeitet mit mittlerem Schwarzaufbau, begrenzt Schwarz auf 96% und den Gesamtfarbauftrag auf 300%[3]. Mit diesem Profil setzt sich dasselbe Grau deshalb aus allen vier Farben zusammen.

Aufgefächerter Pantone-Farbfächer mit violetten und roten Mustern und Etiketten mit vier Zahlen neben kleinen Quadraten in den Druckfarben
Ein Pantone-Fächer trägt neben jedem Muster mit dem Kürzel CP vier Zahlen, gedruckt neben kleinen Quadraten in den Druckfarben. PANTONE 2655 CP besteht aus 54% Cyan und 61% Magenta ohne Gelb und Schwarz, was der Umrechner als cmyk(54%, 61%, 0%, 0%) schreibt. Foto: Bent Van Aeken, Unsplash

Wenn Sie Werte für eine Druckdatei brauchen, klicken Sie in Photoshop im Werkzeugbedienfeld in das obere Farbauswahlfeld. Es öffnet sich der Adobe-Farbwähler, in dem Sie den Code in das Textfeld „#“ eingeben und die Werte C, M, Y und K daneben ablesen. Welche Farben druckbar sind, hängt vom CMYK-Arbeitsfarbraum ab, den Sie unter Bearbeiten › Farbeinstellungen festlegen. Erscheint ein Warndreieck, liegt die Farbe außerhalb des druckbaren Bereichs, und ein Klick darauf wählt die nächstliegende CMYK-Farbe[4].

Wie viel Farbe bekommt derselbe Code mit der Formel und mit einem Druckprofil?

Die Profilspalte haben wir mit der Bibliothek Little CMS[5] und dem Profil PSO Coated v3 der European Color Initiative[6] berechnet, farbmetrisch relativ mit Tiefenkompensierung. Die perzeptive Umrechnung weicht um einige Prozentpunkte ab.
Hex-CodeFormel (dieser Umrechner)Profil PSO Coated v3Gesamtfarbauftrag mit Profil
#0000000%, 0%, 0%, 100%83%, 67%, 51%, 95%296%
#3333330%, 0%, 0%, 80%63%, 53%, 45%, 68%229%
#8080800%, 0%, 0%, 50%44%, 36%, 33%, 23%136%
#FF00000%, 100%, 100%, 0%0%, 96%, 100%, 0%196%
#0000FF100%, 100%, 0%, 0%98%, 82%, 0%, 0%180%
#3B82F676%, 47%, 0%, 4%76%, 47%, 0%, 0%123%
#FFCC000%, 20%, 100%, 0%0%, 19%, 90%, 0%109%
Schwarz #000000 braucht mit dem Profil 296% Farbe, also fast die ganzen erlaubten 300%. Bei #3B82F6 unterscheiden sich beide Spalten nur im Schwarz: Die Formel gibt 4% dazu, das Profil keines.

Welche CMYK-Werte nennt das Corporate Design der Bundesregierung?

Der Styleguide der Bundesregierung gibt für jede Farbe einen HEX-Wert für Bildschirm und Office-Programme und einen CMYK-Wert für den Druck an[7]. Die letzte Spalte zeigt, was die Formel aus demselben HEX-Wert macht.
FarbeHEX-Wert im StyleguideCMYK im StyleguideCMYK nach der Formel
Schwarz (Nationalfarbe)#0000000%, 0%, 0%, 100%0%, 0%, 0%, 100%
Rot (Nationalfarbe)#FF00000%, 100%, 100%, 0%0%, 100%, 100%, 0%
Gold (Nationalfarbe)#FFCC000%, 12%, 100%, 5%0%, 20%, 100%, 0%
Blau#0077B6100%, 40%, 0%, 0%100%, 35%, 0%, 29%
Dunkelblau#004B76100%, 50%, 0%, 45%100%, 36%, 0%, 54%
Grün#00854A100%, 0%, 100%, 20%100%, 0%, 44%, 48%
Rot#C0003C0%, 100%, 65%, 10%0%, 100%, 69%, 25%
Gelb#F9E03A0%, 0%, 90%, 0%0%, 10%, 77%, 2%
Violett#5F316E80%, 100%, 20%, 10%14%, 55%, 0%, 57%
Beim Violett liegen Formel und Styleguide am weitesten auseinander: Die Formel macht daraus einen Farbton mit 57% Schwarz, der Styleguide druckt ihn mit 80% Cyan und 100% Magenta. Hat Ihr Unternehmen ein eigenes Corporate Design, nehmen Sie die CMYK-Werte von dort und den Umrechner nur für Farben, die das Handbuch nicht nennt.

Welche Schreibweisen eines Hex-Codes 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
#3B82F6cmyk(76%, 47%, 0%, 4%)Einen vollständigen Code mit Raute, wie im Stylesheet oder in Figma, rechnen wir unverändert um.
3b82f6cmyk(76%, 47%, 0%, 4%)Auch ohne Raute und in Kleinbuchstaben funktioniert der Code, weil die Schreibweise der Buchstaben nichts ändert.
#38Fcmyk(80%, 47%, 0%, 0%)Die Kurzform mit drei Zeichen erweitern wir, indem wir jedes Zeichen verdoppeln, und rechnen mit #3388FF.
#3B82F680cmyk(76%, 47%, 0%, 4%)Das letzte Paar für die Transparenz lassen wir weg, weil Druckfarbe auf Papier keine Transparenz hat.
color: #3B82F6;cmyk(76%, 47%, 0%, 4%)Aus einer Zeile, die aus einem Stylesheet oder den Entwicklertools des Browsers stammt, nehmen wir nur den Code.
"#3B82F6"cmyk(76%, 47%, 0%, 4%)Die Anführungszeichen, mit denen ein Code aus einer JSON-Datei oder aus JavaScript kommt, entfernen wir vor der Umrechnung.
##3B82F6cmyk(76%, 47%, 0%, 4%)Eine doppelte Raute entsteht, wenn Sie einen Code dort einfügen, wo schon eine Raute stand, deshalb lesen wir sie wie eine einfache.

Andere Einheiten in CMYK umrechnen

HEX in andere Einheiten umrechnen

Quellen

  1. CSS Color Module Level 4: The RGB Hexadecimal Notations — W3C (englische Version)
  2. CMYK-Farbmodell — Wikipedia
  3. PSOcoated_v3.icc — Eintrag im Profilregister — International Color Consortium (englische Version)
  4. Auswählen von Farben in Adobe Photoshop — Adobe
  5. Little CMS — Marti Maria (englische Version)
  6. Downloads: ICC profiles from ECI — European Color Initiative (englische Version)
  7. Das Corporate Design der Bundesregierung: Farben — Die Bundesregierung
  8. Color Bridge Guide Coated — Pantone (englische Version)
  9. Pantone Guides With Suffix Of PC or EC — X-Rite (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 HEX in CMYK

Sieht die gedruckte Farbe so aus wie die Hex-Farbe am Bildschirm?

Nicht immer. Die kräftigsten Bildschirmfarben liegen außerhalb dessen, was vier Druckfarben auf Papier darstellen können. Wir haben reines Blau #0000FF in das Profil PSO Coated v3 und zurück auf den Bildschirm gerechnet: Es kam als rgb(29, 60, 145) zurück, also deutlich dunkler. Reines Grün #00FF00 wurde zu rgb(102, 179, 41), Grau #808080 blieb unverändert. Bei einer großen Auflage lohnt sich ein Proof von der Druckerei.

Lässt sich ein Hex-Code in eine Pantone-Farbe umrechnen?

Nicht mit einer Formel. Pantone-Farben sind fertig gemischte Druckfarben mit eigener Nummer im Fächer. Die nächsten Entsprechungen zeigt der Fächer Pantone Color Bridge, der 2 587 Pantone-Farben den nächstliegenden CMYK-Werten gegenüberstellt und auch HTML- und RGB-Werte nennt[8]. Muster mit dem Kürzel CP sind darin Nachbildungen im Vierfarbdruck auf gestrichenem Papier[9].

Was tun, wenn die Farbe als RGB und nicht als Hex-Code vorliegt?

Geben Sie die drei Zahlen in den RGB-in-CMYK-Umrechner ein, der mit derselben Formel rechnet. Dieses Feld nimmt nur Hex-Codes an und zeigt bei anderen Eingaben einen Hinweis mit einem Beispiel für einen gültigen Code.

Bedeutet Weiß #FFFFFF im Druck weiße Farbe?

Nein. cmyk(0%, 0%, 0%, 0%) bedeutet, dass gar keine Farbe gedruckt wird und das Papier zu sehen ist. Auf weißem Papier ergibt das Weiß, auf cremefarbenem oder grauem Papier die Farbe des Papiers.

Screenshot des kostenlosen Arteon-Werkzeugs: Hex-Code in die vier CMYK-Druckfarben 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.