RGB is additive and made of light, CMYK is subtractive and made of ink. Converting between them is the step every screen design takes before it can be printed.
How RGB to CMYK conversion works
- Normalise the channels: divide R, G and B by 255.
- Take the largest normalised channel and compute the key K = 1 − max.
- Derive cyan, magenta and yellow by removing that black share: C = (1 − R − K) / (1 − K), and so on.
- Convert all four values to percentages between 0 and 100.
Worked example
It is a mathematical approximation without a color profile. Print shops use ICC profiles and ink limits, so these numbers are a solid reference, not a press-ready separation.
RGB and CMYK explained
What is RGB?
RGB describes a color as three channels of light — red, green and blue — each from 0 to 255. It mirrors how screens actually work: all three at 255 give white, all at 0 give black. RGB is the right choice whenever you need to calculate with a color, and rgba() adds transparency on top.
- Syntax:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Best for:
- code, canvas, transparency with rgba()
What is CMYK?
CMYK is the four-ink model used in printing: cyan, magenta, yellow and key (black), each as a percentage from 0 to 100. Ink subtracts light instead of emitting it, so CMYK covers fewer colors than a screen — which is why bright screen colors often look duller once they are printed.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Range:
- 0–100% per ink
- Best for:
- print, packaging, press-ready artwork
RGB to CMYK reference table
The most common CSS colors, converted from RGB to CMYK.
| Color | RGB | CMYK |
|---|---|---|
| black | rgb(0, 0, 0) | cmyk(0%, 0%, 0%, 100%) |
| white | rgb(255, 255, 255) | cmyk(0%, 0%, 0%, 0%) |
| red | rgb(255, 0, 0) | cmyk(0%, 100%, 100%, 0%) |
| lime | rgb(0, 255, 0) | cmyk(100%, 0%, 100%, 0%) |
| blue | rgb(0, 0, 255) | cmyk(100%, 100%, 0%, 0%) |
| yellow | rgb(255, 255, 0) | cmyk(0%, 0%, 100%, 0%) |
| orange | rgb(255, 165, 0) | cmyk(0%, 35%, 100%, 0%) |
| teal | rgb(0, 128, 128) | cmyk(100%, 0%, 0%, 50%) |
| purple | rgb(128, 0, 128) | cmyk(0%, 100%, 0%, 50%) |
| gray | rgb(128, 128, 128) | cmyk(0%, 0%, 0%, 50%) |