To turn CMYK print inks into CSS code, convert the four CMYK percentages into 8-bit RGB channels or a six-digit hexadecimal value, then paste that value into a stylesheet as rgb(), rgba(), or a #RRGGBB token. CSS Color Module Level 4 still treats CMYK as device-dependent and does not parse CMYK inside a stylesheet — there is no cmyk() function in current CSS — so any color you copy from a print proof, brand book, or PDF palette must be converted to an RGB-based notation before it can be applied to HTML, SVG, or a design mock-up. The CMYK To RGB tool performs this conversion using the W3C naive device-CMYK fallback: it takes cyan, magenta, yellow, and black on a 0–100 scale, inverts each ink against black, scales the result to the 0–255 display range, and serializes it as both integer channels and a hex string ready for CSS use. Because the calculation runs entirely in the browser, the converted RGB and hex values are produced locally, with nothing uploaded to a server.
Why CSS Needs RGB or Hex, Not CMYK
CSS Color Module Level 4 documents CMYK as a device-dependent color space and currently defines it as a fallback for legacy SVG input rather than as a directly usable stylesheet function. In practice, that means the color syntaxes that browsers actually parse inside stylesheets are the RGB-based ones: #RRGGBB and #RGB hex tokens, rgb() and rgba() functional notations, plus the HSL family. There is no cmyk() declaration that Chrome, Safari, or Firefox will resolve against a stylesheet rule. Anything you want applied to a background, border, text, fill, or stroke must arrive in one of those RGB-derived forms.
This creates a gap whenever a print recipe, brand guide, or PDF swatch is handed off to a web project. The four CMYK numbers that read correctly on a press proof cannot be dropped into a stylesheet as-is. A designer who only has CMYK percentages has to decide whether to use a profile-aware application to perform a calibrated conversion, accept an approximate on-screen preview, or skip the conversion and risk a palette that does not match the source. The browser-based CMYK To RGB tool exists for the second path: it produces a quick, locally calculated RGB and hex value that you can paste into CSS as a starting point.
If you maintain an existing palette in print values and want to drive a CSS mockup from it, the W3C device-CMYK naive conversion gives a deterministic formula for that handoff. It is not a press proof, but it is a predictable, repeatable way to read a four-ink recipe as an sRGB-style number that any browser can render.
How the Naive CMYK to RGB Formula Works
The naive conversion published in the W3C CSS Color specification treats CMYK as a straightforward subtraction against a white page: each color ink subtracts from the surface, and black (K) reinforces the reduction. Mathematically, each display channel is computed as 1 minus the minimum of 1 and the sum of that color's ink multiplied by the remaining white after black is applied, then the result is scaled to the 0–255 range. The W3C defines this device-CMYK fallback so that user agents can render a CMYK color when no embedded profile is available.
The formula for each channel is:
display = 255 × ( 1 − min( 1, ink × (1 − k) + k ) )
where ink is the normalized value of cyan for red, magenta for green, and yellow for blue. Cyan subtracts from red, magenta subtracts from green, and yellow subtracts from blue. Black is added on top of whichever ink is contributing, so increasing K darkens every channel at once.
For a single worked example, take C = 0%, M = 100%, Y = 100%, K = 0%:
Red channel: 255 × ( 1 − min( 1, 0 × 1 + 0 ) ) = 255 × 1 = 255 Green channel: 255 × ( 1 − min( 1, 1 × 1 + 0 ) ) = 255 × 0 = 0 Blue channel: 255 × ( 1 − min( 1, 1 × 1 + 0 ) ) = 255 × 0 = 0
The result is rgb(255, 0, 0), which serializes to the hex token #FF0000 — pure red, matching the familiar endpoint where full magenta and full yellow combine on a white substrate to cancel green and blue. The same logic produces white when every ink is zero and black when K is 100%, and the implementation in CMYK To RGB uses half-even tie rounding so the integer channels match the W3C firebrick example. For a deeper look at the published specification, the W3C device-CMYK section of CSS Color 4 documents the exact formula and its rationale.
Get a CSS-Ready RGB and Hex From CMYK Percentages
- Open the CMYK To RGB tool in your browser. No file upload or signup is required — the four sliders and percentage inputs sit on the page immediately.
- Enter cyan, magenta, yellow, and black as percentages between 0 and 100. If your source uses a different scale (for example, 0–255 ink values from a legacy application), normalize them to 0–1 and multiply by 100 first.
- Read the live output as the sliders move: the page displays three integer channels (red, green, blue) in the 0–255 range, a six-digit hexadecimal token, and a visual swatch that previews the uncalibrated screen color.
- Copy the hex token (#RRGGBB) if you want a value that drops directly into a CSS color, background-color, fill, or stroke property. Copy the rgb() or rgba() form if your design system prefers functional notation.
- Drop the value into your stylesheet, SVG attribute, or design mockup and verify the swatch matches what you expected. If the source is critical, compare it against a profile-aware application with the correct embedded CMYK profile loaded.
Putting the Hex and rgb() Values Into Real Stylesheets
Once the CMYK To RGB tool has produced a hex token, you can use it anywhere CSS reads a color. A few examples of where the output lands in production code:
styles.css
:root { --brand-red: #FF0000; } .button-primary { background-color: var(--brand-red); color: #FFFFFF; } svg .icon-fill { fill: rgb(255, 0, 0); } svg .icon-stroke { stroke: rgba(255, 0, 0, 0.85); }
The hex token #FF0000 is functionally identical to rgb(255, 0, 0); the only difference is syntax. Hex is shorter and is the de facto default for production CSS, while rgb() is easier to compose when you also need to set alpha via rgba() or to interpolate channels in a JavaScript animation. Both forms are part of CSS Color Module Level 4 and both parse identically in every modern browser, so the choice between them is a stylistic one.
If your team maintains a shared stylesheet that reads from CSS custom properties, the cleanest workflow is to define the converted value once at :root and reference it everywhere downstream. That way the CMYK source only enters the codebase through one controlled entry point, and any future rebrand or profile-aware re-conversion only needs to update a single variable. For more on how RGB channels translate to hex tokens, the RGB to HEX guide walks through the same channel-to-hex step in the other direction.
Browser Approximation vs Profile-Aware Conversion
Two things can move the RGB output away from what you see in a profile-aware application or on a calibrated press. The first is the absence of an ICC profile: the browser calculation is a fixed, naive formula and does not know whether your CMYK values describe a coated U.S. sheetfed press, a Japanese offset proof, or a wide-format inkjet. The second is rendering intent: perceptual, relative colorimetric, absolute colorimetric, and saturation all map out-of-gamut CMYK into RGB differently, and the naive conversion picks none of them — it just inverts inks against black.
| Aspect | Browser CMYK To RGB Tool | Profile-Aware Conversion |
|---|---|---|
| ICC profiles | None applied | Loads source CMYK profile and destination RGB profile |
| Rendering intent | Fixed naive fallback | Selectable (perceptual, relative, absolute, saturation) |
| Out-of-gamut handling | Silent clipping to sRGB | Mapped according to the chosen intent |
| Best for | Quick UI mockups and palette previews | Press proofs, contract color, brand handoff |
| Display dependency | OS color profile and monitor calibration | Calibrated display with a known profile |
| Press accuracy | No | Yes, when profile matches the press |
Photoshop, Illustrator, and Acrobat can show different RGB values for the same CMYK input because each application applies the source CMYK profile and the destination RGB profile (usually sRGB or Adobe RGB) through a color management module, with a chosen rendering intent. The browser-side tool cannot replicate that pipeline because it never loads a profile. The numeric difference between a profile-aware conversion and a naive conversion is typically modest for muted in-gamut colors and grows as the CMYK recipe pushes toward saturated, bright inks that sRGB cannot represent.
For a rough mockup, brand-board preview, or accessibility check, that difference is acceptable. For a contract color, press proof, or anything that must match a printer's proof, treat the naive result as a starting point and re-run the conversion through profile-aware software with the correct source profile for the press and the agreed destination profile for the screen. Adobe documents this color-managed pipeline in its color conversion and ink management guide, which is a useful reference whenever the naive result is being trusted with brand-critical assets.
Limitations and When to Switch to a Profile-Aware Workflow
The CMYK To RGB tool is deliberately limited to the W3C naive fallback, and the limits matter when you decide what to trust:
- No ICC profile is loaded, so the output cannot match a specific press, ink set, paper, or rendering intent.
- The conversion assumes the four CMYK percentages describe a calibrated device-CMYK space, which is rarely true for casual print values.
- Channels are serialized with half-even tie rounding to match the W3C firebrick reference; this rounds half-cases consistently but can still differ from the rounding used by a commercial color engine.
- Out-of-gamut CMYK inks (for example, a vivid orange that exceeds sRGB) will clip silently to the nearest representable RGB, with no warning.
- Browser color display also depends on the operating system's color profile and the monitor's calibration, so even a "correct" RGB value can render differently on another screen.
Switch to a profile-aware workflow when any of the following apply: you are matching a brand color that has a contractual tolerance, you are producing a press proof, you are handing off to a printer who has provided an output profile, or you are running a soft-proof on a calibrated display. In those cases, keep the original CMYK values, ask the printer or the brand owner for the correct source and destination profiles, and run the conversion in Photoshop, Illustrator, Acrobat, or a dedicated color-managed tool. The naive approximation is a fast preview, not a substitute for that pipeline. For a broader view on deciding which color space to use for a given project, the CMYK vs RGB for print projects guide covers the choice from a production standpoint and points to the cases where each space actually fits.