Overview of Color Representations
In web design and development, colors have multiple representation formats. The three most common are:
- HEX (Hexadecimal): e.g.,
#FF5733 - RGB (Red-Green-Blue): e.g.,
rgb(255, 87, 51) - HSL (Hue-Saturation-Lightness): e.g.,
hsl(9, 100%, 60%)
Each representation has its suitable scenarios. Understanding the conversion relationships between them will make you more proficient in design.
Detailed Explanation of Three Color Models
HEX Hexadecimal
The most widely used web color format. Starts with #, followed by 6 hexadecimal digits (or shorthand 3 digits). Each pair represents the red, green, and blue channel values (00-FF).
# FF5733 → Red=FF(255), Green=57(87), Blue=33(51)
RGB Red-Green-Blue
The most intuitive color model, directly specifying values (0-255) for red, green, and blue channels. In CSS, you can also add an alpha transparency channel, written as rgba(255, 87, 51, 0.5).
HSL Hue-Saturation-Lightness
The most designer-friendly color model:
- Hue: 0-360°, representing position on the color wheel
- Saturation: 0-100%, the purity of the color
- Lightness: 0-100%, the brightness of the color
The advantage of HSL is: when you want "the same color family but lighter," you simply adjust the lightness value.
Conversion Formulas
HEX → RGB
R = parseInt(HEX[1..2], 16)
G = parseInt(HEX[3..4], 16)
B = parseInt(HEX[5..6], 16)
RGB → HSL
R' = R/255, G' = G/255, B' = B/255
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin
H = 60° × (different formulas per case)
S = Δ / (1 - |2L - 1|)
L = (Cmax + Cmin) / 2
Practical Application Tips
- CSS Variables: Use HSL to define theme colors; easily generate variants by adjusting lightness
- Design Systems: Use HSL for unified hue management — change hue to globally reskin
- Accessibility: Use lightness values to determine foreground-background contrast
- Gradients: HSL creates more natural gradient transitions
Color code conversion may seem basic, but it's a skill you might use every day in real-world development.