CMYK to RGB shades and variations describe the spread of approximate screen colors you get when four device-CMYK ink percentages are converted through the W3C naive device-CMYK formula into 8-bit red, green, and blue channels. Each percentage combination from 0 to 100 for cyan, magenta, yellow, and black maps to a single RGB triplet and a six-digit hex value, and the CMYK to RGB tool lets you move four sliders to watch those variations update instantly. Because the underlying math is deterministic, the same four percentages always produce the same shades and variations — full magenta plus yellow with no cyan or black always reads as red, all ink at zero always reads as white, and full black always reads as black. Predictability is the point: you can copy a recipe from a print specification, paste its values into the sliders, and read the corresponding screen result without installing plugins or sending data to a server.
The reason designers and prepress teams search for "shades and variations" is that CMYK recipes they have used for years can look surprisingly different once they hit a screen. Print inks are subtractive, monitor pixels are additive, and any conversion between the two has to make assumptions about which CMYK gamut and which RGB space are in play. The naive formula used in this tool makes a single, fixed assumption, which is both its strength and its limit: every variation is reproducible, but none of them model your real press, your ink set, or your paper stock.
What "shades and variations" actually means here
In this context, "shades and variations" is not a marketing phrase. It refers to the deterministic family of outputs you can generate by sweeping four independent percentages through their full 0–100 range. The cyan, magenta, yellow, and black sliders each accept any integer or decimal percentage in that range, so the input space is continuous, not a small palette. As you move any single slider, the displayed RGB channels, the hex string, and the swatch all update at the same time, which lets you watch how one ink channel affects the resulting screen color in isolation.
This is useful when you want to compare two recipes that differ only in black, or when you want to see whether adding ten percent cyan to a near-neutral dark pulls the result toward blue or stays in the warm zone. Because the calculation is locked, you can return to the same recipe later and read the same number every time. For a deeper dive into the math behind those shifts, the CMYK to RGB formula and its limits walkthrough breaks the same recipe down channel by channel.
How the formula shapes every variation
The math behind the tool follows the naive device-CMYK fallback published in the W3C CSS Color specification (W3C device-CMYK naive conversion). Each percentage is first normalized to the 0–1 range. For every display channel, the formula is:
R = 255 × (1 − min(1, C × (1 − K) + K))
with the same shape repeated for green using magenta and for blue using yellow. Each ink is combined with black, inverted, clamped to the 0–1 display range, scaled to 255, and serialized as an integer with half-even tie rounding.
Worked example, using the W3C firebrick recipe of 0% cyan, 100% magenta, 100% yellow, and 0% black:
- R = 255 × (1 − min(1, 0 × (1 − 0) + 0)) = 255 × (1 − 0) = 255
- G = 255 × (1 − min(1, 1 × (1 − 0) + 0)) = 255 × (1 − 1) = 0
- B = 255 × (1 − min(1, 1 × (1 − 0) + 0)) = 255 × (1 − 1) = 0
The output is rgb(255, 0, 0), which serializes to #FF0000, a pure red on the sRGB-style swatch. That match against the W3C firebrick fixture is what the implementation is tested against, and it is the canonical example of how full magenta plus yellow collapses into a single bright red rather than a separate shade.
How to preview shades and variations in your browser
- Open the CMYK to RGB tool and locate the four sliders labeled cyan, magenta, yellow, and black.
- Set cyan to a percentage between 0 and 100. Watch the swatch, RGB channels, and hex value update as soon as you release the slider.
- Repeat the same step for magenta, yellow, and black, adjusting each one to mirror the percentages from the print recipe you want to preview.
- Read the live swatch, the 8-bit RGB triplet (for example, rgb(255, 0, 0)), and the six-digit hexadecimal value next to it.
- Copy the hex or the RGB triplet into your screen mockup, palette file, or CSS draft.
- To compare shades and variations, nudge a single slider by five or ten percent and re-read the output. Because the formula is deterministic, each step is reproducible.
Patterns you can rely on across the ink space
Because the formula is fixed, certain behaviors show up every time you sweep the sliders. The table below lists the canonical endpoints the implementation is tested against, including the W3C firebrick reference and a few common mixed-channel combinations.
| CMYK input (C, M, Y, K) | Approximate RGB | Hex | What you see |
|---|---|---|---|
| 0, 0, 0, 0 | rgb(255, 255, 255) | #FFFFFF | White — no ink on paper |
| 0, 0, 0, 100 | rgb(0, 0, 0) | #000000 | Black — full key plate |
| 0, 100, 100, 0 | rgb(255, 0, 0) | #FF0000 | Red — W3C firebrick fixture |
| 100, 0, 0, 0 | rgb(0, 255, 255) | #00FFFF | Cyan — only the C plate down |
| 0, 100, 0, 0 | rgb(255, 0, 255) | #FF00FF | Magenta — only the M plate down |
| 0, 0, 100, 0 | rgb(255, 255, 0) | #FFFF00 | Yellow — only the Y plate down |
| 50, 50, 50, 0 | rgb(128, 128, 128) | #808080 | Neutral gray — three plates at half |
The mid-range entry is a useful sanity check. With cyan, magenta, and yellow all at 50% and no black, the formula treats each ink as 0.5, subtracts, and rounds to a neutral 128 on every channel. If your recipe produces something far from neutral, the deviation is usually coming from a non-zero black plate or from values being entered at the print percentage rather than the device percentage scale. As you sweep each slider further from those endpoints, the variations diverge from the sRGB space in predictable directions — adding black pulls every channel down toward zero, while pushing one or two inks above fifty drives the result toward a corner of the additive cube.
Where the approximation drifts from reality
The naive formula is a deliberate shortcut. Real CMYK is device-dependent: the press, ink set, paper, dot gain, rendering intent, and embedded ICC profile can each shift the printed appearance materially. The browser tool does not load any ICC profile, which means a recipe that prints as a warm brick red on coated stock with one ink set can render as a noticeably cooler or more orange shade in this preview, and that difference grows as you push saturation toward the edges of the gamut.
This is why the tool is positioned as a quick interface mockup and a rough palette comparison aid, not as a press proof. If your workflow needs a contractual color target — a brand swatch, a packaging spec, a print contract — keep the original CMYK values, request the printer's correct output profile, and run the conversion through profile-aware software on a calibrated display, then confirm with a physical proof. The naive conversion is meant to give you a fast visual sanity check, not to settle an argument with the printer.
Pairing the preview with related tools
Once you have an RGB triplet or a hex value in hand, a few neighboring utilities help you put it to work. The RGB to HEX tool converts between the two encodings and shows a live swatch; HEX to RGB reverses the trip and is useful when a design system stores colors as hex strings. If you need to confirm that a print-derived shade actually meets accessibility thresholds on screen, the Color Contrast Checker compares your chosen swatch against a background and reports the WCAG ratio. For the opposite direction, the RGB to CMYK tool takes a screen color and produces a printable recipe, which you can then paste back into the CMYK to RGB tool to round-trip and inspect the shading drift between the two color spaces.
For a deeper look, see Color Palette Generator: Shades and Variations Explained.