Color Models Guide

A color model is a mathematical system for describing colors. Different models are used for different purposes—some for screens (light), others for printing (ink), and some for intuitive human understanding.

Additive vs. Subtractive Mixing

Additive (Light)

Used by screens (monitors, phones). It starts with black (darkness) and adds Red, Green, and Blue light.

RGB is the primary additive model.
Adding all colors creates White.
Absence of all colors creates Black.

Subtractive (Ink)

Used by printers. It starts with white (paper) and adds ink to subtract brightness.

CMYK is the primary subtractive model.
Adding all colors creates Black (muddy dark brown).
Absence of all colors creates White (paper).

RGB

Red Green Blue

The Digital Standard

RGB is the native language of digital displays. Each pixel on your screen is made of a red, green, and blue sub-pixel. By varying the intensity of each (0-255), we can create over 16 million colors.

rgb(255, 0, 0) = Red
rgb(0, 255, 0) = Green
rgb(0, 0, 255) = Blue
rgb(255, 255, 255) = White

CMYK

Cyan Magenta Yellow Key

The Print Standard

Printers use four ink plates. 'Key' stands for Black, because combining Cyan, Magenta, and Yellow produces a muddy brown, not a true black. Pure black ink is cheaper and sharper for text.

Warning: Colors on screen (RGB) often look duller when printed (CMYK) because screens can emit light that ink cannot reflect.

HSL

Hue Saturation Lightness

The Human Standard

HSL is designed to be intuitive. Instead of mixing red, green, and blue, you pick a color (Hue), decide how vibrant it is (Saturation), and how bright it is (Lightness).

Hue (0-360°): Position on the color wheel. 0=Red, 120=Green, 240=Blue.
Saturation (0-100%): 0% is gray, 100% is full color.
Lightness (0-100%): 0% is black, 50% is pure color, 100% is white.

* Best for creating hover states (just lower the Lightness) or color palettes (keep Hue, vary Saturation/Lightness).

HSV

Hue Saturation Value

The Artist's Standard

HSV (also known as HSB — Hue, Saturation, Brightness) is similar to HSL but uses "Value" instead of "Lightness." The key difference: in HSV, maximum Value sets the largest RGB channel to its maximum. At full saturation this gives a vivid hue; at zero saturation it gives white. A color at 0 Value is black.

Hue (0–360°): The color angle on the color wheel. Same as in HSL.
Saturation (0–100%): 0% is a neutral gray; 100% is a fully saturated hue.
Value (0–100%): 0% is black; 100% is the full hue (or white if Saturation is also 0%).

hsv(0°, 100%, 100%) = Pure Red
hsv(0°, 0%, 100%) = White
hsv(0°, 100%, 50%) = Dark Red
hsv(0°, 0%, 0%) = Black

* HSV is the model used in most image editing software color pickers (Photoshop, Figma, etc.) because it closely mirrors how artists mix paint: start with a pure hue and darken it by adding black.

When to Use Which Model

Each model is optimized for a different context. Choosing the right one saves time and prevents color inconsistencies across your workflow.

Model	Best For	Avoid When
RGB	Defining exact screen colors in CSS and code	Designing for print output
CMYK	Preparing files for professional printing	Any screen-only design work
HSL	CSS variables, creating hover/active states, palette generation in code	When you need exact print color matching
HSV	Picking colors in Figma, Photoshop, or other visual tools	Specifying colors in CSS (use HSL instead)
HEX	Sharing colors between developers, copy-pasting into code	When you need to adjust lightness or saturation programmatically

Web Accessibility (WCAG)

When choosing colors for the web, contrast is critical for users with visual impairments. The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios.

AA Standard (Essential)

Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

AAA Standard (Ideal)

Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

See these models in action. Every color in the Color Match tool displays its RGB, HSL, CMYK, and HSV values simultaneously. Explore Color Theory to learn how models relate to harmony and composition.