Hex to CMYK Converter

What Is a Hex to CMYK Converter?

// sRGB hex → naive CMYK approximation
// NOTE: This is the textbook K = 1 - max(R,G,B); C = (1-R-K)/(1-K) formula.
// It is NOT an ICC-profile conversion. Real print accuracy requires color
// management against the specific press (US Web Coated SWOP v2, Fogra39,
// Japan Color 2011 Coated, etc.), ink set, and paper substrate. Channel
// values can drift 5-15% from this naive output once ICC conversion runs.
// Use as estimate for proofs, briefs, and digital press — never as a press-
// ready deliverable.
function hexToCmyk(hex) {
  const h = hex.trim().replace(/^#/, '');
  const [r, g, b] = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  const k = 1 - Math.max(r, g, b);
  // Pure black short-circuit: max RGB = 0 ⇒ K = 1, C/M/Y undefined (0/0)
  if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
  const c = (1 - r - k) / (1 - k);
  const m = (1 - g - k) / (1 - k);
  const y = (1 - b - k) / (1 - k);
  return { c: Math.round(c * 100), m: Math.round(m * 100), y: Math.round(y * 100), k: Math.round(k * 100) };
}
console.log(hexToCmyk('#3b82f6')); // → { c: 76, m: 47, y: 0, k: 4 }
console.log(hexToCmyk('#FF5733')); // → { c: 0, m: 66, y: 80, k: 0 }
console.log(hexToCmyk('#000000')); // → { c: 0, m: 0, y: 0, k: 100 }

Key Features

Hex to CMYK Converter Alternatives

Hex to CMYK Examples

#3b82f6

#FF5733

#0F172A

#FF0000

Common Hex → CMYK Conversions

Reference table of 10 canonical colors with their HEX and naive CMYK equivalents. Values use the textbook `K = 1 - max(R,G,B); C = (1-R-K)/(1-K)` formula rounded to integer percent. **Reminder**: these are naive approximations, not ICC-correct press-ready values. For production print runs, confirm with your print shop's ICC profile against the actual press, ink, and paper.

How to Use the Hex to CMYK Converter

1. 1

   Paste a hex code into the HEX field

   Drop any hex value into the HEX input — with or without the leading `#`, in 3-digit shorthand (`#F73`), 6-digit full form (`#FF5733`), 4-digit alpha shorthand (`#F738`), or 8-digit alpha full form (`#FF5733CC`). The parser normalizes all five input shapes into the same internal color before deriving CMYK. Capitalization doesn't matter (`#FF5733` and `#ff5733` parse identically). Invalid characters or wrong digit counts produce a quiet inline error; valid hex updates every other format field in real time, including CMYK. Alpha is ignored for the CMYK derivation — ink doesn't have transparency.

2. 2

   Read the CMYK percentages from the CMYK field

   The CMYK field surfaces the value as four channel percentages: `cmyk(76%, 47%, 0%, 4%)` for Tailwind blue-500. Channels are Cyan, Magenta, Yellow, Key (black). Each percentage represents ink coverage — 0% means no ink for that channel, 100% means full coverage. **Reminder**: this is a naive sRGB inversion, not an ICC-profile conversion. Use it as a starting estimate; confirm the final values with your print shop's ICC pipeline against the actual press, ink, and paper before any production run.

3. 3

   Click Copy to grab the CMYK string

   Each format card has a Copy button on the right. One click and the value lands on your clipboard — the button label briefly flashes "Copied!" so you know. The copied string is the standard CMYK notation (`cmyk(76%, 47%, 0%, 4%)`), ready to drop into a design brief or vendor email. For platform-specific output where CMYK isn't native (CSS, SwiftUI, Compose, Flutter all work in RGB-based color spaces), the Copy as code section below the picker emits the equivalent in each platform's format — useful when you need the same color expressed for both a screen target and a print target.

4. 4

   Cross-check with RGB, HSL, OKLCH, named color

   The same hex you paste lights up the other format fields too — RGB for canvas calls and hardware, HSL for legacy CSS, OKLCH and OKLAB for modern perceptually-uniform design systems (Tailwind v4, shadcn/ui), HSV and HWB for designer color-picker UIs, and the closest CSS named color for documentation prose. You're never locked into hex → CMYK only. The picker (SL square + hue slider + alpha slider) drives all nine simultaneously, and on Chromium browsers the EyeDropper button samples any pixel on screen, including outside the browser.

5. 5

   Send the source hex (not the CMYK) to the print shop

   The best print-prep workflow is to send the source hex (or the OKLCH triple) to the print shop and let their prepress team produce the press-ready CMYK via the appropriate ICC profile (US Web Coated SWOP v2, Fogra39, Japan Color 2011 Coated, or a press-specific custom profile). The naive CMYK output here is for your internal estimates, vendor briefs, and proof-of-concept work — not for direct production. Pair the naive CMYK with the source hex in any spec document so the printer has the authoritative reference.

Common Hex / CMYK Mistakes

Spec sent to printer:
Brand color CMYK: cmyk(76%, 47%, 0%, 4%)
(naive formula output, no ICC conversion)
Printer ships press-ready files unchanged.
Final piece: washed-out, off-brand blue.

Spec sent to printer:
Brand color source: #3b82f6
Naive CMYK estimate: cmyk(76%, 47%, 0%, 4%)
Target press: ICC-correct via US Web Coated SWOP v2
Printer runs ICC conversion: cmyk(82%, 53%, 0%, 0%) (example shift)
Final piece: matches the digital proof.

Approve the screen color, expect identical print:
#FF0000 looks vivid red on monitor
Naive cmyk(0%, 100%, 100%, 0%)
Printer runs ICC: closest in-gamut CMYK
Final print: orange-shifted red, ~20% less saturated.
Reaction: "this is wrong, reprint".

Budget time for a wet proof; accept gamut mismatch:
#FF0000 → CMYK approximation: cmyk(0%, ~95%, ~95%, 0%) ICC
Wet proof on actual stock: orange-shifted, less saturated
Design team approves the proof as the new reference
Final print matches the approved proof.

Specify high-coverage dark color without checking total:
cmyk(85%, 85%, 85%, 95%) = 350% total coverage
Send to newsprint press (220% limit)
Result: ink doesn't dry, sheets stick together, smear damage.

Check total ink coverage against press limit:
cmyk(85%, 85%, 85%, 95%) = 350% — over newsprint's 220% limit
Reduce via GCR / UCR: cmyk(40%, 30%, 30%, 80%) = 180% total
Fits limit, prints clean, dries on schedule.

Specify brand CMYK without stock detail:
Brand red: cmyk(0%, 95%, 80%, 0%)
Print on glossy coated AND uncoated stock from same file
Glossy: vivid red as expected
Uncoated: dull orange-red, looks off-brand.

Specify CMYK per substrate, ICC-correct for each:
Brand red on glossy coated: cmyk(0%, 95%, 80%, 0%) via Fogra39
Brand red on uncoated: cmyk(0%, 85%, 70%, 0%) via Fogra47
Each stock gets the press-ready CMYK tuned to its ICC profile.
Both pieces read as the same brand red on press.

Who Uses Hex to CMYK

Print Designers Prepping Vendor Briefs

Before commissioning a print job, designers send the print shop a brief with brand colors specified in both hex (the source of truth) and a CMYK approximation (so the printer can ballpark ink costs and proofing time). Paste each brand hex here, copy the naive CMYK, drop both into the spec document. The printer then runs the actual ICC conversion against their press profile and produces the press-ready CMYK before plating. Don't skip the source hex — that's what the print shop will trust for the final conversion.

Brand Managers Estimating Print Costs Before Quote

Print quotes depend partly on total ink coverage. Naive CMYK gives a quick ballpark of the ink load for a proposed palette: high-K colors are cheaper (less ink, faster drying), high-CMY colors are more expensive (more ink, longer drying, risk of paper saturation). Paste the candidate brand hex, read the CMYK percentages, and you have a defensible number for the budget conversation with the print provider before committing to a full press setup.

Packaging Designers Cross-Checking Screen vs. Print

Packaging work lives in both spaces simultaneously — the e-commerce product page renders in sRGB hex on screens, the physical box prints in CMYK on the carton stock. Use the simultaneous hex + CMYK view to spot colors that will read dramatically different across the two media (highly saturated reds, deep blues, vivid greens that exceed CMYK's gamut), and flag those colors for either Pantone spot treatment or deliberate brand-system adjustment that accepts the gamut difference.

Marketing Teams Producing Multi-Channel Campaigns

A multi-channel campaign typically delivers the same brand asset to a website (sRGB hex), an email blast (sRGB hex with sRGB fallback), social media graphics (sRGB hex on platforms that compress to AVIF/WebP), printed posters (CMYK on coated stock), and direct-mail pieces (CMYK on uncoated stock). Convert the source hex once, read the naive CMYK for the print pieces, hand off both to the production team along with the press profile spec so they can do the proper ICC conversion.

Designers Doing Digital Press Short Runs

For one-off business cards, prototype packaging, and small-batch marketing collateral going through a digital press (HP Indigo, Kodak NexPress, Xerox iGen), the naive CMYK approximation tracks the actual output more closely than it does on offset because digital presses operate with tighter color management built into the RIP. Still not press-ready, but closer — and the short run economics mean a test print before committing is cheap. Paste the hex, read the CMYK, run a test.

Designers Migrating Old Logos From Screen to Print

Old web-only brand assets often live as hex codes only, with no formal CMYK spec. When the brand needs to appear on a printed business card, brochure, or trade-show banner for the first time, the team needs a CMYK starting point. Paste each legacy hex here, read the naive CMYK, hand both off to the printer for the ICC-correct conversion. This is the canonical "digital-first brand goes to print" workflow that hits every design team eventually.

Educators Teaching Color-Model Differences

The simultaneous hex + RGB + CMYK view makes the additive-vs-subtractive contrast obvious. Pure red (`#FF0000`) renders as `rgb(255, 0, 0)` on screen and `cmyk(0%, 100%, 100%, 0%)` in naive CMYK — students see the inversion directly. Push to a wide-gamut OKLCH color, watch CMYK saturate while sRGB clips. A classroom-ready demonstration of why screen-to-print conversion is a hard problem and why the naive formula isn't the same as ICC-aware color management.

Hex to CMYK Math & ICC Caveat

The Naive CMYK Formula

Operates on normalized sRGB values (0-1 floats from the original 0-255 integers). Step one: `K = 1 - max(R, G, B)`. This sets K to the amount of "missing brightness" — pure white (R=G=B=1) yields K=0, pure black (R=G=B=0) yields K=1. Step two: `C = (1 - R - K) / (1 - K); M = (1 - G - K) / (1 - K); Y = (1 - B - K) / (1 - K)`. This computes each CMY channel as the remaining inversion after accounting for K. Step three: multiply each channel by 100 for the percentage form and round to the nearest integer for display. Pure black short-circuit: when max(R,G,B) = 0, the denominator (1 - K) is zero, so we return `cmyk(0%, 0%, 0%, 100%)` directly.

Why This Is NOT an ICC Conversion

A real ICC profile conversion applies a multi-stage transform: source profile (sRGB) → Profile Connection Space (typically CIE LAB or XYZ) → output profile (US Web Coated SWOP v2, Fogra39, etc.). Each stage encodes empirical measurements of the actual ink-paper-press combination — spectral reflectance curves, dot gain at various coverage levels, total ink limit, gray balance adjustments. The naive formula does none of this. It treats CMYK as a math abstraction rather than as ink absorption physics, which is why the output can drift 5-15% per channel from what an ICC pipeline produces. For production, run the conversion in Photoshop, Illustrator, or InDesign against the target press profile, or hand the source hex to the print shop's prepress team.

Standard ICC Profiles by Region and Press

**North American offset**: US Web Coated SWOP v2 (the SWOP-certified standard for coated stock, used by most US commercial offset shops); GRACoL 2006 Coated #1 for premium coated. **European offset**: Fogra39 (ISO 12647-2 standard for coated stock); Fogra51 for newer premium coated; Fogra52 for uncoated; Fogra47 for newsprint. **Japanese offset**: Japan Color 2011 Coated; Japan Color 2003 Web Coated for web offset. **Digital presses**: each vendor ships their own ICC profile for the specific press model and ink set (HP Indigo IndiChrome, Kodak NexPress E-Series, Xerox iGen). Always confirm with the print shop — many have a custom press-specific profile that supersedes the generic standards.

Dot Gain, Total Ink Limit, and Substrate Effects

**Dot gain**: ink dots physically spread as they hit absorbent paper, increasing apparent coverage by 10-30% per channel; the press operator compensates with curves in the RIP. The naive formula ignores this entirely. **Total ink limit**: offset presses cap total C+M+Y+K coverage around 280-320% to avoid set-off (wet ink transferring to the back of the next sheet) and prevent paper saturation; newsprint caps around 220%. The naive formula can produce 400% total coverage for dark colors, which would be unprintable. **Substrate**: cream paper shifts the white point and warms every printed color; uncoated stock absorbs more ink and dulls saturation; glossy coated stock holds the most saturation but reflects light differently.

Why K Exists (Black Generation)

In theory C+M+Y at 100% each yields black. In practice it yields a muddy dark brown because real inks aren't ideal absorbers — each ink reflects some light at every wavelength, perfect overprint is impossible due to ink mixing and dot gain. K solves three problems: pure black ink produces a clean crisp black for typography and shadows; the K substitution lets the formula reduce total ink coverage (cheaper ink, faster drying, less paper saturation); and a dedicated K plate keeps text registration tighter (only one plate needs to align, vs. three for body text built from CMY). The naive formula's K = 1 - max(R,G,B) is the simplest possible K generation strategy; real prepress uses UCR (Under Color Removal) and GCR (Gray Component Replacement) strategies that move more or less of the CMY into K based on the press characteristics.

Gamut Mismatch: sRGB Reds That CMYK Can't Reach

sRGB and CMYK have differently-shaped gamuts. sRGB can reach saturated reds, deep blues, and vivid greens that fall outside CMYK's printable range — the famous "pure red on screen looks orange in print" case. The naive formula reports `cmyk(0%, 100%, 100%, 0%)` for `#FF0000`, but no actual ink combination at any coverage level can reproduce that exact screen color on paper. An ICC conversion uses one of four rendering intents to handle the gamut mismatch: Perceptual (compresses the entire source gamut to fit the destination, preserving overall color relationships), Relative Colorimetric (clips out-of-gamut colors to the nearest in-gamut value, preserves in-gamut colors exactly), Absolute Colorimetric (similar to Relative but doesn't compensate for white-point differences), or Saturation (preserves saturation at the cost of accuracy, used mostly for business graphics).

Round-Trip Stability Through OKLCH Source-of-Truth

The tool's internal canonical representation is OKLCH (per the unified hub design), not CMYK. CMYK is derived from OKLCH on every keystroke via the chain OKLCH → OKLAB → XYZ D65 → linear-sRGB → sRGB → naive CMYK. This means editing CMYK directly is also supported: parse the four percentages, run the inverse formula to recover sRGB (`R = (1 - C) * (1 - K); G = (1 - M) * (1 - K); B = (1 - Y) * (1 - K)`), update the OKLCH source, then re-render every other field. Round-trips are stable but lossy at the edges of CMYK's gamut, where the inverse maps multiple sRGB colors to the same CMYK approximation.

Best Practices for Hex / CMYK Workflows

Confirm the Actual CMYK With Your Print Provider's ICC Profile

Before any production run, confirm the press-ready CMYK with the print shop's ICC pipeline against the actual press, ink, and paper combination. The naive output here can drift 5-15% per channel from the ICC-correct value, which is enough to turn a sharp red into a muddy orange or a deep brand blue into a washed-out navy. The shop's prepress team is the authoritative source — give them the source hex (not the naive CMYK) and let them run their own conversion against US Web Coated SWOP v2, Fogra39, Japan Color 2011 Coated, or a press-specific custom profile.

Use This Tool's CMYK as a Starting Estimate for Budget / Scope

Naive CMYK is genuinely useful for ballpark estimates: total ink coverage for cost conversations, rough K dominance for darkness checks, quick gamut sanity for the "will this color even print" question. Use it for the budget call, the vendor brief, the scope conversation. Then hand off the source hex to the print shop for the actual press-ready conversion. Don't ship the naive output as a production deliverable; do ship it as a planning artifact.

For Pantone Matching, the Print Shop's Spot-Color Library Overrides Everything

Pantone (and HKS, RAL, Toyo) spot colors are pre-mixed inks with their own fixed color identity — they don't get built from process CMYK channels. If your brand requires Pantone matching (common for packaging, premium print, anything where exact color is critical), the shop will use the Pantone ink directly and CMYK doesn't enter the picture. Specify the Pantone number in the brief; ignore both the naive and ICC-correct CMYK values for that color. CMYK only matters when the job runs purely in process colors with no spot ink.

Send the Source HEX or OKLCH to the Print Shop, Not the Naive CMYK

The print shop's prepress team needs the authoritative source color so they can run the conversion against their press profile. Hand them the source hex (or OKLCH for modern brand systems) plus any spot-color callouts (Pantone numbers). Never hand them the naive CMYK as the deliverable — they have no way to know whether the values came from a naive formula, an old Photoshop conversion against a different press profile, or an actual ICC-correct conversion against the right profile. Source data avoids the ambiguity.

Verify the K Channel Is Reasonable (K=100 for Pure Black Only)

Sanity-check the K value after conversion. Pure black (`#000000`) should yield K=100 with C=M=Y=0. Near-black dark colors should land in the K=80-95 range with low CMY. Mid-tones (mid-saturation, mid-lightness) should land somewhere in K=20-60. Bright saturated colors should sit at K=0 with one or two CMY channels at high coverage. If you see K values outside these patterns for a given color's perceived brightness, double-check the input hex — a typo can flip a color from "near-black" to "near-white" silently. The CMYK output makes the input mistake visible.

Run a Wet Proof on Actual Stock Before Production

For any production run that matters, get a wet proof from the print shop on the actual paper stock with the actual inks before signing off. Soft proofs (on-screen ICC simulations) are useful but never perfect — paper texture, ink density, and viewing-light spectrum all affect the final perception. Budget time and money for at least one wet proof iteration. The naive CMYK here, the ICC-correct CMYK, and the wet proof are three increasingly-accurate snapshots of the same color; the wet proof is the only one that matches the final printed piece exactly.

Document the Source Hex Alongside the Final CMYK

Once the print shop produces the press-ready CMYK and you sign off on the proof, document both the source hex and the final ICC-correct CMYK in the brand specification. Six months later, when someone needs to reprint or extend the palette, both values preserve the full provenance trail — the source for re-conversion against a different press, the locked CMYK for re-printing on the same press. Naive CMYK belongs in the brief stage only; press-ready CMYK belongs in the locked spec.

Frequently Asked Questions