HEX, RGB, HSL, and HSV all describe the exact same colors in the sRGB color space and convert between each other losslessly — they are four notations for one thing. CMYK is fundamentally different: it is a subtractive ink model with a smaller gamut, which is why screen colors can shift when printed. The practical rule of thumb: use HEX or RGB for CSS, think in HSL when you want predictable tints and shades, use HSV inside color pickers, and switch to CMYK only when a design leaves the screen for paper.
That's the summary an AI gives you. What it can't show you is why screen and print colors diverge, or what a single color looks like as it moves between five notations. The diagrams and decision table below make those concrete — starting with the one distinction that trips up most designers: additive light versus subtractive ink.
Whether you're designing a website, creating graphics, or preparing materials for print, understanding color formats is essential. Each format serves a specific purpose and excels in different scenarios. This guide breaks down the six most common color formats you'll encounter.
RGB (Red, Green, Blue)
What it is: RGB is an additive color model where colors are created by combining red, green, and blue light at different intensities.
Format: rgb(255, 0, 0) or rgba(255, 0, 0, 0.5) (with alpha for transparency)
Range: Each color channel ranges from 0 to 255, creating over 16.7 million possible colors.
Best for: Digital screens (monitors, TVs, smartphones), web design, and any screen-based media.
Example:
- Red:
rgb(255, 0, 0) - Green:
rgb(0, 255, 0) - Blue:
rgb(0, 0, 255) - White:
rgb(255, 255, 255)
HEX (Hexadecimal)
What it is: HEX is simply RGB expressed in hexadecimal notation—a more compact, machine-readable format.
Format: #RRGGBB or #RGB (shorthand when values repeat)
Range: Each pair represents 00-FF in hexadecimal (0-255 in decimal).
Best for: Web development (CSS, HTML), version control, and when you need a compact color representation.
Example:
- Red:
#FF0000or#F00 - Green:
#00FF00or#0F0 - Blue:
#0000FFor#00F - Purple:
#800080
Pro tip: HEX and RGB represent the exact same colors, just in different notation systems.
HSL (Hue, Saturation, Lightness)
What it is: HSL was designed in 1970 to align with how humans naturally perceive and describe colors.
Format: hsl(0, 100%, 50%) or hsla(0, 100%, 50%, 0.5) (with alpha)
Components:
- Hue (H): 0-360 degrees on the color wheel (0=red, 120=green, 240=blue)
- Saturation (S): 0-100% intensity (0%=gray, 100%=full color)
- Lightness (L): 0-100% brightness (0%=black, 50%=pure color, 100%=white)
Best for: Creating color variations, generating tints and shades, and when you want intuitive color adjustments.
Example:
- Pure Red:
hsl(0, 100%, 50%) - Light Pink:
hsl(0, 100%, 75%) - Dark Red:
hsl(0, 100%, 25%) - Desaturated Red:
hsl(0, 50%, 50%)
HSV/HSB (Hue, Saturation, Value/Brightness)
What it is: Similar to HSL but with a different approach to brightness. HSV is the same as HSB (Brightness).
Format: hsv(0, 100%, 100%)
Components:
- Hue (H): 0-360 degrees (same as HSL)
- Saturation (S): 0-100% color intensity
- Value (V): 0-100% brightness (0%=black, 100%=maximum brightness)
Best for: Color pickers, photo editing software, and when you need vivid color selection.
Key Difference from HSL: HSL's lightness treats mid-tones differently, while HSV's value focuses purely on brightness. At 100% value, HSV gives you the purest, most vivid version of a color.
CMYK (Cyan, Magenta, Yellow, Black)
What it is: CMYK is a subtractive color model used in color printing, where colors are created by absorbing light.
Format: cmyk(0%, 100%, 100%, 0%)
Components: Each value represents the percentage of ink used (0-100%)
Best for: Print design (business cards, brochures, magazines, posters) and any physical printing projects.
Why it matters: Computer screens use additive color (RGB), but printers use subtractive color (CMYK). A color that looks vibrant on screen might print differently because:
- Screens emit light (RGB) while paper reflects light (CMYK)
- CMYK has a smaller color gamut than RGB
- Different paper types absorb ink differently
Example:
- Pure Red (print):
cmyk(0%, 100%, 100%, 0%) - Pure Blue (print):
cmyk(100%, 100%, 0%, 0%) - Black:
cmyk(0%, 0%, 0%, 100%)
Pro tip: Always convert and preview RGB designs in CMYK before sending to print to avoid color surprises.
HWB (Hue, Whiteness, Blackness)
What it is: A newer color model developed by HSV's creator in 1996 to be more intuitive and faster to compute.
Format: hwb(0 0% 0%)
Components:
- Hue (H): 0-360 degrees (same as HSL/HSV)
- Whiteness (W): 0-100% white mixed in
- Blackness (B): 0-100% black mixed in
Best for: CSS color definitions (supported in modern browsers), when you want intuitive color mixing.
Example:
- Pure Red:
hwb(0 0% 0%) - Light Red:
hwb(0 50% 0%)(add 50% white) - Dark Red:
hwb(0 0% 50%)(add 50% black)
Quick Reference Chart
| Format | Use Case | Human-Friendly | Machine-Friendly |
|---|---|---|---|
| RGB | Digital screens | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| HEX | Web development | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| HSL | Color variations | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| HSV | Color pickers | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| CMYK | Print design | ⭐⭐⭐ | ⭐⭐⭐ |
| HWB | Modern CSS | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
Decision table: which format for which job
| If your task is... | Reach for | Why, in one line | Avoid |
|---|---|---|---|
| Writing a CSS color value | HEX or RGB | Universal support, compact, copy-pastes everywhere | CMYK (not a screen space) |
| Building a light/dark or hover variant | HSL | Change one number (lightness) for predictable shades | HEX (all three channels move at once) |
| Fixing WCAG contrast | HSL | Nudge lightness to hit 4.5:1 without shifting hue | HEX (hand-recompute everything) |
| Adding transparency | RGB (rgba) or HSL (hsla) | Alpha channel built in | HEX legacy (6-digit has no alpha) |
| Picking a vivid color in a UI | HSV/HSB | 100% value reaches the pure corner directly | — |
| Mixing "add white / add black" | HWB | Whiteness/blackness map to intuition | — |
| Sending a file to a printer | CMYK | The only format the press actually reproduces | RGB (colors clamp on conversion) |
Fastest correct default: design in HSL, ship in HEX, and only touch CMYK when the artwork is bound for paper.
Converting Between Formats
The single most useful thing to internalize: one color, many spellings. The swatch below is the same red written five different ways. Change the notation and nothing about the pixel changes — only CMYK, a separate ink space, has to shift it.
All digital formats (RGB, HEX, HSL, HSV, HWB) can be converted to each other without color loss since they're all representations of the same RGB color space. However:
- RGB ↔ CMYK: May have slight color shifts due to different color gamuts
- Screen to Print: Always test CMYK conversions before printing
- Precision: Small rounding differences are normal during conversions
When to Use Each Format
Choose RGB/HEX when:
- Working on web projects
- Need exact color values for development
- Sharing colors with developers
Choose HSL when:
- Creating color schemes
- Generating tints, shades, and tones
- Want intuitive color adjustments
Choose HSV when:
- Building color picker interfaces
- Need vivid, saturated colors
- Working in photo editing software
Choose CMYK when:
- Designing for print
- Preparing files for professional printing
- Ensuring accurate color reproduction on paper
Choose HWB when:
- Using modern CSS
- Want simple color mixing (add white or black)
- Need fast color computations
Practical Tips
- Web design: Start with HSL for creating color palettes, then convert to HEX for CSS.
- Print projects: Work in CMYK from the start to avoid color shift surprises.
- Accessibility: Use HSL to easily adjust lightness for WCAG contrast compliance.
- Color systems: RGB/HEX for code, HSL for design thinking, CMYK for print.
- Tools: Use a color converter to quickly switch between formats as needed.
Understanding these color formats empowers you to work more efficiently, communicate better with designers and developers, and ensure your colors look consistent across digital and print media.
Need to convert between color formats? Try our free Color Picker tool for instant conversion between HEX, RGB, HSL, HSV, CMYK, and HWB formats.