Why Color Formats Matter
Web developers work with color in multiple formats depending on the context: hex codes from design tools like Figma, RGB values in CSS, HSL for programmatic color manipulation, and HSB (HSV) in image editors like Photoshop. Understanding these formats and how to convert between them is essential for modern front-end development.
HEX: The Design Standard
Hexadecimal color codes represent RGB values in base-16:
#RRGGBB
#FF5733 -> R=255, G=87, B=51
Each channel (R, G, B) uses 2 hex digits (0-F, representing 0-255). Short hex (#RGB) expands to #RRGGBB:
#F00->#FF0000(pure red)#FFF->#FFFFFF(white)
With alpha transparency: #RRGGBBAA - for example, #FF573380 is 50% transparent orange.
Hex is best for design handoffs (Figma, Sketch output hex), CSS/HTML color values, and version control (compact, diff-friendly).
RGB: The Screen Model
RGB (Red, Green, Blue) directly maps to how screens create colors by mixing light:
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5); /* 50% transparent */
Each channel ranges from 0-255. All zeros equals black; all 255s equals white.
Modern CSS notation uses space-separated values:
color: rgb(255 87 51); /* CSS Color Level 4 */
color: rgb(255 87 51 / 50%); /* With alpha */
RGB is best for CSS color mixing, Canvas API drawing operations, and programmatic color generation.
HSL: The Intuitive Model
HSL (Hue, Saturation, Lightness) maps more closely to how humans think about color:
color: hsl(11, 100%, 60%); /* Orange */
color: hsla(11, 100%, 60%, 0.5); /* 50% transparent */
- Hue (0-360 degrees): Position on the color wheel. 0 degrees is red, 120 degrees is green, 240 degrees is blue.
- Saturation (0-100%): Gray (0%) to vivid (100%)
- Lightness (0-100%): Black (0%) through color (50%) to white (100%)
HSL is ideal for programmatic color manipulation because you can darken or lighten by adjusting the L value, and create color palettes by keeping the same H while varying S and L.
/* Create a button hover by adjusting lightness */
.button { background: hsl(220, 90%, 55%); }
.button:hover { background: hsl(220, 90%, 45%); }
HSB/HSV: The Photoshop Model
HSB (Hue, Saturation, Brightness), also called HSV (Value), is used by Adobe software and many color pickers:
- Hue (0-360 degrees): Same as HSL
- Saturation (0-100%): White (0%) to pure color (100%)
- Brightness/Value (0-100%): Black (0%) to full color (100%)
HSB and HSL look similar but behave differently. Neither is natively supported in CSS - you need to convert to RGB or HSL first.
OKLCH: The Modern Perceptual Model
CSS Color Level 4 introduced OKLCH (Lightness, Chroma, Hue in the OKLab color space):
color: oklch(60% 0.2 30); /* Lightness, Chroma, Hue */
OKLCH is perceptually uniform, meaning equal numeric changes produce equal perceived color differences. This makes it ideal for accessible color palettes and theme color systems.
Contrast and Accessibility
Color contrast is crucial for accessibility (WCAG 2.1). The contrast ratio between text and background must be at least 4.5:1 for normal text (Level AA), 3:1 for large text (Level AA), or 7:1 for enhanced accessibility (Level AAA).
Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are relative luminance values.
-> Try the Color Converter