What Is a Color Space?
A color space is a mathematical model that maps numbers to visible colors, defining the range (gamut) and method of color reproduction for a specific medium like screens, printers, or human perception.
Where a color format like HEX or RGB notation tells you how to write a color value (syntax), a color space tells you what those numbers actually mean -- which real-world colors they correspond to and how wide the palette is. The same RGB values can produce different visible colors depending on whether they are interpreted in sRGB, Display P3, or Adobe RGB.
This guide focuses on the conceptual differences between color spaces and practical decision-making. For format syntax details (HEX notation, RGB/HSL CSS syntax, conversion formulas), see Color Formats Explained.
Additive vs Subtractive Color
The fundamental distinction in color reproduction is whether you are working with light or with pigment.
Additive Color: Screens and Light
Additive color mixing combines wavelengths of light. More light added means brighter colors. Screens, monitors, projectors, and LED displays all use additive mixing.
The primary additive colors are red, green, and blue (RGB):
- Red + Green = Yellow
- Red + Blue = Magenta
- Green + Blue = Cyan
- Red + Green + Blue = White
- No light = Black
When your monitor displays R=0, G=0, B=0, every pixel is off and you see black. At R=255, G=255, B=255, all three subpixels fire at full intensity and you see white.
Subtractive Color: Print and Pigment
Subtractive color mixing works by absorbing (subtracting) wavelengths from white light. Inks and pigments selectively absorb certain wavelengths and reflect the rest.
The primary subtractive colors are cyan, magenta, yellow, and black (CMYK):
- Cyan absorbs red light
- Magenta absorbs green light
- Yellow absorbs blue light
- Combining all three produces a muddy dark brown, not true black
- Black ink (K, for "Key") is added for sharp contrast and to save ink
CMYK values of 0, 0, 0, 0 mean no ink on white paper -- so you see white. CMYK 0, 0, 0, 100 lays down pure black ink.
The Major Color Spaces
RGB-Based Spaces: sRGB, Display P3, Adobe RGB
All three use the red/green/blue channel model but define different gamuts -- the total range of reproducible colors.
sRGB (standard RGB) is the default color space for the web, defined by HP and Microsoft in 1996. It covers roughly 35% of the colors visible to the human eye. When you write rgb(255, 87, 51) or #FF5733 in CSS without specifying a color space, browsers interpret it as sRGB.
Display P3 is a wider gamut adopted by Apple for Retina displays starting in 2016. It covers about 25% more area than sRGB in the CIE chromaticity diagram, particularly extending into vivid greens and deep reds. CSS supports it via the color() function: color(display-p3 1 0.34 0.2).
Adobe RGB (1998) was designed for professional photography and prepress work. Its gamut exceeds sRGB primarily in cyan-green tones. It is rarely used on the web but is important for photographers who need to preserve color detail through editing and printing.
CMYK: The Print Space
CMYK is not one single color space but a family of profiles tied to specific printing conditions. The ICC (International Color Consortium) publishes standard profiles such as FOGRA39 (European coated paper) and SWOP (US web offset). Each profile maps CMYK percentages to actual ink behavior on specific paper stocks.
This is why two identical CMYK values can look different when printed on glossy versus matte paper -- the profile accounts for ink absorption and dot gain.
HSL and HSV: Human-Intuitive Models
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) reorganize RGB into coordinates that match how humans think about color:
- Hue: The color type as an angle on a color wheel (0-360 degrees). 0 = red, 120 = green, 240 = blue.
- Saturation: The intensity or purity. 0% = gray, 100% = full color.
- Lightness (HSL): 0% = black, 50% = pure color, 100% = white.
- Value (HSV): 0% = black, 100% = brightest version of that hue (not white).
HSL is natively supported in CSS. HSV is the default in design tools like Photoshop and Figma. Both are typically interpreted within the sRGB gamut -- they are different coordinate systems for the same set of colors, not separate gamuts.
Perceptual Color Spaces: CIELAB and OKLCH
Standard RGB and HSL have a fundamental problem: they are not perceptually uniform. A 10-unit change in lightness does not always look like the same amount of change across different hues. Blues appear much darker than yellows at the same stated lightness value.
CIELAB (also written Lab) was defined by the CIE (International Commission on Illumination) to model human perception. Its L axis represents lightness from 0 (black) to 100 (white), while a and b represent color opponents (green-red and blue-yellow). Equal numeric distances in Lab correspond more closely to equal perceived differences.
OKLCH improves on earlier perceptual models with better uniformity, especially for saturated colors. It uses Lightness (0-1), Chroma (saturation intensity), and Hue (angle). The CSS Color Level 4 specification supports it directly:
/* OKLCH in CSS */
color: oklch(0.7 0.15 180); /* Lightness, Chroma, Hue */
/* Creating a palette with consistent perceived lightness */
--brand-red: oklch(0.65 0.2 25);
--brand-green: oklch(0.65 0.2 155);
--brand-blue: oklch(0.65 0.2 250);
All three colors above have identical lightness (0.65), and because OKLCH is perceptually uniform, they will genuinely look equally light -- something that HSL cannot guarantee.
Color Gamut: Why It Matters
A color gamut defines the boundaries of what a color space can represent. Think of it as the fence around a color space's territory.
Practical gamut sizes (approximate, relative to human vision):
| Color Space | Approximate Coverage of Visible Colors |
|---|---|
| sRGB | ~35% |
| Display P3 | ~45% |
| Adobe RGB | ~50% |
| ProPhoto RGB | ~90% |
| Human vision | 100% (by definition) |
When a color exists in one gamut but not another, it is called out of gamut. A vivid electric blue that looks perfect on a Display P3 screen may have no exact sRGB equivalent -- the browser or application must compress it into the nearest representable color, which will look duller.
This is also the core reason printed colors often disappoint: the CMYK gamut (which varies by paper and ink) is smaller than sRGB in most regions, particularly for saturated blues, greens, and purples.
Choosing the Right Color Space by Task
| Task | Best Color Space | Why |
|---|---|---|
| Web design (general) | sRGB via HSL | Universal browser support; HSL makes palette creation intuitive |
| CSS code | HEX or HSL (sRGB) | Native browser formats; widely understood |
| Print design | CMYK (with ICC profile) | Matches physical ink output; prevents gamut surprises |
| Accessibility / contrast | OKLCH or CIELAB | Perceptually uniform lightness predicts real contrast accurately |
| Programmatic color manipulation | HSL or OKLCH | Rotating hue, adjusting lightness, and generating scales are straightforward |
| Photography editing | Adobe RGB or ProPhoto RGB | Preserves maximum color detail through editing pipeline |
| Modern wide-gamut web | Display P3 via color() or oklch() |
Reaches vivid colors on capable screens with CSS fallback |
Common Mistakes and How to Avoid Them
Designing in RGB, Printing in CMYK
This is the single most common color workflow error. If you build a brand identity using vivid sRGB purples and electric blues, those colors may shift noticeably when converted to CMYK for business cards and brochures. Always soft-proof your design in the target CMYK profile before finalizing brand colors.
Assuming HSL Lightness Is Perceptually Accurate
HSL lightness of 50% for pure yellow (hsl 60, 100%, 50%) looks far brighter to the human eye than the same 50% lightness for pure blue (hsl 240, 100%, 50%). If you are generating a color palette where all colors should appear equally light -- for example, accessible tag colors on a white background -- use OKLCH lightness instead.
Ignoring Wide-Gamut Displays
As of 2025, over 90% of mobile devices sold ship with wide-gamut (P3 or wider) screens. If you only design in sRGB, you are leaving roughly 25% of the available color range unused. Use the CSS color-gamut media query to serve richer colors to capable devices:
/* sRGB fallback */
.brand-accent { color: hsl(14, 100%, 55%); }
/* Wide-gamut enhancement */
@media (color-gamut: p3) {
.brand-accent { color: oklch(0.68 0.22 28); }
}
Comparing Colors Across Unmanaged Spaces
A hex value of #FF0000 in sRGB and the same hex value interpreted as Display P3 will produce different visible reds. Color management -- using ICC profiles and a color-managed browser or application -- ensures that the intended color is displayed correctly regardless of the device's native gamut.
How Color Management Works
Color management uses three components defined by the ICC standard:
- Input profile: Describes the color space of the source (your design file).
- Display/output profile: Describes the capabilities of the target device (monitor, printer).
- Rendering intent: Determines how out-of-gamut colors are handled. The two most common are perceptual (compresses the entire gamut to maintain relationships) and relative colorimetric (clips out-of-gamut colors to the nearest boundary).
In web development, browsers handle this automatically for tagged images (images with embedded ICC profiles) when the operating system has a display profile active. CSS colors in sRGB are assumed to be in the sRGB profile by default.
FAQ
What is the difference between RGB and CMYK?
RGB is an additive color model that combines red, green, and blue light for screens. CMYK is a subtractive model that uses cyan, magenta, yellow, and black inks for print. They have different gamuts, so some screen colors cannot be printed and vice versa.
Which color space should I use for web design?
Use HSL for creating and adjusting color palettes because it separates hue, saturation, and lightness intuitively. Use HEX or RGB in your final CSS. For perceptually uniform results, consider OKLCH, which is supported in modern CSS.
What is a color gamut?
A color gamut is the complete range of colors a device or color space can represent. sRGB covers about 35% of visible colors. Display P3 covers about 25% more than sRGB. Adobe RGB is wider still, commonly used in photography.
Why do my printed colors look different from the screen?
Screens use additive RGB light, while printers use subtractive CMYK ink. The CMYK gamut is smaller than RGB, so vivid screen colors -- especially saturated blues and greens -- get compressed into duller printed equivalents. Always soft-proof in CMYK before printing.
What is OKLCH and why should I care?
OKLCH is a perceptually uniform color space where equal numeric changes produce equal perceived color differences. It is supported in CSS via the oklch() function and is ideal for generating accessible palettes where lightness values reliably predict contrast.
What is the difference between a color space and a color model?
A color model is the mathematical method of describing colors (like RGB channels or HSL coordinates). A color space is a specific implementation that maps those numbers to actual visible colors within a defined gamut. sRGB and Display P3 both use the RGB model but define different gamuts.
What is Display P3 and when should I use it?
Display P3 is a wide-gamut color space used by modern Apple devices and many newer monitors. It covers about 25% more colors than sRGB. Use it when designing for audiences with wide-gamut screens and when you need more vivid greens and reds than sRGB allows.
How do I convert between color spaces without color shifts?
Use ICC color profiles and a color-managed workflow. Design software like Photoshop and Affinity can soft-proof conversions. When a source color falls outside the target gamut, a rendering intent (perceptual or relative colorimetric) determines how it gets mapped.
Is HSL a color space or a color model?
HSL is a color model -- it describes a way of specifying colors using hue, saturation, and lightness coordinates. In CSS, hsl() values are interpreted within the sRGB color space. The same HSL numbers in a different color space would produce different visible colors.
Can I use wide-gamut colors in CSS today?
Yes. The CSS Color Level 4 specification defines color(), oklch(), oklab(), lab(), and lch() functions that support wide-gamut color spaces. All major browsers support these as of 2024. Use @supports or the color-gamut media query for fallbacks.
Related Tools
- Color Converter -- Convert between HEX, RGB, HSL, HSV, and CMYK instantly
- HEX to RGB Converter -- Quick hex-to-RGB conversion
- HSL to RGB Converter -- Convert HSL values to RGB
- Color Picker -- Visually select and fine-tune colors
- Color Palette Generator -- Generate harmonious color schemes from a base color