Color Models Explained: RGB, CMYK, and HEX for Designers

Colour is one of the most powerful design tools available — and one of the most technically nuanced. A colour that looks vivid and engaging on screen can appear muted and flat in print. A hex code that displays consistently in Chrome may render slightly differently in Safari. Understanding the major colour models is not just academic knowledge — it is the difference between professional, predictable results and colour surprises that waste print budgets and time.

Why Colour Is Complicated: The Physics Underneath

Colour is not an objective property of objects — it is a perception, created by the interaction of light, physical surface, and the human visual system. The eye has three types of colour-sensitive cone cells, responding to long (red), medium (green), and short (blue) wavelengths of light.

Different colour models are designed to work with different physical realities:

• Screen displays emit light directly. Colour is created by combining different intensities of red, green, and blue light.
• Printed materials reflect light. Colour is created by absorbing certain wavelengths using inks, leaving the remainder to be reflected to the eye.
• Digital interfaces need a compact notation for colour values that humans can read and reason about.

Each use case has produced its own colour model.

RGB: The Language of Light

RGB stands for Red, Green, Blue — the three primary colours of light. It is an additive colour model: adding more light increases brightness. At full intensity (255, 255, 255), all three channels combine to white. At zero intensity (0, 0, 0), no light is emitted — perfect black.

RGB values are expressed as three integers from 0 to 255: `rgb(59, 130, 246)` describes a medium blue by combining red at 59/255, green at 130/255, and blue at 246/255.

RGB gamut (the range of reproducible colours) is determined by the specific red, green, and blue primaries used. Consumer monitors typically use the sRGB colour space, while professional displays can reproduce wider gamuts like Display P3 or Adobe RGB. The RGB model is capable of representing a very large range of colours — much larger than ink-based printing can reproduce.

Use RGB for:

• Any design intended for screen display (websites, apps, social media)
• Video and animation
• Photography in digital form
• UI design in tools like Figma, Sketch, or Adobe XD

CMYK: The Language of Ink

CMYK stands for Cyan, Magenta, Yellow, Key (Black). It is a subtractive colour model: inks absorb (subtract) certain wavelengths of light from white paper. Cyan ink absorbs red light; magenta absorbs green; yellow absorbs blue. Where all three inks overlap at full density, they absorb most visible light — theoretically producing black, though in practice a dedicated black (K) ink is added for sharper text and true neutrals.

CMYK values are expressed as percentages from 0–100: `cmyk(76, 47, 0, 4)` describes the same medium blue as the RGB value above.

The gamut mismatch: CMYK cannot reproduce all colours that RGB can. The CMYK gamut (printable colours) is smaller. Vivid electric blues, neon greens, and bright purples that look striking on screen may shift significantly when converted to CMYK — becoming duller and less saturated. This is called gamut clipping: the colour is mapped to the nearest in-gamut value.

Professional colour management systems use ICC profiles to control how out-of-gamut colours are handled during conversion — either clipping them to the nearest in-gamut colour or compressing the entire gamut slightly to preserve relative colour relationships.

Use CMYK for:

• Files going to a professional print shop (brochures, business cards, posters, packaging)
• Spot colour printing with Pantone references
• Large-format print production
• Any physical printed material where colour accuracy is important

HEX: CSS Shorthand for RGB

Hexadecimal colour codes are not a separate colour model — they are a notation system for RGB values. The hex code `#3B82F6` is exactly equivalent to `rgb(59, 130, 246)`.

How to read a hex code: each pair of characters represents one colour channel. `3B` is the red channel in hexadecimal, `82` is green, `F6` is blue. Hexadecimal uses sixteen symbols (0–9, A–F), so `3B` in hex equals 3 × 16 + 11 = 59 in decimal. `F6` equals 15 × 16 + 6 = 246.

Short hex codes (3 digits, e.g., `#3AF`) double each digit: `#3AF` is equivalent to `#33AAFF`.

Use HEX for:

• Writing CSS colour values in code
• Design systems and style guides
• Copy-pasting colours between design tools and code editors
• Any web-first context where CSS compatibility matters

HSL and HSB: Designer-Friendly Alternatives

RGB and CMYK describe colour in terms of channel intensities, which is efficient for machines but unintuitive for humans. Two alternative models were developed for creative work:

HSL (Hue, Saturation, Lightness):

• Hue: The base colour, expressed as degrees around a colour wheel (0° = red, 120° = green, 240° = blue)
• Saturation: How vivid the colour is (0% = grey, 100% = full colour)
• Lightness: How light or dark (0% = black, 50% = pure colour, 100% = white)

HSL is highly intuitive for UI design because you can adjust one property without altering the others. Making a button colour slightly lighter? Increase Lightness. Making a muted, professional version? Decrease Saturation. This property-independence makes HSL very ergonomic in design systems where colour variations are generated systematically.

HSB/HSV (Hue, Saturation, Brightness/Value):

Similar to HSL but with a different lightness model — at 100% Brightness, HSB produces the pure hue (not white like HSL). HSB is the model used in Photoshop's colour picker and is more intuitive for painting and illustration.

Practical Colour Management for Designers

For web-only projects: Work entirely in RGB. Use HEX values in CSS. Calibrate your monitor to sRGB if colour accuracy matters.

For print-only projects: Design in RGB for an accurate preview, convert to CMYK at the end with a print-appropriate ICC profile (FOGRA39 for Europe, GRACoL for North America, SWOP for US web offset). Preview the conversion using your design tool's "soft proof" feature.

For dual-purpose (web and print): Maintain a master RGB file and a separate CMYK export for print. Do not round-trip between the two — always convert from the master RGB file to CMYK for each print version.

Pantone colours: For brand colours that must match exactly across different print processes, specify Pantone references in addition to CMYK values. Pantone spot colours are pre-mixed inks that bypass the CMYK conversion entirely.

Using Colour Tools Efficiently

Imgira's Color Picker allows you to sample any colour from any image on your screen and get its value in RGB, HEX, HSL, and CMYK simultaneously. This is especially useful when:

• You need to match a colour from a client's existing branding material
• You are building a design system and need precise colour values from reference images
• You want to check whether a specific brand colour is within CMYK gamut

The RGB to CMYK converter gives you an immediate preview of how an RGB colour will shift when converted to print, helping you catch gamut issues before a file goes to the press.

Understanding colour models does not require a deep mathematics background — it requires a practical understanding of which model applies to which output destination and a few tools to bridge between them.