Color Codes Demystified: Converting Between HEX, RGB, and CMYKColor is a fundamental element of visual communication. Whether you’re designing a website, preparing images for print, or choosing a brand palette, understanding how colors are represented and converted between different color systems is essential. This article explains the three most commonly used color systems — HEX, RGB, and CMYK — how they relate, how to convert between them, and practical tips to keep colors consistent across screens and print.
What each color system is and where it’s used
- HEX (Hexadecimal): A compact, web-friendly way to represent colors. HEX codes are six-digit hexadecimal numbers prefixed with “#”, e.g., #1A73E8. Primarily used in web design and CSS.
- RGB (Red, Green, Blue): An additive color model used for screens. Colors are defined by three integer values from 0 to 255 (or percentages), e.g., rgb(26, 115, 232). Used in digital displays, UI design, and most on-screen graphics.
- CMYK (Cyan, Magenta, Yellow, Key/Black): A subtractive color model used for printing. Values are expressed as percentages from 0% to 100%, e.g., C:78 M:44 Y:0 K:9. Used in offset printing, digital print presses, and when preparing files for professional print.
How RGB and HEX relate
HEX is simply a shorthand hexadecimal representation of RGB. Each pair of hexadecimal digits encodes one color channel (red, green, or blue) as a value from 0 to 255.
- Example: HEX #1A73E8
- Red: 1A (hex) = 26 (dec)
- Green: 73 (hex) = 115 (dec)
- Blue: E8 (hex) = 232 (dec)
- RGB equivalent: rgb(26, 115, 232)
Conversion rules:
- To convert HEX → RGB: split the 6-digit HEX into three pairs, convert each pair from hex to decimal.
- To convert RGB → HEX: convert each 0–255 integer to a two-digit hexadecimal value and concatenate.
Code example (JavaScript):
function hexToRgb(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return `rgb(${r}, ${g}, ${b})`; } function rgbToHex(r, g, b) { return ( '#' + [r, g, b] .map(x => x.toString(16).padStart(2, '0')) .join('') .toUpperCase() ); } Converting RGB/HEX to CMYK (and why it’s not exact)
RGB and HEX describe emitted light (additive). CMYK describes ink absorption (subtractive). Converting from RGB to CMYK is an approximation because the color gamuts differ — some vibrant screen colors can’t be reproduced in print.
A common conversion method:
- Normalize RGB values to [0,1]: r’ = R/255, g’ = G/255, b’ = B/255.
- Compute initial CMY: C’ = 1 − r’, M’ = 1 − g’, Y’ = 1 − b’.
- Compute K = min(C’, M’, Y’).
- If K = 1, then C = M = Y = 0; else: C = (C’ − K) / (1 − K) M = (M’ − K) / (1 − K) Y = (Y’ − K) / (1 − K)
- Convert to percentages.
Example: rgb(26,115,232)
- r’ = 0.102, g’ = 0.451, b’ = 0.909
- C’ = 0.898, M’ = 0.549, Y’ = 0.091
- K = min(0.898, 0.549, 0.091) = 0.091
- C = (0.898 − 0.091) / (0.909) ≈ 0.884 → 88.4%
- M = (0.549 − 0.091) / 0.909 ≈ 0.508 → 50.8%
- Y = (0.091 − 0.091) / 0.909 = 0 → 0%
- K = 9.1%
Code example (JavaScript):
function rgbToCmyk(r, g, b) { const rP = r / 255, gP = g / 255, bP = b / 255; const cPrime = 1 - rP, mPrime = 1 - gP, yPrime = 1 - bP; const k = Math.min(cPrime, mPrime, yPrime); if (k === 1) return { c: 0, m: 0, y: 0, k: 100 }; const c = ((cPrime - k) / (1 - k)) * 100; const m = ((mPrime - k) / (1 - k)) * 100; const y = ((yPrime - k) / (1 - k)) * 100; return { c: Math.round(c*10)/10, m: Math.round(m*10)/10, y: Math.round(y*10)/10, k: Math.round(k*10)/10 }; } Converting CMYK to RGB/HEX (approximate)
Converting CMYK to RGB also requires approximation. One formula:
- Normalize CMYK to [0,1]: c’ = C/100, m’ = M/100, y’ = Y/100, k’ = K/100.
- R = 255 × (1 − c’) × (1 − k’)
- G = 255 × (1 − m’) × (1 − k’)
- B = 255 × (1 − y’) × (1 − k’)
Example: C:88.4 M:50.8 Y:0 K:9.1
- r = 255 × (1 − 0.884) × (1 − 0.091) ≈ 26
- g ≈ 115
- b ≈ 232
- HEX ≈ #1A73E8
Note: Different printers, inks, and paper stock alter the result; ICC color profiles are used to get more accurate, device-specific conversions.
Color gamut and perceptual differences
- Screens (RGB) usually have a wider gamut than typical CMYK printing. That means some bright or saturated RGB colors are out-of-gamut for CMYK and will appear duller in print.
- Use soft-proofing in design tools (Photoshop, Illustrator) with the printer’s ICC profile to preview how colors will reproduce.
- For critical colors (logos, brand colors), consider spot colors (Pantone) or printing with extended gamut inks (e.g., CMYK+O/Gr).
Practical workflow tips
- Always design for intended output: start in RGB for web, CMYK (or use CMYK preview) for print.
- Keep master brand colors in a color system that’s easy to convert and reference — store both HEX/RGB and CMYK/Pantone equivalents.
- Use color profiles: sRGB for web; appropriate CMYK profile (e.g., U.S. Web Coated SWOP v2, ISO Coated v2) for print.
- Check accessibility: ensure contrast ratios for text meet WCAG (use relative luminance from RGB values).
- When converting, manually tweak and proof physically; automated conversions are guides, not guarantees.
Quick reference conversions
- HEX → RGB: split into pairs, convert hex → decimal.
- RGB → HEX: convert each 0–255 value to two-digit hex and concatenate.
- RGB → CMYK: normalize → compute C’, M’, Y’ → extract K → compute percentages (approx).
- CMYK → RGB: R = 255 × (1 − C) × (1 − K), etc. (approx).
Common pitfalls
- Treating HEX and RGB as different gamuts — they’re the same space (HEX is just another representation of RGB).
- Assuming conversions are exact — printing variables and device profiles cause variation.
- Ignoring color profiles — colors will shift without consistent profiles.
Conclusion
Understanding HEX, RGB, and CMYK and how they convert gives you control over how colors appear on screen and in print. Use conversions as starting points, rely on color profiles for precision, and always proof for the final medium.
Leave a Reply