Color Theory for Designers: A Complete Guide to HEX, RGB, and HSL
Published: May 9, 2026 | Reading time: ~8 min
Every color on a screen is controlled by numbers. In web design, UI development, or digital painting, you inevitably encounter three major color formats: HEX, RGB, and HSL. They all describe the same thing — color — but from different perspectives. Understanding the math behind them helps you choose, adjust, and convert colors with precision.
Key concept: HEX is a compact hexadecimal shorthand for RGB. RGB is the native additive model of displays. HSL transforms RGB into a cylindrical coordinate system, making color adjustments far more intuitive. Use our Color Converter to experiment with these conversions.
1. RGB: The Display's Native Color Model
RGB (Red‑Green‑Blue) is the lowest‑level color representation. Each pixel is formed by three light emitters whose intensity ranges from 0 to 255, mixing approximately 16.77 million colors. This is additive mixing — the stronger the primaries, the closer the result is to white (255, 255, 255).
In CSS, RGB is written as rgb(59, 130, 246). Because it directly corresponds to the hardware driving the screen, it's the most direct model for images, video, and animations.
2. HEX: A Compact Shorthand for RGB
HEX (Hexadecimal) is simply an alternative notation for RGB, designed for compactness and easy copying. It converts each channel's decimal value (0‑255) into a two‑digit hex number (00‑FF) and concatenates them with a # prefix.
HEX Encoding
R (decimal) → two‑digit hex
G (decimal) → two‑digit hex
B (decimal) → two‑digit hex
Result: #RRGGBB
Example: rgb(59, 130, 246) → 59 = 3b, 130 = 82, 246 = f6 → #3b82f6. This shorter form is widely used in CSS and design tools.
3. HSL: The Most Human‑Intuitive Color Model
The problem with RGB and HEX is that if you want to make a color darker, how much should you reduce R, G, and B? It's not intuitive. HSL (Hue‑Saturation‑Lightness) was designed to solve this.
HSL separates color into three independent dimensions:
- Hue: 0°–360°, representing the position on the color wheel (0°=red, 120°=green, 240°=blue).
- Saturation: 0%–100%, where 0% is pure gray and 100% is the most vivid.
- Lightness: 0%–100%, where 0% is pure black, 50% is normal, and 100% is pure white.
HSL is essentially a transformation of the RGB cube into a cylindrical space, allowing independent control over a color's lightness and vividness.
4. Converting RGB to HSL Mathematically
This is a classic color space transformation. First, normalize RGB to the 0–1 range, then compute lightness, saturation, and finally hue through a piecewise function.
RGB → HSL Algorithm
1. Normalize: R' = R/255, G' = G/255, B' = B/255
2. Find max (Cmax), min (Cmin), and delta Δ = Cmax - Cmin
3. Lightness L = (Cmax + Cmin) / 2
4. Saturation S = 0 if Δ=0, else S = Δ / (1 - |2L - 1|)
5. Hue H: determine which channel is Cmax, then compute the angle and multiply by 60° to obtain 0°–360°
Worked example: convert rgb(59, 130, 246) to HSL.
R'=0.231, G'=0.510, B'=0.965. Cmax=0.965, Cmin=0.231, Δ=0.734.
L = (0.965+0.231)/2 = 0.598 → 60%.
S = 0.734 / (1 - |2×0.598 - 1|) = 0.734 / (1 - 0.196) ≈ 0.913 → 91%.
Cmax = blue, so H = 60 × (4 + (0.231-0.510)/0.734) ≈ 217°.
Final result: hsl(217, 91%, 60%). This is our original color. Try the Color Converter to verify any conversion.
5. Converting HSL Back to RGB
Given H, S, L, compute intermediate values: chroma C, secondary component X, and lightness offset m, then assign to R, G, B based on the hue sector.
HSL → RGB Algorithm
1. C = (1 - |2L - 1|) × S
2. X = C × (1 - |(H / 60°) mod 2 - 1|)
3. m = L - C/2
4. Based on H sector, assign (R', G', B') as permutations of (C, X, 0)
5. R = round((R' + m) × 255), same for G and B
This algorithm is embedded in all major browsers and design software. When you write hsl(217, 91%, 60%) in CSS, the browser performs this computation in real time.
6. When to Use Which Format?
| Scenario | Recommended Format | Reason |
|---|
| Copy‑pasting from design files | HEX | Compact, universal across tools |
| Adding transparency | RGB | Use rgba(r, g, b, a) |
| Creating color palettes or variants | HSL | Adjust lightness or saturation independently |
| CSS variables & theme switching | HSL | Change only the L value for dark mode |
Modern CSS even supports alpha in HEX (e.g., `#3b82f680`), but HSL remains the most flexible for generating systematic color scales. Keeping the hue constant and decreasing lightness creates a smooth gradient of shades — essential for button hover states, card backgrounds, and more.
FAQ
Why does my HEX color #3b82f6 look different in CSS?
HEX values are screen‑independent, but different displays have varying color gamuts and brightness settings, causing visual discrepancies. The code is correct; the difference is in the hardware.
How can I quickly darken a color without changing its hue?
Use HSL and reduce the Lightness value. For example, hsl(217, 91%, 40%) is darker than 60% while keeping the same hue and saturation — something HEX/RGB cannot easily achieve.
Which format is best for animations?
HSL excels in animations. By incrementing Hue, you can smoothly rotate through the color wheel, creating rainbow‑like effects that are cumbersome with RGB or HEX.