Color Codes Explained
What HEX, RGB, and HSL color codes mean, how to convert between them, and when to use each format.
HEX color codes
A HEX color is a 6-digit hexadecimal number prefixed with #. Each pair of digits represents the red, green, and blue channels on a scale from 00 (0) to FF (255).
#FF5733 FF = Red (255 out of 255 — full red) 57 = Green (87 out of 255) 33 = Blue (51 out of 255) #000000 = Black (all channels zero) #FFFFFF = White (all channels max) #FF0000 = Pure red #0000FF = Pure blue
Short HEX notation is also valid: #F53 expands to #FF5533 — each digit is doubled.
RGB color codes
RGB expresses the same red, green, blue channels as decimal numbers (0–255) instead of hexadecimal:
rgb(255, 87, 51) → same as #FF5733 rgb(0, 0, 0) → black rgb(255, 255, 255) → white rgb(255, 0, 0) → pure red /* With transparency (alpha channel) */ rgba(255, 87, 51, 0.5) → 50% transparent rgba(255, 87, 51, 1.0) → fully opaque
HSL color codes
HSL (Hue, Saturation, Lightness) describes colors the way humans think about them rather than how screens produce them:
hsl(11, 100%, 60%) → same orange as #FF5733
11 = Hue (0–360°, position on the color wheel)
0/360 = red, 120 = green, 240 = blue
100% = Saturation (0% = gray, 100% = full color)
60% = Lightness (0% = black, 50% = normal, 100% = white)HSL makes it easy to create color variations: keep the hue constant, adjust lightness to get tints and shades, adjust saturation to get muted or vibrant versions. This is why design systems often define colors in HSL.
When to use each format
Frequently asked questions
- Are HEX codes case-sensitive?
- No. #FF5733 and #ff5733 are identical. Most style guides pick one convention (usually lowercase) and stick with it. CSS is case-insensitive for color values.
- What is the difference between RGB and RGBA?
- RGBA adds a fourth channel: alpha (opacity). The value ranges from 0 (fully transparent) to 1 (fully opaque). rgba(255, 0, 0, 0.5) is a 50% transparent red. HEX can also express opacity with an 8-digit code: #FF000080.
- What does the hue value represent in HSL?
- Hue is a degree on the color wheel: 0° and 360° are red, 30° is orange, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta. You can think of the hue as "which color" and the saturation and lightness as "how much of that color."