In the previous article, we answered "why color matters." From this piece onward, we enter the technical core of color theory. And the starting point of all technical questions is a concept that seems simple but is extremely easy to confuse: color models.
You may have encountered situations like this: you adjust a vibrant blue in your design software, but it prints dull and muted; you pick "pure red" in Photoshop, but it looks darker on a webpage. The root cause of all these problems points to the same answer—different media use different color models, and they describe color in completely different ways.
This article will systematically explain the four most fundamental color models: RGB, CMYK, RYB, and HSV. Understanding their differences will help you understand why colors "change face" across different media, and how to choose the right model for the right scenario.
What Is a Color Model?
A color model is a system for describing color using numbers or symbols. It answers a fundamental question: How do we turn continuously varying colors into values that can be precisely reproduced, transmitted, and recreated?
Different media produce color through different physical principles: screens emit light, print reflects light, and painting absorbs light through pigments. Therefore, there is no "universal" color model. Each model is designed for a specific medium and use case, each with its own scope of application.
💡 Key Insight: The question with color models is not "which one is more accurate," but "which one is more suitable for the current medium." A color that is accurate in RGB may not be fully reproducible in CMYK—this is not an error, but a physical limitation.
RGB: The Language of Light
RGB is an additive color model, and it's the one you're using right now—your phone, monitor, and TV screen all work based on RGB.
How It Works
RGB stands for red, green, and blue light. Each pixel on a screen is composed of red, green, and blue sub-pixels, which mix various colors by adjusting their respective light intensity. When all three lights emit at maximum intensity, the result is white; when all three are turned off, the result is black.
This is what "additive" means: colors are created by stacking light, and the more you add, the brighter it gets.
Value Range
Each channel ranges from 0 to 255 (256 levels). Combined, the three channels can represent 256 × 256 × 256 = 16,777,216 colors, commonly known as "16.7 million colors" or "24-bit true color."
Use Cases
- All light-emitting screens: monitors, phones, TVs, projectors
- Web design, UI design, video production
- Any scenario where light is the final presentation medium
🔧 Common RGB Notations:
rgb(255, 0, 0) → pure red
rgb(0, 0, 0) → black
rgb(255, 255, 255) → white
#FF0000 → HEX notation for pure red (HEX is essentially RGB expressed in hexadecimal)
CMYK: The Language of Ink
CMYK is a subtractive color model, primarily used for printing. It stands for cyan, magenta, yellow, and black inks.
How It Works
Unlike screens that emit light, printed materials do not emit light themselves. We see the color of printed materials because white light hits the paper, and the ink absorbs (subtracts) certain wavelengths of light, while the remaining light reflects into our eyes, forming color.
Therefore, CMYK is "subtractive": the more ink, the more light absorbed, and the darker the color. Theoretically, cyan + magenta + yellow should mix to produce black, but real-world inks contain impurities, and mixing them only yields dark brown. So an additional K (black ink) is needed to compensate, and black ink is also more economical than three-color overprinting.
Value Range
Each channel is typically expressed as 0% to 100% ink coverage. For example, C:100 M:0 Y:0 K:0 is pure cyan, and C:0 M:0 Y:0 K:100 is pure black.
Use Cases
- All commercial printing: business cards, posters, brochures, packaging
- Designs that need to be output to paper or other physical media
Why Can't Screen Colors Be Printed?
This is the most common pain point designers encounter. RGB's color gamut is much larger than CMYK's. Especially vibrant blues, greens, and oranges simply cannot be reproduced in CMYK. When you convert an RGB file to CMYK, those "out-of-gamut" colors are automatically replaced with the closest printable color, resulting in an overall darker, grayer image.
💡 Practical Advice: If the design will ultimately be printed, use CMYK mode from the start of the design process, or leave enough time for color correction before delivery. Don't wait until it's printed to discover the colors are wrong.
RYB: The Artist's Traditional Color Wheel
RYB stands for red, yellow, and blue. It is the oldest color model and the most widely used model in art education.
How It Works
RYB is based on empirical observations of pigment mixing. It considers red, yellow, and blue as the three "primary colors" that cannot be obtained by mixing other colors. Secondary colors (orange, green, purple) are made by mixing two primaries, and tertiary colors are made by mixing a primary with a secondary.
This model has dominated art education for centuries, from the time of Leonardo da Vinci to the present day. The color wheel you drew in art class is an RYB color wheel.
But RYB Has a "Problem"
From the perspective of modern color science, the "red" and "blue" in RYB are not true primary colors. The true subtractive primaries for pigments are cyan, magenta, and yellow (CMY). Red and blue themselves can be mixed from other colors.
So why does art education still use RYB? Because for painting practice, RYB is more intuitive and easier to work with. A painter can mix most desired colors from just three tubes of paint—red, yellow, and blue. This practicality matters far more than theoretical precision.
Use Cases
- Traditional painting, watercolor, oil painting, acrylic
- Color education in basic art training
- Any work centered on "mixing pigments"
HSV / HSL: The Most Intuitive Model
RGB and CMYK are machine-oriented—they directly correspond to the physical characteristics of hardware. But for humans, describing color as "how much red, green, and blue" is not intuitive. HSV and HSL were designed to solve this problem.
How It Works
HSV stands for Hue, Saturation, Value; HSL stands for Hue, Saturation, Lightness. The two are structurally similar, differing slightly in how they define "brightness."
- Hue: The color's position on the color wheel, expressed from 0° to 360°. 0° is red, 120° is green, 240° is blue.
- Saturation: The purity of the color, from 0% (gray) to 100% (most vivid).
- Value/Lightness: The brightness of the color, from 0% (black) to 100% (brightest).
Why Is It More Intuitive?
Suppose you want to "darken red a bit." In RGB, you need to adjust all three channels simultaneously, making it hard to predict the result. In HSV/HSL, you simply lower the value from 100% to 50%, keeping hue and saturation unchanged. The operation intent and result correspond perfectly.
Use Cases
- Color pickers in design software (Photoshop, Figma, Sketch swatches)
- HSL color functions in CSS
- Scenarios requiring rapid generation of color schemes based on hue
- Programmatic color generation (e.g., assigning category colors by hue in data visualization)
💡 Practical Tip: When you need to quickly generate a set of "same-hue but different-brightness" colors, keep H and S constant and only adjust L. This gives you a harmonious monochromatic gradient—one of the most commonly used color techniques in UI design.
Four Models Compared Side by Side
Color Gamut: Why Some Colors "Can't Be Converted"
Having understood the four models, you also need to understand a companion concept: color gamut. Gamut refers to the range of colors that a color model or device can represent.
RGB has the largest gamut, capable of displaying the most vivid colors. CMYK has a smaller gamut—many vivid RGB colors have no equivalent in CMYK. RYB's gamut depends on specific pigments, but overall it is also smaller than RGB.
This is why you see a fluorescent green on screen, but when printed, you only get a darker grass green. It's not that the print shop cut corners—it's that physical ink simply cannot reflect light at that wavelength.
"Color models are not about right or wrong in color itself, but about how different media capture and reproduce light in their own ways. Understand their boundaries, and you can make the best choices within them."
Practical Selection Guide
- Building websites or apps: Use RGB (or HEX), because the final presentation medium is a screen.
- Creating printed materials: Use CMYK, and set the color mode from the start of the design process.
- Painting: Use RYB thinking for mixing, but know that CMY is the more precise underlying logic.
- Color adjustment or scheme generation: Use HSV/HSL, because its dimensions directly correspond to human color intuition.
- Cross-media projects: Determine the final output medium first, then choose the corresponding model. If you need to cover both screen and print, prepare for color correction and manage expectations.
In the next article, we'll dive into the three dimensions of HSV/HSL—hue, saturation, and value—and learn how to use them to precisely describe and adjust any color. This is the key step from "knowing the models" to "using color effectively."