Explore and understand different color spaces interactively
RGB
HSV
HSL
CMYK
#6496C8
rgb(100, 150, 200)
hsv(210°, 50%, 78%)
hsl(210°, 48%, 59%)
cmyk(50%, 25%, 0%, 22%)
lab(61, -3, -31)
Color spaces are mathematical models that represent colors as tuples of numbers. Different color spaces are useful for different purposes, and understanding how they relate helps us work with color more effectively in digital media, printing, and design.
RGB is an additive color model where colors are created by mixing red, green, and blue light. This is how screens and monitors display color - by combining different intensities of these three primary colors of light. The RGB cube represents all possible colors where each axis represents the intensity (0-255) of one primary color.
Use Cases:
- Digital displays (monitors, TVs, phones)
- Web development (CSS colors)
- Digital photography and image editing
- Video production
Key Insight:
RGB is device-dependent, meaning the same RGB values can look different on different screens. When all values are at maximum (255, 255, 255), you get white. When all are at minimum (0, 0, 0), you get black.
HSV represents colors in a more intuitive way that aligns with how humans perceive color. Hue is the color type (0-360°), Saturation is the intensity or purity of the color (0-100%), and Value is the brightness (0-100%). The HSV cylinder makes it easy to select colors by choosing a hue and then adjusting how vivid and bright it should be.
Components:
- Hue (0-360°): The color itself - 0°/360° is red, 120° is green, 240° is blue
- Saturation (0-100%): How pure/vivid the color is - 0% is gray, 100% is fully saturated
- Value (0-100%): How bright the color is - 0% is black, 100% is full brightness
Key Insight:
HSV is particularly useful for color pickers because it matches our intuition: pick a color (hue), make it more or less vivid (saturation), and make it lighter or darker (value). It's popular in graphic design software and color selection tools.
HSL is similar to HSV but uses Lightness instead of Value. Lightness represents how much white or black is mixed with the pure color. At 50% lightness, you get the pure hue; at 100% you get white; at 0% you get black. The HSL double-cone shape reflects this symmetric relationship.
HSV vs HSL:
- HSV Value: Pure colors are at 100% Value with full Saturation
- HSL Lightness: Pure colors are at 50% Lightness with full Saturation
- HSL is often preferred for CSS because it's more symmetric and predictable
- HSV is common in color pickers because pure colors are at maximum Value
Key Insight:
HSL is the color space used in CSS's hsl() function. It's particularly useful for creating color variations by adjusting lightness - you can easily create lighter or darker versions of a color for hover states, shadows, etc.
CMYK is a subtractive color model used in color printing. Unlike RGB which adds light, CMYK works by subtracting (absorbing) light from white paper. Cyan absorbs red light, Magenta absorbs green, Yellow absorbs blue, and Key (black) is added for depth and true blacks. When you print, you're layering these inks on white paper.
Use Cases:
- Professional printing and publishing
- Commercial printing presses
- Preparing artwork for physical reproduction
- Business cards, posters, magazines, packaging
Key Insight:
RGB colors won't always convert perfectly to CMYK because they have different gamuts (ranges of representable colors). Bright, saturated colors on screen may appear duller when printed. Professional designers convert to CMYK before sending files to print.
LAB (also called CIELAB or L*a*b*) is a device-independent color space designed to be perceptually uniform, meaning that the same amount of numerical change corresponds to roughly the same amount of visually perceived change. L represents lightness (0-100), A represents the green-red axis (-128 to +127), and B represents the blue-yellow axis (-128 to +127).
Components:
- L (0-100): Lightness - 0 is black, 100 is white
- A (-128 to +127): Green (negative) to Red (positive)
- B (-128 to +127): Blue (negative) to Yellow (positive)
Key Insight:
LAB is the "gold standard" for color accuracy and is often used as an intermediate space when converting between other color spaces. It's excellent for calculating color differences (Delta E) and is used in professional color management, photography, and scientific applications where perceptual accuracy matters.
Hex colors are simply RGB values written in hexadecimal (base-16) notation. The format is #RRGGBB where each pair of characters represents the intensity of red, green, and blue (00-FF in hex, which is 0-255 in decimal). This compact format is widely used in web development and design.
Examples:
- #FF0000 = RGB(255, 0, 0) = Pure Red
- #00FF00 = RGB(0, 255, 0) = Pure Green
- #0000FF = RGB(0, 0, 255) = Pure Blue
- #FFFFFF = RGB(255, 255, 255) = White
- #000000 = RGB(0, 0, 0) = Black
- #808080 = RGB(128, 128, 128) = Medium Gray
Color Gamuts
Different color spaces can represent different ranges of colors, called their "gamut." Not all colors visible to the human eye can be represented in every color space:
- Human Vision: Can perceive approximately 10 million colors
- sRGB (standard RGB): Limited gamut, but most common for web and screens
- Adobe RGB: Larger gamut than sRGB, used in professional photography
- CMYK: Smaller gamut than RGB - not all screen colors can be printed
- LAB: Encompasses all colors visible to humans and more
Explore how Red, Green, and Blue values change as Hue varies across the color spectrum