rgb · cmyk · print · screen · live · local

Convert RGB ↔ CMYK

Q: How do I convert RGB to CMYK?

Normalize RGB values to 0–1, find K = 1 − max(R,G,B), then C = (1−R−K)/(1−K), M = (1−G−K)/(1−K), Y = (1−B−K)/(1−K). Multiply by 100 for percentages. Or use this tool to convert instantly.

Q: What is the difference between RGB and CMYK?

RGB is an additive color model for screens using Red, Green, and Blue light. CMYK is a subtractive model for print using Cyan, Magenta, Yellow, and Black inks. Use RGB for digital, CMYK for print.

Q: How do I convert HEX to CMYK?

First convert HEX to RGB by splitting the hex code into three pairs and converting each from base 16 to base 10. Then apply the RGB to CMYK formula. This tool handles both steps automatically.

Q: Why does my color look different after converting to CMYK?

RGB can display colors that CMYK cannot reproduce in print — especially bright blues, greens, and neons. These are called out-of-gamut colors. When converted, they are mapped to the nearest printable CMYK equivalent, which may look less vibrant.

Q: Should I design in RGB or CMYK?

Design in RGB for anything displayed on screens (websites, apps, social media). Design in CMYK for anything going to print (business cards, brochures, posters). Convert from RGB to CMYK before sending files to a print shop.

Mathematical RGB ↔ CMYK conversion for screen previews. Production print? Always ask your printer for an ICC profile.

RGB ↔ CMYK Converter

Mode

RGB→CMYK

direction

Swatch

#3b82f6

preview

Out

cmyk(76%, 47.2%, 0%, 3.5%)

color

Status

valid

live

input · color

Live swatch

output · preview

CMYK

cmyk(76%, 47.2%, 0%, 3.5%)

HEX

#3b82f6

Tints & Shades

Color Harmony

Complementary#f6af3b

Analogous L#3be0f6

Analogous R#513bf6

Triadic L#f63b82

Triadic R#82f63b

CMYK ↔ RGB conversion is approximate. Print ICC profiles change the result significantly.

Quick Start

How to convert RGB and CMYK

Pick a direction, enter your color, copy the result. Use only for screen previews of print colors.

01
Choose mode
RGB→CMYK to estimate ink coverage from a screen color, or CMYK→RGB to preview a swatch from print specs.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
modeOKLCHCSS Color 4perceptuallive
mode · colorrgb→cmyk · sRGB
```
RGB → CMYK
```
loaded · normalisedOKLCH · ready
02
Enter your color
HEX or four CMYK channel percentages (0-100).
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
inputhex · rgb · hslP3gamut-mappedlive
input · optionsready · live
```
#3b82f6
```
options applied · livelive
03
Read approximation
Math-based conversion. Differences vs printed output are normal.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
calcWCAG 2.2APCAAA · AAAcontrast
out · convertedlive · ready
```
cmyk(76%, 47%, 0%, 4%)
```
converted · liveWCAG-aware
04
Copy & ship
Use for design comps. Always confirm with your printer ICC.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to use CMYK conversion

Print specs, marketing collateral, brand colors.

Print prep

Quick check whether a brand color is too saturated for CMYK. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Marketing collateral

Translate Pantone-like specs into approximate screen swatches. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Brand audit

Sanity-check that key colors are in CMYK gamut. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Mocks for press

Set up press-friendly screen comps for clients. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Time-saver

Avoid opening Illustrator just for one conversion. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Hand-off note

Send approximate CMYK values to the printer for kickoff. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

What is CMYK?

CMYK stands for Cyan, Magenta, Yellow, and Key (Black) — the four ink colors used in color printing. Unlike RGB which uses light to create color on screens, CMYK uses ink on paper. Each value is expressed as a percentage from 0% to 100%, where 0% means no ink and 100% means full ink coverage.

RGB vs CMYK — What's the Difference?

RGB (Red, Green, Blue) is an additive color model used for screens, monitors, and digital displays. CMYK is a subtractive color model used for print — printers, offset printing, and commercial press. The same color looks different in each model because screens emit light while printers absorb it. Always convert to CMYK before sending files to a print shop.

RGB to CMYK Formula

The standard formula to convert RGB (0–255) to CMYK (0–100%):

Normalize RGB: R' = R/255, G' = G/255, B' = B/255
K (Black) = 1 − max(R', G', B')
C (Cyan) = (1 − R' − K) / (1 − K)
M (Magenta) = (1 − G' − K) / (1 − K)
Y (Yellow) = (1 − B' − K) / (1 − K)

Note: This is the mathematical conversion. Actual print output depends on your printer's ICC color profile, ink density, and paper stock.

HEX to CMYK Conversion

To convert a HEX color to CMYK, first convert HEX to RGB (each pair of hex digits = one channel, base 16 to base 10), then apply the RGB to CMYK formula above. For example, #FF5733 → RGB(255, 87, 51) → CMYK(0%, 66%, 80%, 0%).

When to Use CMYK vs RGB

Use Case	Color Model	Why
Website design	RGB	Screens display in RGB light
Business cards, brochures	CMYK	Print uses CMYK inks
Social media graphics	RGB	Displayed on screens
Logos for print	CMYK	Required by print shops
Photoshop for web	RGB	Keep as RGB for screens
Photoshop for press	CMYK	Convert before export

FAQ

Frequently asked questions

How do I convert RGB to CMYK?

Normalize your RGB values to a 0–1 scale, then apply: K = 1 − max(R, G, B), C = (1−R−K)/(1−K), M = (1−G−K)/(1−K), Y = (1−B−K)/(1−K). Multiply each result by 100 to get percentages. Or enter your RGB values above and get the result instantly.

What is the difference between RGB and CMYK?

RGB (Red, Green, Blue) is an additive color model used for screens and digital displays. CMYK (Cyan, Magenta, Yellow, Black) is a subtractive model used for print. RGB creates color by combining light; CMYK creates color by absorbing light with ink. Always convert to CMYK before sending artwork to a printer.

How do I convert HEX to CMYK?

Split your HEX code into three pairs, convert each from hexadecimal to decimal to get RGB values, then apply the RGB to CMYK formula. For example, #3498DB → RGB(52, 152, 219) → CMYK(76%, 31%, 0%, 14%). This tool handles the full conversion automatically.

Why does my color look different after converting to CMYK?

RGB can display colors that CMYK physically cannot reproduce in print — especially bright blues, electric greens, and neon tones. These out-of-gamut colors are mapped to the nearest printable CMYK value, which often looks less saturated or vibrant. This is a fundamental limitation of ink-based printing, not a tool error.

Should I design in RGB or CMYK?

Design in RGB for anything on screens — websites, apps, social media graphics, UI design. Design in or convert to CMYK for anything going to print — business cards, brochures, banners, packaging. Send print files to your print shop as CMYK PDFs unless they specify otherwise.

What does K stand for in CMYK?

K stands for Key — historically the key plate in offset printing, which carried the detail and contrast of an image and was usually printed in black ink. It is not "B" to avoid confusion with Blue in the RGB model.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!