Color
CMYK Color Calculator
Build a CMYK color with four sliders — live preview and instant hex, RGB, and HSL conversion.
CMYK Calculator
- HEX:#19cc80
- RGB:rgb(25, 204, 128)
- HSL:hsl(155, 78%, 45%)
About the CMYK color calculator
This tool builds a CMYK color from four channel sliders — cyan, magenta, yellow, and key (black), each 0–100% — and shows a live swatch alongside the equivalent hex, rgb(), and hsl() values. You can also type a color straight into the text field using any of those formats, hwb(), or a CSS named color like dodgerblue, and the four sliders update to match. A link at the bottom carries the current color straight into the Color Picker tool for further adjustment.
Browsers don't render CMYK — there's no cmyk() function in CSS — so the tool converts every value to RGB for the swatch using R = 255 × (1 − C/100) × (1 − K/100), and the same pattern for G/M and B/Y. That's the standard uncalibrated formula from print-color primers, not an ICC color-profile conversion, so it's a fast approximation rather than a press-accurate one. Everything — the sliders, the text-field parsing, and the hex/RGB/HSL conversions — runs client-side in plain JavaScript; no color value is sent to a server.
CMYK is the subtractive model print production uses: cyan, magenta, and yellow inks absorb light, and black (key) ink is added to deepen shadows and save colored ink — the opposite of RGB's additive light mixing on screens. Reach for this tool when you're translating a brand color from a print spec sheet or press proof into a value you can use in CSS, or checking what ink percentages a given screen color would map to before handing artwork to a print vendor. Because the conversion is uncalibrated, treat the result as a close approximation — exact press matching needs the printer's own ICC profile.
Examples
cmyk(90%, 20%, 50%, 0%)
→ rgb(25, 204, 128)
→ #19cc80
→ hsl(155, 78%, 45%)This is the color the calculator loads with before you touch a slider. Hex and HSL are both derived from the same RGB midpoint, not entered independently.
rgb(30, 144, 255) // dodgerblue
→ cmyk(88%, 44%, 0%, 0%)
→ rgb(31, 143, 255) // off by 1 on R and GEach conversion rounds to whole numbers — whole percentages for CMYK, whole 0-255 integers for RGB — so converting a color to CMYK and back doesn't always reproduce the exact starting value.
function cmykToRgb(c, m, y, k) {
const r = 255 * (1 - c / 100) * (1 - k / 100);
const g = 255 * (1 - m / 100) * (1 - k / 100);
const b = 255 * (1 - y / 100) * (1 - k / 100);
return [r, g, b].map(Math.round);
}
cmykToRgb(90, 20, 50, 0); // [25, 204, 128]The same arithmetic the tool runs on every slider move — no lookup table, no ICC profile, just the formula above applied per channel.
Frequently asked questions
How do you convert CMYK to RGB?
Scale each RGB channel by its own CMY complement and then by the black channel: R = 255 × (1 − C/100) × (1 − K/100), with the same pattern for G (using M) and B (using Y). This is exactly what the calculator runs every time you move a slider.
Why doesn't converting RGB to CMYK and back give me the same color?
Each conversion rounds to whole numbers — CMYK channels to whole percentages, RGB channels to whole 0-255 integers — so small errors can creep in. For example, rgb(30, 144, 255) converts to cmyk(88%, 44%, 0%, 0%), which converts back to rgb(31, 143, 255), one unit off on two channels.
What's the actual difference between CMYK and RGB?
RGB is additive: it mixes red, green, and blue light, and combining all three at full strength makes white, which is why it's the model screens use. CMYK is subtractive: cyan, magenta, and yellow inks absorb light off a white page, and black (K) ink is added rather than relying on C+M+Y alone to reach a true black, which is why it's the model print production uses.
Can I paste a hex code or an rgb() value into this tool instead of using the sliders?
Yes. The text field accepts hex (#rgb or #rrggbb), rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or a CSS named color such as dodgerblue — whatever you type is parsed and converted automatically, and the four sliders update to match.
Why don't the C, M, Y, and K percentages add up to 100%?
They're independent channel values, not shares of a whole, so there's no reason for them to sum to any particular number. K measures how much black is mixed in after C, M, and Y are applied — it isn't a slice taken out of the other three.