Color Theory for Designers:
HEX, RGB, HSL, CMYK and When to Use Each
There are five common color formats — HEX, RGB, HSL, HSV, and CMYK — and most designers use all of them without really understanding when each one is appropriate. This guide fixes that, with real examples, the math behind each format, and a decision tree for choosing the right one every time.
Why Multiple Color Formats Exist
Every color format was designed for a specific use case. They all describe the same underlying color — just through different lenses:
- HEX — optimized for web browsers and code readability
- RGB — optimized for screens and additive light mixing
- HSL/HSV — optimized for human intuition about color relationships
- CMYK — optimized for physical print production
Knowing which format to reach for in which context separates designers who fight their tools from designers who are fluent in them.
Use our free Color Picker to instantly convert any color between all five formats, generate harmonies, and check WCAG contrast — right in your browser.
HEX — The Web Standard
HEX (hexadecimal) encodes a color as a 6-character string: #RRGGBB, where each pair of characters is a hex value from 00 to FF representing red, green, and blue channels 0–255.
Example: #A78BFA = R:167, G:139, B:250 — a medium violet.
Short form: If both hex digits of each channel are the same (e.g. #AABBCC), you can write #ABC. #fff = #ffffff (white). HEX8 adds an alpha channel: #A78BFA80 (50% opacity).
Use HEX when: writing CSS, sharing colors with developers, storing colors in design tokens, or referencing colors in any text-based system.
RGB — The Screen Model
RGB (Red, Green, Blue) describes color as three integers 0–255. It directly maps to how OLED and LCD screens work — each pixel is a cluster of red, green, and blue subpixels whose brightness you control.
rgb(167, 139, 250) = the same violet as #A78BFA.
CSS also supports rgba(167, 139, 250, 0.5) for 50% opacity, and the modern space-separated syntax: rgb(167 139 250 / 50%).
Use RGB when: working in CSS with opacity needs, programming color animations, or using JavaScript to manipulate colors dynamically.
HSL — The Designer's Format
HSL (Hue, Saturation, Lightness) is the most human-intuitive color model:
- Hue (0–360°) — position on the color wheel. 0° = red, 120° = green, 240° = blue.
- Saturation (0–100%) — color intensity. 0% = gray, 100% = fully vivid.
- Lightness (0–100%) — 0% = black, 100% = white, 50% = pure color.
hsl(258, 89%, 76%) = the same violet. To darken it by 10%: hsl(258, 89%, 66%). To desaturate: hsl(258, 40%, 76%). This is impossible to do intuitively in HEX or RGB.
Use HSL when: building design systems with consistent tint/shade scales, writing CSS custom properties, or generating harmonious color palettes programmatically.
HSV/HSB — Photoshop's Model
HSV (Hue, Saturation, Value) — also called HSB (Brightness) — is similar to HSL but uses Value instead of Lightness. The key difference:
- In HSL, a pure color sits at L=50%. To get black, reduce L to 0%. To get white, increase L to 100%.
- In HSV, a pure color sits at S=100%, V=100%. To get black, reduce V to 0%. White requires both S=0% and V=100%.
HSV maps more naturally to the "color picker square" interface used by Photoshop, Figma, and most design apps — which is why it appears there. CSS uses HSL, not HSV.
Use HSV when: working in design tools like Photoshop, Illustrator, or Figma's color picker.
CMYK — The Print Model
CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used in physical printing. Unlike RGB which adds light, CMYK subtracts light by applying ink to white paper.
The conversion from RGB to CMYK is context-dependent — the same CMYK values produce different colors on different paper stocks and printers. This is why print designers use ICC color profiles.
Never design for print in RGB and convert to CMYK at the end. Some vivid RGB colors (especially bright blues and greens) are out of gamut for CMYK and will print as muddy approximations. Design in CMYK from the start for any project destined for physical print.
Quick Reference: Which Format to Use
| Context | Recommended Format | Why |
|---|---|---|
| CSS stylesheets | HEX or HSL | HEX for static colors, HSL for dynamic/programmatic use |
| CSS custom properties / design tokens | HSL | Easy to create scales: L: 90%, 70%, 50%, 30%, 10% |
| JavaScript color manipulation | RGB | Simple arithmetic on 0–255 channels |
| Figma / Sketch / XD | HEX or HSB | Tools default to these; HEX for hand-off to devs |
| Photoshop / Illustrator | HSB (on screen), CMYK (for print) | HSB in the picker, CMYK for print output |
| Physical printing | CMYK | Screen colors (RGB) can't be reproduced in ink |
| Sharing with clients | HEX | Universally understood, copy-paste friendly |
| Accessibility checks | RGB (internally) | WCAG luminance calculation uses linear RGB |
WCAG Contrast: The Accessibility Standard Every Designer Must Know
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background. The formula uses relative luminance — a perceptual brightness value calculated from linearized RGB.
| Level | Normal text | Large text (18pt+) | UI components |
|---|---|---|---|
| AA Required | 4.5:1 | 3:1 | 3:1 |
| AAA Enhanced | 7:1 | 4.5:1 | — |
White text on a pure red background (#FF0000) fails AA — the contrast ratio is only 3.99:1. Darkening the red to #C00000 brings it to 5.74:1, passing AA. The contrast checker in our Color Picker shows you this in real time.
Color Harmony Types Explained
Color harmonies are combinations of colors that are visually pleasing because of their mathematical relationship on the color wheel. All are computed by rotating the hue value in HSL space:
- Complementary (+180°) — Maximum contrast. A color and its opposite. Bold and energetic. Easy to overdo.
- Analogous (±30°) — Adjacent colors. Natural and calm. Good for backgrounds and subtle UIs.
- Triadic (+120°, +240°) — Three equally spaced. Vibrant and balanced. Requires careful saturation management.
- Split-complementary (+150°, +210°) — One base plus two colors adjacent to its complement. High contrast with less tension than complementary.
- Tetradic (+90°, +180°, +270°) — Four colors forming a rectangle on the wheel. Rich but complex — typically let one color dominate.
- Tints — Increase lightness in HSL. Creates softer, lighter versions of your color.
- Shades — Decrease lightness in HSL. Creates deeper, darker versions.
The One Rule That Covers Everything
If you take one thing from this guide, make it this: choose your format based on where the color lives, not where it started.
Design in HSL for systematic, scalable color systems. Hand off in HEX to developers. Build print assets in CMYK from day one. Check accessibility in WCAG contrast ratios. And use our Color Picker to convert instantly between all of them — no mental math required.