CMYK to HEX Converter
Free, accurate, and instant conversion. Preview your color in real-time on digital and print mockups.
Source Input CMYK
/* CSS Variable */ --color-primary: #000000; /* Standard */ color: #000000; background-color: #000000;
Brand Consistency: CMYK to Hex
You have a logo designed for a business card or billboard. The designer sent you a PDF style guide withCMYK values (e.g., C:10, M:80, Y:0, K:5). Now you are building the website and you need that exact pink.
You cannot guess. To ensure your brand looks the same on a MacBook as it does on a brochure, you must mathematically convert the print ink formula into a digital Hexadecimal code. This tool does that math instantly.
Print Source
The 4-color process (Cyan, Magenta, Yellow, Key) used in physical media. Subtractive model.
The Inversion
We invert the ink values to calculate the RGB light levels required to mimic the color.
Web Ready
A precise Hex code (#EA4C89) ready for your CSS variables or Tailwind config.
How the conversion works
It's logical but inverted.
The "Ink to Light" Formula
In printing, 0% Ink is white paper. In screens, 0% Light is black pixels. So, to convert CMYK to RGB/Hex, we first invert the percentages:
Red = 255 × (1 - Cyan) × (1 - Black)
Pro Tips for Web Implementation
- • Use CSS variables: Store your Hex colors as
--brand-primaryfor easy updates. - • Test on multiple screens: Laptop, phone, and tablet can all render colors slightly differently.
- • Create a color token file: Document both CMYK and Hex values in your design system.
- • Consider accessibility: After converting, check WCAG contrast ratios for text readability.
Common Print-to-Web Mappings
| CMYK Value | Web Hex | Notes |
|---|---|---|
| 0, 100, 100, 0 | #FF0000 | Pure Red (Magenta + Yellow) |
| 100, 0, 100, 0 | #00FF00 | Pure Green (Cyan + Yellow) |
| 0, 0, 0, 100 | #000000 | Standard Black |
| 0, 0, 0, 0 | #FFFFFF | White Paper = White Screen |
Who Needs CMYK to Hex Conversion?
Web Developers
Implement brand colors from print style guides into CSS and design systems.
Brand Coordinators
Maintain consistent colors across websites, apps, and printed materials.
Social Media Managers
Create on-brand digital graphics from print campaign colors.
E-commerce Designers
Match product packaging colors to online store visuals.
Frequently Asked Questions
Why does the Hex version look brighter?
Screens emit light (backlit); Paper reflects light. When you convert a CMYK ink formula to a digital Hex code, the monitor's brightness gives it an inner glow that ink lacks. The Hue is the same, but the 'vibrance' is higher on screen.
Can I put CMYK relative percentages in CSS?
Yes, device-cmyk() exists in newer CSS specs, but browser support is poor and inconsistent. It is 100x safer to convert to Hex or RGB for web use.
How is CMYK converted to Hex?
It is a two-step process. First, we convert CMYK to RGB using the formula R = 255 × (1-C) × (1-K). Then, we convert those RGB integers to Base-16 Hex codes.
Is this accurate for Pantone matching?
No. Pantone (PMS) is a spot ink system. CMYK is a process ink system. Approximations exist, but if your brand relies on a specific Pantone, look up its official RGB/Hex equivalent rather than converting from its CMYK mix.
What is the Hex for Rich Black?
A common Rich Black (60, 40, 40, 100) often converts to a very deep cool grey or true black #000000 depending on the profile. On screen, #000000 is the deepest you can go.
Will the printed result match my monitor?
Rarely 100%. Monitors are RGB (Light). Printers are CMYK (Ink). Use this tool to get the correct code, but always use a physical proof if color accuracy is critical.
Does this tool support ICC profiles?
This tool uses a standard uncalibrated conversion formula (Generic CMYK). For high-end prepress work involving specific profiles (like SWOP or v2), use Adobe Photoshop.
Why does 100% Cyan look blue?
Cyan is a shade of blue-green. On screen, pure Cyan (#00FFFF) is incredibly bright. In print (100, 0, 0, 0), it is slightly deeper and duller.
What happens if I have 0, 0, 0, 0?
That is 'Paper White'. It converts to #FFFFFF, which is 'Screen White'.
Can I use decimals in CMYK?
Yes, our tool accepts decimal inputs (e.g., 50.5% Cyan) for higher precision.
What is shorthand Hex notation?
Shorthand Hex uses 3 characters instead of 6 when each pair is identical. For example, #FF6600 can be written as #F60. Our tool always outputs the full 6-character format for maximum compatibility.
Do different browsers render Hex colors differently?
Modern browsers render Hex colors identically. However, your monitor's calibration, brightness settings, and color profile can make the same Hex code appear slightly different across devices.