Color Formats Explained: HEX, RGB, and HSL
Quick Answer
HEX (#RRGGBB) and RGB (0–255 per channel) directly encode red, green, and blue intensities. HSL (hue 0–360°, saturation/lightness 0–100%) encodes color in a way that matches human perception, making it easier to build palettes and shades. Convert between all three with our Color Converter.
Introduction
Web colors are specified in three dominant formats: HEX (base-16 red, green, blue), RGB (decimal 0–255 per channel), and HSL (hue, saturation, lightness). All three describe the same sRGB color space but expose different axes: HEX and RGB are hardware-oriented (direct channel values), while HSL is human-oriented (intuitive hue, saturation, and lightness). Modern CSS also supports alpha via HEX8, rgba(), and hsla().
Step by Step
-
Understand HEX notation
HEX writes each channel as a two-digit base-16 number: #RRGGBB. 00 is off, FF (255) is full intensity. #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue, #FFFFFF white, #000000 black. A 4-digit shorthand #RGB expands to #RRGGBB, and #RRGGBBAA adds alpha (e.g. #FF573380 is 50% alpha).
-
Understand RGB notation
RGB uses decimal 0–255 per channel: rgb(255, 87, 51) is the same as #FF5733. The rgba() function adds a 0–1 alpha: rgba(255, 87, 51, 0.5) is 50% opaque. RGB is equivalent to HEX — it is just decimal instead of base-16.
-
Understand HSL notation
HSL uses hue (0–360° on the color wheel: 0=red, 120=green, 240=blue), saturation (0% = gray, 100% = full color), and lightness (0% = black, 50% = normal, 100% = white). hsl(11, 100%, 60%) is a vivid orange. HSL makes it trivial to build tints (raise lightness) and shades (lower lightness) of the same hue.
-
Convert between formats
HEX→RGB: parse each pair as base-16. RGB→HEX: convert each channel to 2-digit base-16. RGB→HSL: compute max/min of normalized channels, lightness = (max+min)/2, saturation depends on lightness, hue is the angle of the dominant channel. Use our Color Converter to do all of this instantly.
-
Choose the right format for the task
Use HEX for compactness in design tokens and assets. Use RGB/rgba() when you need to interpolate or animate channels. Use HSL/HSLA when generating palettes, shades, or theme variations — adjusting lightness by 10% is far easier than reasoning about RGB deltas.
Examples
Pure red in all three formats
Input: #FF0000
Output: rgb(255, 0, 0) = hsl(0, 100%, 50%)
A vivid orange
Input: #FF5733
Output: rgb(255, 87, 51) = hsl(11, 100%, 60%)
White and black
Input: #FFFFFF and #000000
Output: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
Building a 5-step shade from one HSL hue
Input: hsl(210, 70%, 50%) — vary lightness 30/40/50/60/70%
Output: #1A4D7F, #2E6BA3, #4389C7, #6FA8DC, #9EC5E8 — a coherent blue palette
Common Problems
- Mixing 3-digit and 6-digit HEX: #F00 and #FF0000 are the same color, but some parsers only accept one form. Normalize to 6-digit in code to avoid surprises.
- Forgetting that HSL lightness 50% is not 'half brightness': at 100% saturation, 50% lightness is the pure hue; above 50% it tints toward white, below 50% it shades toward black. '50% gray' is hsl(0, 0%, 50%).
- Alpha channel confusion: #RRGGBBAA (HEX8) is supported in modern browsers but not in older ones; rgba()/hsla() has wider support. Always test the target environment.
- Color-space mismatch: HEX, RGB, and HSL all describe sRGB. If you convert to/from P3 or Lab/OKLCH (used by modern displays), a naive channel copy produces wrong colors — use a proper color library.
Tips
- Use HSL when designing a palette: pick one hue, then vary lightness (e.g. 30/50/70%) and saturation (e.g. 60/80/100%) to generate coherent shades and tints.
- For accessibility, check contrast ratio against the background — WCAG AA requires 4.5:1 for normal text, AAA 7:1. Use our Color Converter to compute relative luminance and contrast.
- Prefer modern CSS color-mix() or oklch() for perceptually uniform interpolation — RGB interpolation can pass through muddy grays when mixing complementary colors.
- When generating gradients, convert endpoints to the same format first — mixing HEX and HSL in a single gradient declaration can produce unexpected midpoints.