Color Models Explained: HEX, RGB, HSL, and CMYK

What Is a Color Model

A color model is a systematic way to describe colors using numbers. Different models organize the same visual spectrum in different mathematical structures—each one optimized for a specific use case like screens, print, or human intuition.

Think of it like measuring temperature: Celsius, Fahrenheit, and Kelvin all describe the same heat, but each scale suits a different context. Color models work the same way.

Additive vs Subtractive Color Models

All color models fall into two fundamental categories based on how they produce color.

Additive models start with darkness (black) and add light to create color. More light means brighter results. This is how screens work—tiny red, green, and blue LEDs combine to produce every color you see. Mix all three at full intensity and you get white.

Subtractive models start with light (white paper) and subtract wavelengths using ink or pigment. More ink means darker results. This is how printing works—cyan, magenta, and yellow inks absorb specific wavelengths. Lay all three on top of each other and you approach black.

You cannot perfectly convert between additive and subtractive models because screens emit light while ink reflects it. Colors that look vivid on screen may appear dull in print—this is why printed photos never quite match what you see on your display.

RGB: The Screen Standard

Red, Green, Blue. These three channels of light mix additively to create roughly 16.7 million colors on screen. Each channel ranges from 0 to 255.

RGB is the native language of digital displays. Every pixel on your screen stores an RGB triplet. CSS offers several ways to write RGB values:

.card {
  background: rgb(59 130 246);       /* Modern space-separated */
  border: rgb(59 130 246 / 50%);     /* With alpha */
}

Strengths: Directly maps to hardware, excellent for programmatic manipulation, built-in alpha support.

Weaknesses: Not intuitive—changing hue often requires adjusting all three channels simultaneously.

CMYK: The Print Workhorse

Cyan, Magenta, Yellow, Key (Black). Printers lay down these four inks in tiny dots to reproduce images on paper. Each value represents ink coverage from 0% to 100%.

The "Key" channel adds true black because mixing C+M+Y produces a muddy brown, not a clean black. Black ink also saves money—its cheaper than layering three colors to approximate dark tones.

/* CSS supports CMYK for print stylesheets */
@page { color: device-cmyk(0%, 100%, 100%, 0%); } /* Red for print */

Strengths: Essential for commercial printing, matches physical ink behavior.

Weaknesses: Not usable for screen rendering, gamut is smaller than RGB—many vibrant screen colors cannot be printed.

HSL: Human-Friendly Color

Hue, Saturation, Lightness. HSL separates color into three intuitive dimensions that match how people actually think about color.

• Hue (0–360°): Position on the color wheel—0° is red, 120° is green, 240° is blue
• Saturation (0–100%): How vivid the color is—0% is gray, 100% is fully saturated
• Lightness (0–100%): How bright—0% is black, 50% is pure color, 100% is white

/* Creating a consistent palette is trivial with HSL */
--primary-300: hsl(217 91% 70%);
--primary-500: hsl(217 91% 60%);
--primary-700: hsl(217 91% 50%);

Strengths: Intuitive for design work, easy to create palettes and theme variants.

Weaknesses: Not perceptually uniform—a lightness of 50% does not look equally bright across all hues.

HEX: Compact RGB Shorthand

HEX is not a separate color model—it is simply RGB encoded in hexadecimal (base-16) notation. Each of the three RGB channels becomes a two-digit hex pair, prefixed with #.

.logo { color: #3B82F6; }  /* Same as rgb(59, 130, 246) */

Strengths: Compact, easy to copy-paste, universally supported.

Weaknesses: Opaque to humans—you cannot glance at #3B82F6 and know which color it represents.

For a detailed breakdown of the HEX format and conversion math, see our HEX to RGB guide.

oklch: The New Standard

oklch (Oklahoma lightness, chroma, hue) is a modern perceptually uniform color space. Unlike HSL, equal changes in oklch values produce equal perceived changes in color.

.element {
  color: oklch(60% 0.2 264);  /* Predictable, perceptually even blue */
}

Why it matters:

• Gradients stay vibrant through the middle instead of turning muddy
• Lightness values are psychologically consistent across hues
• Accessibility calculations are more reliable
• Supports wide-gamut displays (P3, Rec.2020)

Browser support is strong in modern browsers (Chrome 111+, Firefox 113+, Safari 16.4+). See our CSS Color Values guide for practical adoption strategies.

Conversion Reference

Here is how one color—coral—looks across every model:

Conversion between RGB-based formats (HEX, RGB, HSL) is exact and lossless. Conversion to or from CMYK is approximate because the two models have different gamuts—some RGB colors simply cannot exist in CMYK.

When to Use Each Model

Key Takeaways

• Additive models (RGB) produce color with light; subtractive models (CMYK) produce color with ink
• HEX is just a compact encoding of RGB, not a separate model
• HSL maps to human intuition; oklch maps to human perception
• RGB↔HSL↔HEX conversions are exact; converting to/from CMYK is always approximate
• Choose your model based on the medium (screen vs. print) and the task (design vs. code)

Try It Yourself

Convert colors between every model mentioned in this guide using our free Color Converter tool.

Related Guides

• HEX to RGB: Understanding Color Code Conversions
• CSS Color Values: Named, HEX, RGB, HSL, and Modern Functions
• HEX, RGB, and HSL Color Formats Explained