HEX to CMYK Converter — Convert Web Colours to Print CMYK Values

Your website’s brand colour lives as a hex code, but the print shop wants ink percentages. This HEX to CMYK converter turns any hex colour — the full 6-digit code or the 3-digit shorthand — into the four CMYK values (cyan, magenta, yellow and black/key) a printer works with, alongside the RGB triplet and a CSS cmyk() line, with a live preview swatch. The conversion is the standard formula: black is drawn from the darkest side of the colour, K = 1 − max(R, G, B), and the other three inks are what remains of each channel once that black is removed. The preloaded colour, #0f766e, is this site’s deep teal and converts to C 87, M 0, Y 7, K 54 — figures you can cross-check with the reverse converter on this site. Everything happens in your browser. And keep the section below in mind: this is the faithful mathematical translation, which is what spec sheets need, but print appearance also depends on paper and press.

How a hex code becomes four ink percentages

Hex first becomes RGB: #0f766e is 15 red, 118 green, 110 blue. The CMYK formula then scales those to 0–1 (0.059, 0.463, 0.431) and asks how much black the colour contains: K = 1 − 0.463 = 0.537, printed as 54%. Black is extracted first because in printing, a shared black ink is cheaper and cleaner than building darkness from three coloured inks. Each remaining ink is then computed against what is left: cyan C = (1 − 0.059 − 0.537) / (1 − 0.537) ≈ 87%, magenta M = (1 − 0.463 − 0.537) / 0.463 = 0%, yellow Y = (1 − 0.431 − 0.537) / 0.463 ≈ 7%. Pure red #ff0000 gives the calibration answer 0, 100, 100, 0 — no cyan, no black, full magenta and yellow. Pure black is the special case: with K at 100%, the other inks are defined as 0 rather than computed, which the converter handles explicitly.

Why printers ask for CMYK at all

Screens mix light (additive RGB: more light, brighter colour); presses mix ink on paper (subtractive CMYK: more ink, darker colour). A hex code tells a press nothing directly, so artwork prepared in RGB arrives at the printer and gets converted by whatever default profile the shop uses — sometimes fine, sometimes a dull surprise, especially for saturated blues and greens that live outside the CMYK gamut entirely. Converting deliberately, and handing the printer your CMYK build, keeps the decision yours and makes the proof predictable. Business cards, flyers, packaging and exhibition graphics all start as somebody’s hex code; the builds from a converter like this are what go into the print-ready file’s colour definitions and the brand sheet the printer keeps on record.

The honest limits of a formula

This tool applies the standard mathematical conversion, which assumes an idealised press. Real output shifts with paper stock (coated vs uncoated), ink limits and the press profile — which is why a brand’s official CMYK build, when one exists, sometimes differs a point or two from the formula: it was tuned on proofs. Use the formula build as the starting point and, when the job is expensive or the colour is contractual, let the printer’s proof be the final word. Also know that very bright screen colours will print duller no matter who converts them: the CMYK gamut is smaller, and no formula prints a neon. Rich black is the opposite case — for large black areas printers often prefer a build like 60/40/40/100 over plain 0/0/0/100, which is a press choice, not something a converter should invent for you.

Frequently asked questions

What CMYK is #0f766e?

C 87%, M 0%, Y 7%, K 54% — the converter is preloaded with this colour so the worked example is on screen immediately.

Why does my colour print duller than it looks on screen?

Gamut. Screens can show colours — vivid blues, greens and neons — that four inks cannot reproduce. The CMYK values are still the closest faithful build; the difference is physics, not a conversion error.

What CMYK should I use for black text?

Plain 0, 0, 0, 100 — single-plate black keeps small text sharp. Multi-ink rich blacks are for large filled areas, and using them for body text causes registration blur.

Does the converter handle the 3-digit hex form?

Yes: #0f8 expands to #00ff88 first, then converts. Lengths other than 3 or 6 digits are rejected rather than guessed.

Related tools

Versión en español: Conversor de HEX a CMYK — Convierte Colores Web en Valores CMYK de Imprenta. You may also like: CMYK to HEX Converter — Convert Print Colours to Web Hex Codes · Hex to HSL Converter — Get HSL Values from Any Hex Colour.

