Move the cyan, magenta, yellow and black sliders to mix a print colour and read its screen equivalent. Each RGB channel is 255 × (1 − ink) × (1 − K), so 0% C, 100% M, 100% Y, 0% K gives #FF0000. Total ink coverage is shown too, because presses limit how much ink a sheet can carry.
Designers moving a brand palette between print and screen, and anyone handed a CMYK spec by a printer, need to see what those four ink percentages look like as a web colour. This picker takes cyan, magenta, yellow and black on sliders (or typed exactly in the box beside each) and returns the hex code, rgb() and hsl() strings, and the CSS device-cmyk() notation. It also adds up total ink coverage and flags mixes above 300%, a common limit on coated stock. A breakdown table shows which ink drives each screen channel. The limit: this is the uncalibrated device formula from the CSS Color specification. Real press output depends on the ICC profile, paper and ink set, so for brand-critical work proof against the printer's profile, not this approximation.
Drag the cyan, magenta and yellow sliders, or type a percentage in the box beside each slider.
The Black (K) slider darkens all three screen channels evenly; 100% K always gives #000000 on screen.
Take the hex value, rgb(), hsl() or device-cmyk() string straight into your stylesheet or design file.
Watch the total ink coverage figure; a warning appears above 300% so you can pull back before sending files to press.
Result Hex colour: #FF0000
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)
CSS device-cmyk(): device-cmyk(0% 100% 100% 0%)
Total ink coverage: 200%
Full magenta plus full yellow with no cyan or black is the printer's red, which maps to pure screen red #FF0000.
Result Hex colour: #808080
RGB: rgb(128, 128, 128)
HSL: hsl(0, 0%, 50%)
CSS device-cmyk(): device-cmyk(0% 0% 0% 50%)
Total ink coverage: 50%
Black alone at half strength gives a neutral mid grey; every screen channel lands on 128.
Result Hex colour: #000000
RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
CSS device-cmyk(): device-cmyk(60% 40% 40% 100%)
Total ink coverage: 240%
On screen it is plain #000000, but on press the extra 140% of colour ink gives a deeper black than K alone.
R = 255 × (1 − C) × (1 − K); G = 255 × (1 − M) × (1 − K); B = 255 × (1 − Y) × (1 − K)
C, M, YKR, G, BEach ink absorbs one screen primary: cyan removes red, magenta removes green, yellow removes blue. Black scales all three down together. This is the naive conversion defined for device-cmyk() in CSS Color Level 4. Channels are rounded to the nearest integer, then written as two-digit hex pairs. HSL is derived from the rounded RGB. Total ink coverage is the plain sum C + M + Y + K in percent.
Screens emit light and paper reflects it, and every press, paper and ink set behaves differently. The formula here ignores colour profiles, so it gives a reasonable screen preview, not a contract proof. Coated FOGRA39 and uncoated profiles can shift the same CMYK numbers noticeably.
It is the sum of the four ink percentages at one spot, also called total area coverage. A mix of 60/40/40/100 is 240%. Printers often cap it around 300% on coated paper and lower on newsprint, because heavy ink takes longer to dry and can set off onto the next sheet.
In the device formula black multiplies every channel by (1 − K), so K at 100% zeroes red, green and blue regardless of the other inks. On paper, adding cyan, magenta and yellow under black does make it look deeper, which is why rich blacks exist, but a screen cannot show more than pure black.
It is a colour function in CSS Color Level 4 that lets a stylesheet state CMYK values directly. Browsers that do not have a print profile fall back to the naive conversion used here. Browser support is still limited, so pair it with a hex fallback.
With this formula every mix maps to some RGB value, but the reverse is not true: bright RGB greens, blues and oranges have no CMYK match. Real CMYK gamut is smaller than sRGB in most areas, so a printed version of a saturated web colour usually looks duller.
Under the naive model cyan only removes red, leaving green and blue at full strength. Real process cyan ink is somewhat darker and greener than #00FFFF, which is one of the gaps a calibrated ICC profile closes.
Using this tool in an assignment, article or report? Copy a citation, or a link for your website.
Tools Directory Editorial Team. (2026, October 12). CMYK Color Picker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-converters-and-codes/cmyk-color-picker/
Tools Directory Editorial Team. “CMYK Color Picker.” Tools Directory, 12 Oct. 2026, https://tools.milunir.com/design/color-converters-and-codes/cmyk-color-picker/. Accessed 26 Oct. 2026.
Tools Directory Editorial Team. “CMYK Color Picker.” Tools Directory. Last modified October 12, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-converters-and-codes/cmyk-color-picker/.
<a href="https://tools.milunir.com/design/color-converters-and-codes/cmyk-color-picker/">CMYK Color Picker – Tools Directory</a>