CMYK to Hex Converter
CMYK to Hex Converter. Enter your CMYK Input (C%, M%, Y%, K%) values and the CMYK to Hex Converter instantly converts them into Hex Output. If you need a rough hex starting point for a RAL-specified color, the ral to hex converter provides an approximate match rather than an official value.
Print files and web pages describe color in two different languages, and the CMYK to Hex Converter on this page translates one into the other. Enter the cyan, magenta, yellow and key (black) percentages from your print file, press the convert button, and you instantly get the hex color code that CSS, HTML and design tools expect, complete with a live preview so you can confirm the shade on your own screen.
CMYK to Hex Converter: What It Does and Who Needs It
The tool takes four ink coverages and returns one of the web-ready hexadecimal colors that browsers read, a six-character value you can paste straight into a page. A designer who inherits a brochure palette, a developer who must match a packaging blue in a stylesheet, and a marketer who wants the same brand colors on a landing page and a printed poster all face the same task: moving a color from the world of ink on paper to the world of light on a screen. The fastest way to check the binary form of a hex value is to paste it into the hex to binary converter and read the output box.
Behind the scenes the conversion is plain arithmetic, so the result is exact for the math involved and repeatable every time. You do not need to remember any formula, yet understanding the steps below helps you spot typing mistakes and explain the result to a client.
How to Convert CMYK to Hex by Hand
Every hex code is three numbers from 0 to 255, one each for red, green and blue, written in base sixteen. To get there from CMYK values, you first turn the percentages into fractions, then apply the standard formula for each channel: The octal to decimal converter takes a base-8 number and calculates its exact decimal equivalent without requiring manual place-value math.
$$R = 255 \times (1 - C) \times (1 - K)$$
$$G = 255 \times (1 - M) \times (1 - K)$$
$$B = 255 \times (1 - Y) \times (1 - K)$$
Here C, M, Y and K are written as decimals, so 72% becomes 0.72. The formula treats black ink as a dimmer that darkens all three channels equally, which is why key appears in every line.
Step 1: Scale the Four Percentages
Divide each percentage by 100. A CMYK entry of 72, 31, 0, 14 becomes 0.72, 0.31, 0.00 and 0.14. Percentages outside 0 to 100 are invalid, and a converter should reject them rather than guess.
Step 2: Turn Each Channel into a Hex Pair
Multiply out the formula, round each result to the nearest whole number, then divide by 16. The quotient is the first digit and the remainder is the second, with 10 to 15 written as A to F. This is how a two digit hex pair is built, and rounding at this stage is the only place any precision is lost. Combine the three pairs behind a hash sign and you have a finished cmyk to hex code.
Worked Example: Turning a Print Blue into a Hex Code
Suppose a packaging file specifies a sky blue of C 72%, M 31%, Y 0% and K 14%. Applying the formula gives the following. If a system hands you data encoded in standard Base32, the base32 to hex converter converts it back to readable hex bytes instantly.
| Channel | Calculation | Decimal | Hex pair |
|---|---|---|---|
| Red | 255 × 0.28 × 0.86 | 61 | 3D |
| Green | 255 × 0.69 × 0.86 | 151 | 97 |
| Blue | 255 × 1.00 × 0.86 | 219 | DB |
Joined together, the hex color code is #3D97DB. Notice that yellow at zero leaves the blue channel limited only by the black ink, so it ends up the strongest of the three. You can use this worked example to test any converter: if a tool returns a different value for these four numbers, something in its rounding or channel order is off.
Using the Color Converter Step by Step
This free online tool follows the same math without the manual work. A quick pass looks like this:
- Type a value from 0 to 100 into each of the cyan, magenta, yellow and key fields, or pick a shade with the color picker.
- Click the convert button.
- Read the hex code and check the live preview swatch beside it.
- Copy the code and paste it into your stylesheet, design file or mobile app project.
The converter runs in your browser, so there is no sign in and nothing to install. Results can be bookmarked or shared with a teammate who needs the same color.
A Bakery Owner Checks a Menu Orange with the Color Converter
Marguerite has a printed menu in her shop and a new website coming, and the menu's burnt orange is specified as C 15%, M 60%, Y 95%, K 5%. She types those four numbers into the color converter and presses the convert button.
The red, green and blue channels come out at 206, 97 and 12, and the tool shows the hex color code #CE610C. The swatch beside it matches her proof sheet closely enough that she accepts it as the web version of the print orange.
Before she sends the converted value to her developer, she checks it as body-text color on a white page, because a hex code can fail a contrast test even when it matches the print file. #CE610C against white measures 3.93:1, below the 4.5:1 that WCAG 2.1 level AA asks for normal-size text, though it passes the 3:1 minimum for large headings.
So she repeats the conversion with one input changed. Raising black from 5% to 15% gives 184, 87 and 11, or #B8570B, which measures 4.77:1 against white and clears the AA line while staying a close relative of the printed orange.
Her decision is concrete: the website uses #CE610C for large headings and buttons where it matches the menu, and #B8570B for paragraph links and small labels. She writes both codes, plus the CMYK recipe they came from, into the shop's brand notes so the next printer order and the next site update start from the same numbers.
Understanding the CMYK Color Model
The CMYK color model mixes cyan, magenta, yellow and key inks on paper. It is a subtractive color model: each layer of ink absorbs more light, so adding ink makes the color darker. Printers add black as a separate fourth plate because mixing the three colored inks alone gives a muddy brown rather than a true black, and black text would otherwise cost three times the ink. This is why printing workflows, from offset printing runs to office laser printers, work in four channels instead of three.
As Wikipedia notes in its summary of the model, the term describes both a way of specifying color and the physical printing process itself. The percentages describe ink coverage on paper, not light, which is why the same numbers can look different from one press to another.
How the Hex Color Code Works
A hex code is a hexadecimal number that packs red, green and blue into a single value, so each pair of characters is one byte. This keeps the notation short and exact, and browsers read it without any conversion table. In effect it is an additive color model: light from the red, green and blue channels combines on a screen, and more light means a brighter color.
Reading a Hex Triplet
A hex triplet such as #3D97DB splits into 3D, 97 and DB. Each pair converts back to a decimal between 0 and 255, which is the range of one byte. Pairs written 00 mean no light for that channel and FF means full intensity. The same idea underlies hexadecimal color strings across CSS, SVG and most design software, and a short three-digit form such as #FA0 is just shorthand for #FFAA00.
Alpha Channel and Opacity
Modern CSS accepts eight digits, where the last pair carries opacity. FF is fully opaque and 80 is roughly half transparent. CMYK has no built-in transparency, so the alpha channel is something you add after conversion, never something the print values supply. This converter returns a standard six-digit code with no alpha pair.
Common CMYK Values and Their Hex Codes
Pure ink combinations give some quick checkpoints. Use them to sanity-check any conversion you run.
| Color | C | M | Y | K | Hex |
|---|---|---|---|---|---|
| Cyan | 100 | 0 | 0 | 0 | #00FFFF |
| Magenta | 0 | 100 | 0 | 0 | #FF00FF |
| Yellow | 0 | 0 | 100 | 0 | #FFFF00 |
| Red | 0 | 100 | 100 | 0 | #FF0000 |
| Green | 100 | 0 | 100 | 0 | #00FF00 |
| Medium gray | 0 | 0 | 0 | 50 | #808080 |
| Black | 0 | 0 | 0 | 100 | #000000 |
Each row shows the same pattern: the more ink in a channel's complement, the lower its light value. Keep in mind that the mathematical result is not the same as what a press can actually print, which leads to the next point.
Using the Color Picker and Live Preview on the Hex Output
The color picker is the fastest way to explore when you do not yet have exact numbers. Drag to a shade and the cyan, magenta, yellow and key fields fill in while the hex output updates beside them. Compare the live preview swatch with your print proof, keeping in mind that an uncalibrated display can shift how any converted color looks. Once a shade looks right, copy the code and note the source percentages so you can return to the print file later.
Why Print and Screen Colors Rarely Match
A screen can show intensely saturated colors, including neon greens and electric blues, that no combination of cyan, magenta, yellow and black ink can reproduce. In the other direction, some deep print colors have no tidy hex equivalent either. The formula above gives a mathematical match, and the visible difference comes from the gap between ink on paper and light from screens. Always proof important brand shades both ways before a large print run.
That is the heart of print and digital consistency: a converter gets you the closest numeric starting point, and a proof confirms the result with your own eyes. Treating this print-to-digital step as a quick check, not a guarantee, saves reprints.
Related Conversions: Hex to CMYK, CMYK to RGB and More
Sometimes you need to go in the opposite direction. A hex to CMYK conversion reverses the math so a web color can be prepared for a printer, though the result is an approximation. A CMYK to RGB conversion stops halfway and returns the red, green and blue decimals, which is the form many design apps and canvas scripts use. And an RGB to hex conversion simply writes those three numbers in base sixteen.
Other color spaces matter in specific workflows. HSL describes hue, saturation and lightness and is popular for building theme variations in CSS, where one base hue can generate a whole palette. HSV uses hue, saturation and value, which is how most color pickers draw their square. LAB models perceived difference and is used by print professionals to measure how far two colors sit from each other. Moving from CMYK to HSL, HSV or LAB almost always passes through RGB first, so the RGB triple from your conversion is the hub that every other space connects to, and any RGB value can be reshaped into HSL, HSV or LAB with a second formula. Each is reached from the same RGB triple the conversion produces, and a full color converter suite connects all of them, and you can chain tools when a direct route does not exist.
Where Designers and Developers Use Converted Hex Codes
- Branding: keep a logo identical on brochures, packaging and the website.
- Web development: drop exact values into CSS, HTML, SVG and JavaScript projects, and into inline HTML email styles.
- Graphic design: match swatches between Photoshop, Illustrator and Figma files.
- Design systems: store one verified token per brand color for every team to reuse.
- Mobile app interfaces: apply the same hex value to buttons and icons so the product feels uniform across media.
In each case, the hex code becomes the digital source of truth for a color that began as ink coverage on a page. That is a practical route to long-term consistency across posters, signage and screens.
Tips for Accurate Color Conversion
For the best accuracy, enter values as whole percentages unless your file lists decimals, and note that a tool may differ by one step in a channel because of rounding. Check whether the source file uses a specific press profile, since different profiles shift how ink looks. Save the original numbers next to the final code, and test the code on a white background, a dark one and a photo so you see how the color behaves in context. For web design projects with accessibility needs, also check text contrast once the hex value is in place, because a converted brand color can fail a contrast test even when it matches the print file perfectly. Following these habits gives you precision and fewer surprises when the color moves between printed brochures and digital screens.
If you only need a number and nothing else, any cmyk to hex step above can be repeated with a calculator. For anything bigger than a few colors, the converter is faster and removes arithmetic mistakes, so you can spend your time on the design instead.
Treat a brand guide's CMYK recipe as the original and the hex code as a derived copy, and reconvert if the print values ever change.
Finally, a cmyk to hex color result is worth re-running whenever the print values change, so the website never drifts from the brochure.