Understanding Color Formats
Colors on screens are created by combining light. Different color formats represent the same colors using different mathematical models. Understanding when to use each format helps you work more efficiently in design and development.
Color Format Reference
HEX (Hexadecimal)
The most common format for web colors. Each pair of characters represents Red, Green, and Blue values in base-16 (0-9, A-F).
``css
color: #FF5733; /* Full format: RRGGBB */
color: #F53; /* Shorthand: RGB (expands to #FF5533) */
color: #FF573380; /* With alpha: RRGGBBAA (50% opacity) */
`
Structure: #RRGGBB where each component ranges from 00 (0) to FF (255).
RGB (Red, Green, Blue)
Represents colors as three decimal values from 0-255. More intuitive for programmatic manipulation.
`css
color: rgb(255, 87, 51); /* Standard RGB */
color: rgba(255, 87, 51, 0.5); /* With alpha (0-1) */
color: rgb(255 87 51 / 50%); /* Modern syntax */
`
HSL (Hue, Saturation, Lightness)
The most intuitive format for creating color variations and themes.
`css
color: hsl(11, 100%, 60%); /* H: 0-360°, S: 0-100%, L: 0-100% */
color: hsla(11, 100%, 60%, 0.5); /* With alpha */
color: hsl(11 100% 60% / 50%); /* Modern syntax */
`
Understanding HSL values:
Hue (H): Color wheel position (0°=red, 120°=green, 240°=blue)- Saturation (S): Color intensity (0%=gray, 100%=vivid)
- Lightness (L): Brightness (0%=black, 50%=pure color, 100%=white)
When to Use Each Format
Format Best For Advantages HEX Design specs, quick colors Compact, universal support RGB Programmatic manipulation Easy math operations HSL Color schemes, theming Intuitive adjustments CMYK Print design Matches printing process HSV/HSB Design software Natural color selection
Color Conversion Formulas
HEX to RGB
`javascript
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
// hexToRgb("#FF5733") → { r: 255, g: 87, b: 51 }
`RGB to HSL
javascript
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2; if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}
`
HSL Color Manipulation
HSL makes color adjustments intuitive. Starting with hsl(200, 80%, 50%):
| Adjustment | Change | Result |
|---|---|---|
| Lighter | L: 50% → 70% | hsl(200, 80%, 70%) |
| Darker | L: 50% → 30% | hsl(200, 80%, 30%) |
| Muted/Desaturated | S: 80% → 40% | hsl(200, 40%, 50%) |
| Vivid/Saturated | S: 80% → 100% | hsl(200, 100%, 50%) |
| Complementary | H: +180° | hsl(20, 80%, 50%) |
| Analogous | H: ±30° | hsl(170, 80%, 50%) or hsl(230, 80%, 50%) |
CSS Custom Properties for Theming
Using HSL with CSS variables enables powerful theming:
`css
:root {
/* Define color as components */
--primary-h: 200;
--primary-s: 80%;
--primary-l: 50%;
/* Compose variations */
--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
--primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
--primary-dark: hsl(var(--primary-h), var(--primary-s), 30%);
--primary-muted: hsl(var(--primary-h), 40%, var(--primary-l));
}
/* Theme switching becomes trivial */
[data-theme="dark"] {
--primary-l: 60%;
}
``
Color Accessibility
When choosing colors, ensure sufficient contrast for readability:
| WCAG Level | Contrast Ratio | Use Case |
|---|---|---|
| AA (minimum) | 4.5:1 | Normal text |
| AA Large | 3:1 | Large text (18pt+) |
| AAA (enhanced) | 7:1 | Maximum accessibility |