Need to show a print color on screen? Converting CMYK to RGB gives you the light-based equivalent of your ink percentages, the values a monitor, a mockup or a web page can actually display.
How CMYK to RGB conversion works
- Turn all four percentages into fractions between 0 and 1.
- Apply the key component first: every channel is scaled by (1 − K).
- Compute R = 255 × (1 − C) × (1 − K), G = 255 × (1 − M) × (1 − K) and B = 255 × (1 − Y) × (1 − K).
- Round each channel to a whole number between 0 and 255.
Worked example
Approximate. A screen can show more colors than ink can produce, so the RGB result usually looks brighter and more saturated than the printed piece.
CMYK and RGB explained
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
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()
CMYK to RGB reference table
The most common CSS colors, converted from CMYK to RGB.
| Color | CMYK | RGB |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | rgb(0, 0, 0) |
| white | cmyk(0%, 0%, 0%, 0%) | rgb(255, 255, 255) |
| red | cmyk(0%, 100%, 100%, 0%) | rgb(255, 0, 0) |
| lime | cmyk(100%, 0%, 100%, 0%) | rgb(0, 255, 0) |
| blue | cmyk(100%, 100%, 0%, 0%) | rgb(0, 0, 255) |
| yellow | cmyk(0%, 0%, 100%, 0%) | rgb(255, 255, 0) |
| orange | cmyk(0%, 35%, 100%, 0%) | rgb(255, 166, 0) |
| teal | cmyk(100%, 0%, 0%, 50%) | rgb(0, 128, 128) |
| purple | cmyk(0%, 100%, 0%, 50%) | rgb(128, 0, 128) |
| gray | cmyk(0%, 0%, 0%, 50%) | rgb(128, 128, 128) |