The chain CMYK to RGB to hex describes a two-stage conversion where four device-CMYK ink percentages first become 8-bit red, green, and blue channels, which then become a six-digit hexadecimal string. The CMYK To RGB tool runs both stages at once using the W3C naive device-CMYK fallback, with no ICC profile applied. Each display channel uses 1 - min(1, colorInk × (1 - black) + black), normalized to 0–1 from the four percentage inputs and scaled to the 0–255 range with half-even rounding. The three integer channels are then serialized as two-character hex pairs (00 through FF), so RGB 255, 0, 0 becomes #FF0000. The result is deliberately labeled an approximation: real CMYK depends on the press, ink set, paper, dot gain, rendering intent, and embedded ICC profile, and a profile-aware pipeline is required when print accuracy matters.
What "CMYK to RGB to Hex" Actually Means
CMYK is a subtractive color model used in print, where cyan, magenta, yellow, and key (black) inks combine on paper to absorb light. RGB is an additive model used on screens, where red, green, and blue light combine to produce the final pixel. Hexadecimal notation is just a compact way to write an RGB triple: each pair of characters represents one 8-bit channel from 00 (zero) to FF (255). The chain CMYK to RGB to hex is therefore a single conceptual pipeline with three outputs at every stage: the four percentages, the three integer channels, and the six-character hex string.
When a designer, marketer, or developer searches for "cmyk to rgb to hex", they usually hold a CMYK recipe (often from a brand book, a printer's spec sheet, or a press proof) and want to see how the same color will look on an uncalibrated sRGB-style screen and which hex code to paste into CSS, Figma, or HTML. The two outputs are not independent — every hex value implies exactly one RGB triple, and every RGB triple implies exactly one hex value — so any tool that exposes one exposes the other.
The W3C Naive Formula Behind the Conversion
The CMYK To RGB tool implements the naive device-CMYK conversion published in the W3C CSS Color specification. The procedure has four inputs (cyan, magenta, yellow, black, each a percentage from 0 to 100) and three outputs (red, green, blue, each an integer from 0 to 255, plus their hex serialization). The steps are:
- Normalize the four percentages by dividing each by 100, producing values in the 0–1 range.
- For each color ink (cyan, magenta, yellow), combine it with black using colorInk × (1 - black) + black.
- Cap the result at 1, subtract from 1, and multiply by 255 to get the corresponding RGB channel.
- Round each channel to the nearest integer using half-even (banker's) rounding, then serialize as a two-digit hex pair.
The channel-to-hex serialization is the same step used by every web color tool: 255 becomes FF, 128 becomes 80, 17 becomes 11, and so on. Three channels concatenated in red-green-blue order with a leading "#" give the final hex value. The W3C firebrick example and the contract's endpoint fixtures confirm that the formula matches the spec for mixed channels as well as for pure inks.
Quick worked example: pure cyan
Take CMYK (100%, 0%, 0%, 0%). Normalizing gives c = 1, m = 0, y = 0, k = 0. The red channel is 255 × (1 - min(1, 1 × (1 - 0) + 0)) = 255 × 0 = 0. The green channel is 255 × (1 - min(1, 0 × 1 + 0)) = 255 × 1 = 255. The blue channel is 255 × 1 = 255. The result is RGB (0, 255, 255) and hex #00FFFF, which matches the standard cyan tile. Drop in different percentages and the same arithmetic produces the matching RGB triple and hex code.
How to Convert CMYK to RGB and Hex in Your Browser
The browser workflow is deliberately short. The four percentages are the only inputs, and the page displays RGB, hex, and a swatch the moment any slider moves.
- Open the CMYK To RGB tool and set the cyan, magenta, yellow, and black sliders to the four percentages from your recipe.
- Read the 8-bit red, green, and blue channels that appear under the swatch.
- Read the six-digit hexadecimal value shown alongside or below the channels; the leading "#" is optional and may be omitted when pasting into CSS.
- Use the displayed hex value in CSS, HTML, Figma, or a code editor.
- Use the swatch as a quick visual check against the intended look on an sRGB-style display.
No account, install, or upload is required. The calculation stays in the browser, so the percentages never leave the device.
Reading the Output: RGB Channels and the Hex Code
Because both outputs come from the same three integers, you can read either format without re-running anything. The contract defines a small set of predictable endpoints that confirm the formula is behaving as the spec describes:
| CMYK recipe | RGB channels | Hex value |
|---|---|---|
| 0%, 0%, 0%, 0% | 255, 255, 255 | #FFFFFF |
| 0%, 0%, 0%, 100% | 0, 0, 0 | #000000 |
| 0%, 100%, 100%, 0% | 255, 0, 0 | #FF0000 |
| 100%, 0%, 0%, 0% | 0, 255, 255 | #00FFFF |
These four rows are the contract's primary endpoints and match the behavior of the W3C naive fallback. Any other recipe produces a non-corner RGB triple whose hex value can be derived by converting each channel to base 16. For example, RGB (74, 138, 92) becomes #4A8A5C, because 74 is 0x4A, 138 is 0x8A, and 92 is 0x5C. If a derived hex value looks unexpected, the most common cause is a single channel rounding to the wrong integer — not a bug in the serialization step.
Why the Output Is Labeled an Approximation
CMYK is a device-dependent color space: two presses running the same CMYK recipe can produce visibly different paper output because of ink mix, paper stock, dot gain, and the rendering intent chosen by the raster image processor. The naive fallback used by this tool ignores all of those variables. It is, in effect, a single fixed mapping that produces a consistent sRGB-style preview regardless of which press would actually be used. That makes it ideal for interface mockups, rough palette comparisons, and quick "what would this look like on screen?" checks, but it rules out any use as a press proof or contractual color target.
Profile-aware software (Photoshop, Illustrator, Acrobat, and most pre-press tools) takes a different route: it reads the embedded ICC profile of the source CMYK document, reads or assigns the destination RGB profile, and applies a colorimetric conversion that accounts for the actual color gamut of each device. The numerical RGB and hex values that come out of that pipeline can differ meaningfully from the W3C naive output, especially in saturated inks and deep neutrals.
When Profile-Aware Software Is the Right Tool
Use the browser tool for fast previews, mockups, palette sketches, and any workflow where the goal is "give me a reasonable sRGB hex value to paste into code right now." Use a profile-aware application when the goal is a contract color, a brand spec, a press proof, or any color match that a client will judge against printed output. The workflow there is straightforward but heavier: identify or embed the correct source CMYK profile, pick the destination RGB profile (usually sRGB or a display-specific profile), run the conversion through the profile-aware application, and verify against a physical proof on a calibrated display. The original CMYK values should be preserved as the source of truth for the press.
For deeper coverage of the print-side workflow, including how to keep CMYK as the master recipe while still producing usable hex previews, the CMYK to RGB for Print: A Print-Side Preview Workflow guide walks through the same idea with a printer's perspective. For checking that the hex code you end up with meets WCAG contrast targets, the Color Contrast Checker accepts the hex directly and reports the ratio against any chosen background.
The CMYK to RGB to hex chain is short, deterministic, and well documented by the W3C. Treat the browser result as a faithful screen preview, not a substitute for the print pipeline, and the output will match what your audience sees on an uncalibrated monitor every time.
If you're weighing options, Hex to RGB Shades and Variations: Read Channels and Alpha covers this in detail.