Whether you are a frontend engineer, a UI designer, or someone who just wants to tweak a background color, you will inevitably encounter #FF6347, rgb(255,99,71), and hsl(9,100%,64%). All three describe the exact same color — tomato red — yet in three completely different ways. This guide walks through the physics behind each color model, how to convert between them, and which to use in what situation.
1. What Is a Color Code, and Why Do We Need Multiple Models?
The human eye perceives visible light in the roughly 380 nm (violet) to 700 nm (red) wavelength range. Computers need a precise numeric language to describe any point in that range. Different color models approach the problem from different angles: some mirror the physical properties of light (RGB), some accommodate the realities of ink on paper (CMYK), and some align with how humans intuitively perceive and think about color (HSL). No single model is universally "best" — the right choice depends on the medium you are designing for.
The quick rule of thumb: use RGB, HEX, or HSL for screen; use CMYK for print; prefer HSL when adjusting colors by feel; and use HEX when pasting values into CSS or design tools.
2. RGB: The Additive Light Model at the Core of Every Screen
RGB stands for Red, Green, and Blue — three color channels each ranging from 0 to 255 (8 bits = 256 levels), yielding 256³ = 16,777,216 possible colors. RGB is an additive color model: combining all three channels at full intensity produces white; zero on all channels produces black. This is the opposite of mixing paint, but perfectly matches the behavior of light.
In CSS: rgb(255, 99, 71) describes tomato red. With transparency: rgba(255, 99, 71, 0.5), where the Alpha channel ranges from 0 (fully transparent) to 1 (fully opaque). Modern CSS also accepts rgb(255 99 71 / 50%) — same result, newer syntax.
Under the hood, virtually every display technology — LCD, OLED, Micro-LED — drives each pixel with three separate RGB sub-pixels. RGB is the language closest to the physical reality of how screens emit light.
3. HEX: The Shorthand Every Developer Knows
A HEX color code is simply RGB written in hexadecimal. The format #RRGGBB splits into three two-character pairs, each representing one channel as a hex number (0–9 and A–F, encoding 0–255). For #FF6347:
FF(red) = decimal 25563(green) = decimal 9947(blue) = decimal 71
When each channel pair is identical digits you can use 3-character shorthand: #F06 expands to #FF0066, and #FFF expands to #FFFFFF (pure white). CSS also supports 8-character HEX where the last two digits encode alpha: #FF634780 gives 50% opacity tomato red (0x80 = 128 ≈ 50% of 255).
HEX is concise, easy to copy and paste, and supported universally in design tools — which is why it dominates in CSS files and design handoffs.
4. HSL and HSB: Color Models Built Around Human Intuition
HSL stands for Hue, Saturation, and Lightness. It was designed to map more naturally onto how people talk about color:
- Hue: An angle from 0° to 360° around the color wheel. 0° = red, 120° = green, 240° = blue, 360° wraps back to red.
- Saturation: 0% is a fully desaturated grey; 100% is the most vivid pure color at that hue.
- Lightness: 0% is pure black; 50% is the naturally vivid shade; 100% is pure white.
The big advantage of HSL is intuitiveness. "Make this orange a bit darker" means simply decreasing Lightness in HSL — no need to figure out which RGB values to lower. CSS natively supports it: hsl(9, 100%, 64%) is tomato red.
HSB (also called HSV) is a close relative used by Photoshop and Illustrator. The key difference: in HSB, Brightness at 100% gives you the vivid pure hue; in HSL, Lightness at 100% gives you white, and 50% is the vivid hue. Figma and CSS use HSL; Adobe's legacy tools default to HSB.
5. CMYK: The Four-Color Model for Print
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). Inks work by subtractive mixing — each ink absorbs certain wavelengths rather than emitting them. The more ink you layer, the less light is reflected back, making the result darker. In theory, mixing C + M + Y should produce black, but in practice it creates a muddy brown, so a dedicated Black (K) channel is added for true blacks and to reduce ink consumption in large dark areas.
CMYK is the standard for print design — business cards, posters, packaging. It does not apply to screen work. Crucially, RGB has a wider color gamut than CMYK: highly saturated electric colors that look vivid on screen simply cannot be reproduced in print. Always perform a color profile conversion and request a proof before sending screen-designed files to a print shop.
6. Color Model Comparison at a Glance
| Model | Best For | Strengths | Limitations |
|---|---|---|---|
| RGB | Screen display, image processing, computation | Closest to physical reality; mathematically precise | Not intuitive for adjustment by feel |
| HEX | Frontend code, CSS, design specs | Compact, copy-paste ready, universally supported | Hard to "read" a color's meaning from the value |
| HSL | UI color adjustment, programmatic theming | Maps to human perception; easy to derive palettes | Requires conversion before comparing to print |
| CMYK | Print production, graphic design for print | Matches physical ink output | Not for screens; narrower gamut than RGB |
7. The Math Behind Color Conversion
HEX → RGB: Parse each two-character hex pair as a base-16 number. For #1A2B3C: R = 0x1A = 26, G = 0x2B = 43, B = 0x3C = 60.
RGB → HSL (summary):
- Normalize R, G, B by dividing each by 255 to get values in [0, 1].
- Find max and min of the three values; compute delta = max − min.
- Lightness L = (max + min) / 2.
- If delta = 0, the color is achromatic: S = 0, H = 0. Otherwise S = delta / (1 − |2L − 1|).
- Hue: if max is R → H = 60 × ((G−B)/delta mod 6); if max is G → H = 60 × ((B−R)/delta + 2); if max is B → H = 60 × ((R−G)/delta + 4).
While understanding the formulas is educational, in day-to-day design and development you'll rely on a color conversion tool to do the math instantly.
8. WCAG Contrast Ratios and Accessible Design
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratio requirements between text and background colors, ensuring readability for users with low vision or color blindness:
- AA (normal text): contrast ratio ≥ 4.5:1
- AA (large text, ≥ 18pt or bold 14pt): contrast ratio ≥ 3:1
- AAA (enhanced, normal text): contrast ratio ≥ 7:1
The formula is (L1 + 0.05) / (L2 + 0.05), where L1 ≥ L2 are the relative luminances of the two colors. Relative luminance is calculated by first linearizing the sRGB values (gamma correction), then combining with weights: L = 0.2126R + 0.7152G + 0.0722B. Pure black (#000, L=0) vs. pure white (#FFF, L=1) gives 21:1 — the maximum possible ratio.
Approximately 8% of men have some form of color vision deficiency. Meeting WCAG AA is a baseline expectation in modern web design, not an optional extra.
9. Practical Color Palette Strategy
Build palettes with HSL: Lock the Hue, then vary Saturation and Lightness to produce a full scale — dark shades for text and borders, the mid tone for primary actions, light tints for backgrounds and hover states. For example, from the primary hsl(211, 80%, 45%):
- Dark:
hsl(211, 80%, 25%) - Light tint:
hsl(211, 80%, 92%) - Desaturated neutral:
hsl(211, 15%, 45%)
Use color wheel relationships:
- Complementary (180° apart): high contrast, great for accents.
- Analogous (30–60° apart): harmonious, good for backgrounds and supporting shades.
- Triadic (120° apart): vibrant and balanced, suited to playful, multi-color UIs.
- Split-complementary: softer than direct complementary while preserving visual interest.
Never convey information through color alone. Color-blind users cannot distinguish states that differ only in hue. Always pair color with icons, labels, or patterns.
10. Modern CSS Color Syntax
CSS Color Level 4 expands the toolkit further:
color(display-p3 0.5 0.2 0.8)— targets the wider Display P3 gamut available on modern monitors and phones.oklch(60% 0.18 255)— a perceptually uniform space where rotating the hue preserves perceived lightness, rapidly gaining traction in design systems.color-mix(in hsl, #FF6347 40%, #1E90FF)— blends two colors directly in CSS without JavaScript.
Closing Thoughts
Color codes are not arbitrary string of characters — they encode decades of optics research, perceptual psychology, printing engineering, and accessibility standards. Understanding why RGB uses additive mixing, why HSL maps to human intuition, and what WCAG ratios actually measure will make you a better designer and developer. Next time you reach for a color picker or paste a HEX value, you'll know exactly what the numbers mean.