Embed this tool on your website — free

Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;HEX to CMYK Converter — Convert Web Colours to Print CMYK Values&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;HEX to CMYK Converter&lt;/h2&gt; &lt;p class=&quot;sub&quot;&gt;Type any hex colour — #0f766e or the short form 0f8 — and get the CMYK ink percentages a printer needs, plus the RGB values, with a live preview.&lt;/p&gt; &lt;div class=&quot;row&quot;&gt; &lt;div style=&quot;flex:2&quot;&gt;&lt;label for=&quot;hexin&quot;&gt;Hex colour&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;hexin&quot; value=&quot;#0f766e&quot; spellcheck=&quot;false&quot; style=&quot;font-family:monospace;font-size:18px&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label for=&quot;picker&quot;&gt;Pick&lt;/label&gt;&lt;input type=&quot;color&quot; id=&quot;picker&quot; value=&quot;#0f766e&quot; style=&quot;width:100%;height:47px;padding:2px;border:1px solid #cbd5e1;border-radius:6px;background:#fff&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;swatch&quot; style=&quot;height:64px;border-radius:8px;margin:14px 0;border:1px solid #e2e8f0&quot;&gt;&lt;/div&gt; &lt;label&gt;CMYK&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;cmykout&quot; readonly style=&quot;font-family:monospace&quot;&gt;&lt;label&gt;RGB&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;rgbout&quot; readonly style=&quot;font-family:monospace&quot;&gt;&lt;label&gt;CSS&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;cssout&quot; readonly style=&quot;font-family:monospace&quot;&gt; &lt;p id=&quot;err&quot; class=&quot;err&quot; data-msg=&quot;That is not a valid hex colour — use 3 or 6 hex digits.&quot; style=&quot;font-size:14px;min-height:16px&quot;&gt;&lt;/p&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6270, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); //==CORE== function parseHex(hex){ if (typeof hex !== &#x27;string&#x27;) return null; var s = hex.trim().replace(/^#/, &#x27;&#x27;); if (/^[0-9a-fA-F]{3}$/.test(s)) s = s.split(&#x27;&#x27;).map(function(c){ return c + c; }).join(&#x27;&#x27;); if (!/^[0-9a-fA-F]{6}$/.test(s)) return null; return { r: parseInt(s.substring(0, 2), 16), g: parseInt(s.substring(2, 4), 16), b: parseInt(s.substring(4, 6), 16) }; } function rgbToHex(r, g, b){ function part(v){ v = Math.max(0, Math.min(255, Math.round(v))); return (&#x27;0&#x27; + v.toString(16)).slice(-2); } return &#x27;#&#x27; + part(r) + part(g) + part(b); } function rgbToHsl(r, g, b){ r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h = 0, s = 0, l = (max + min) / 2; if (max !== min){ var d = max - min; s = l &gt; 0.5 ? d / (2 - max - min) : d / (max + min); if (max === r) h = (g - b) / d + (g &lt; b ? 6 : 0); else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h *= 60; } return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) }; } function hslToRgb(h, s, l){ h = ((h % 360) + 360) % 360; s = Math.max(0, Math.min(100, s)) / 100; l = Math.max(0, Math.min(100, l)) / 100; var c = (1 - Math.abs(2 * l - 1)) * s; var x = c * (1 - Math.abs(((h / 60) % 2) - 1)); var m = l - c / 2, r = 0, g = 0, b = 0; if (h &lt; 60){ r = c; g = x; } else if (h &lt; 120){ r = x; g = c; } else if (h &lt; 180){ g = c; b = x; } else if (h &lt; 240){ g = x; b = c; } else if (h &lt; 300){ r = x; b = c; } else { r = c; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) }; } function rgbToCmyk(r, g, b){ var rp = r / 255, gp = g / 255, bp = b / 255; var k = 1 - Math.max(rp, gp, bp); if (k &gt;= 0.9999) return { c: 0, m: 0, y: 0, k: 100 }; var d = 1 - k; return { c: Math.round(((1 - rp - k) / d) * 100), m: Math.round(((1 - gp - k) / d) * 100), y: Math.round(((1 - bp - k) / d) * 100), k: Math.round(k * 100) }; } function cmykToRgb(c, m, y, k){ c /= 100; m /= 100; y /= 100; k /= 100; return { r: Math.round(255 * (1 - c) * (1 - k)), g: Math.round(255 * (1 - m) * (1 - k)), b: Math.round(255 * (1 - y) * (1 - k)) }; } //==/CORE== var hexIn = document.getElementById(&#x27;hexin&#x27;), picker = document.getElementById(&#x27;picker&#x27;), err = document.getElementById(&#x27;err&#x27;); function run(){ var c = parseHex(hexIn.value); if (!c){ err.textContent = err.getAttribute(&#x27;data-msg&#x27;); return; } err.textContent = &#x27;&#x27;; var cm = rgbToCmyk(c.r, c.g, c.b); document.getElementById(&#x27;cmykout&#x27;).value = cm.c + &#x27;%, &#x27; + cm.m + &#x27;%, &#x27; + cm.y + &#x27;%, &#x27; + cm.k + &#x27;%&#x27;; document.getElementById(&#x27;rgbout&#x27;).value = c.r + &#x27;, &#x27; + c.g + &#x27;, &#x27; + c.b; document.getElementById(&#x27;cssout&#x27;).value = &#x27;cmyk(&#x27; + cm.c + &#x27;%, &#x27; + cm.m + &#x27;%, &#x27; + cm.y + &#x27;%, &#x27; + cm.k + &#x27;%)&#x27;; document.getElementById(&#x27;swatch&#x27;).style.background = rgbToHex(c.r, c.g, c.b); picker.value = rgbToHex(c.r, c.g, c.b); if (window.sendH) sendH(); } hexIn.addEventListener(&#x27;input&#x27;, run); picker.addEventListener(&#x27;input&#x27;, function(){ hexIn.value = picker.value; run(); }); run(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6270" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/hex-to-cmyk-converter/" target="_blank" rel="noopener">HEX to CMYK Converter — Convert Web Colours to Print CMYK Values</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — free online tools</p>