The website launched with a vivid cyan accent. The business cards came back gray-green. Reprint. Rush fee. Slack thread about "why doesn't print match the brand?"
Screens emit light. Paper absorbs ink. No converter fixes that physics problem. You can still build palettes that survive the handoff if you check gamut before the PDF goes to the vendor.
What is print gamut (and why HEX lies to you)?
Gamut is the range of colors a medium can reproduce. sRGB on a monitor covers bright cyans, electric greens, and deep saturated blues that four-color process (CMYK) cannot hit.
When you convert #00FF00 to CMYK, the engine finds the closest printable mix of cyan, magenta, yellow, and black. Closest is not identical. Sometimes it is not even close.
That is not a bug in your converter. It is the gap between additive (RGB) and subtractive (CMYK) color. The CMYK model page walks through the four inks. The rest of this guide is about deciding which screen colors are worth sending to those inks.
RGB vs CMYK: choosing colors that survive print
RGB and CMYK are not two spellings of the same color.
- RGB is additive. A display emits red, green, and blue light. A web hex value is an sRGB code: three channels that a browser paints on a screen.
#00FF00is the green corner of that encoding. It is allowed on a monitor. It is not a recipe for ink. - CMYK is subtractive. A press lays cyan, magenta, yellow, and black ink on paper, and the paper reflects whatever light the ink does not absorb. The set of colors that ink can make is smaller than sRGB, especially in saturated greens, cyans, and blues.
Adobe's color-mode documentation makes the practical split: RGB for on-screen work, CMYK when you are preparing a process-color print file. Source: Adobe, "Color modes".
Choosing a color that survives means picking an sRGB value whose printable neighbor is still the color you meant.
- Stay off the edges of sRGB when print is part of the job. Pure
#00FF00is inside the screen encoding and outside what four-color process can hit. A slightly darker, slightly less saturated green usually moves less. - Prefer a mid-saturation seed if the same hue has to appear on a package and a website. You can still use a brighter accent on screen. Mark it as screen-only.
- Compare the screen color to the press preview before you fall in love with it. The print gamut checker converts to CMYK and back and shows the shift. A large round trip means the press will substitute a duller color.
- Do not promise a match you have not proofed. Paper, coating, and the press change the result even when the percentages are right.
An ICC profile is what makes "these CMYK percentages" mean a specific device. The International Color Consortium defines the profile file format that connects color encodings, and that specification was published as ISO 15076-1. Source: ICC specifications. Offset process control for four-color printing is a separate standard, ISO 12647-2. A percentage without the profile your printer named (a FOGRA or GRACoL characterization, for example) is not yet a press specification. The ICC's own FAQ is the short version of why profiles exist: ICC frequently asked questions.
Converting HEX to CMYK for print
A hex code does not contain cyan. Something has to calculate it, and the method matters.
- Confirm the hex is the sRGB value you ship. Sample the token, not a screenshot that a browser has already color-managed.
- Get a percentage estimate. The HEX to CMYK converter maps the red, green, and blue channels through the common algebraic formula: black from the strongest channel, then cyan, magenta, and yellow from what remains. That is a useful number to write next to the hex in a draft brand sheet.
- Treat that number as naive. CSS Color Level 5 (a W3C Working Draft) defines
device-cmyk()and says these colors have no colorimetric meaning by themselves. The precise conversion depends on the output device. With no ICC profile, the spec falls back to a naive algorithm and says that algorithm is approximate because it does not know the inks, the dot gain, or the colorimetry of the RGB space. The converter on this site is in that naive category. It is not a FOGRA or GRACoL conversion. - Look at the shift. Paste the same hex into the print gamut checker. If the press preview is a different color, the percentages are a substitute, not a match. Read the CMYK model if the four channels themselves are unfamiliar.
- For production, convert with the printer's profile. In Photoshop or the RIP, convert from the document's RGB profile to the ICC profile the vendor specified, then proof on the stock you will print. ISO 12647-2 is the process-control reference for offset lithography (ISO catalogue entry). The proof, not the website, is the acceptance test.
- Write both values down. HEX and RGB for the site. CMYK percentages plus the profile name for the printer. One column without the other is how the business cards come back the wrong green.
Why web palette generators skip this problem
Most palette tools output HEX and RGB. Enough for CSS. Not enough for packaging, stationery, or event booths where the brand must match the site.
If your workflow stops at HEX, print teams reverse-engineer CMYK in Illustrator at the last minute. That is where shifts show up.
How to spot CMYK-risky colors before production
A practical signal: convert RGB → CMYK → RGB and measure the round-trip. If the color drifts noticeably, treat it as print-risky.
On Color Mapper, palette swatches show a CMYK gamut warning when that drift crosses a threshold. It is a heads-up, not a ban. Use the accent on the website. Just do not promise the same pop on a matte brochure without a proof.
Quick audit:
- Generate a palette from your brand seed in the palette generator.
- Read the CMYK column on each swatch.
- Paste the whole palette into the print gamut checker for a side-by-side screen vs press preview of every color.
- Open the HEX to CMYK converter for vendor-ready percentages on critical colors.
- Soft-proof with your print shop's ICC profile when the job is high stakes (luxury packaging, large format, brand launches).
What to put in a brand sheet that both teams can use
One document beats parallel "web" and "print" palettes that drift apart.
Include:
- HEX and RGB for Figma, CSS, and email
- CMYK percentages for offset and digital print specs
- Contrast notes from the WCAG contrast checker for text pairs
- Screen-only accents flagged explicitly when gamut warnings fire
Monochromatic and analogous harmonies from a mid-saturation seed tend to survive CMYK more predictably than neon triads built from pure RGB primaries. If print is core to the business (CPG, retail, events), bias the seed color slightly muted. You can still punch up on screen with gradients.
Harmony rules and print reality
| Scheme | Print behavior | When to use |
|---|---|---|
| Monochromatic | Most predictable | Packaging, corporate systems |
| Analogous | Usually stable | Editorial, soft consumer brands |
| Complementary | High contrast, one side often out of gamut | Digital-first campaigns |
| Triadic | Three hues, multiple gamut risks | Web and social, verify before print |
Complementary pairs often mean one swatch is screen-only. Document which one.
A workflow that connects photo, web, and print
- Extract dominant colors from reference photography with palette from image (runs in the browser, no upload to a server).
- Refine harmonies and lock brand anchors in the palette generator.
- Validate accessibility in the contrast checker.
- Export Tailwind or CSS variables for engineering.
- Attach CMYK columns for production.
You are not maintaining a spreadsheet on the side. The same swatch carries web and print values.
FAQ
Should I design in CMYK or RGB?
Design for the primary medium first. Web-first brands work in sRGB and check CMYK before anything is printed. Print-first brands can start from the printer profile and accept that a neon screen accent will not match the sheet.
Does converting HEX to CMYK mean it will print exactly?
No. A naive RGB-to-CMYK formula, including the converter on this site, does not know the inks or the paper. CSS Color Level 5 says that kind of conversion is approximate. Production files should use the printer's ICC profile, and you should still proof.
What is an ICC profile?
It is the file format the International Color Consortium defines for connecting color encodings between devices. The specification was also published as ISO 15076-1. See the ICC specifications. Without the profile your printer names, a CMYK percentage is not tied to a specific press.
Can I use Pantone instead of CMYK?
Spot colors sit outside four-color process for many brand hues. They cost more per run and can match a logo more closely. This site converts to process CMYK. It does not match Pantone libraries.
Why do gradients look banded in print?
A CSS gradient is continuous light. A press reproduces tone with dots. For print, use flat fills or very few stops, and convert those stops with the printer profile. See the CSS gradients guide for the screen side of that trade-off.
Which greens are risky on a web palette that also prints?
The corner of sRGB, such as #00FF00, is a screen color. Four-color process cannot hit it. Prefer a darker, less saturated green and confirm the shift in the print gamut checker before you lock the brand sheet.
If the project spans web and print, generate the palette once, read the gamut warnings, and send CMYK values with the profile name.