HEX, RGB, HSL Color Codes — Web Designer Guide
Every color on your screen is represented by a code. Web designers and developers work with three main color formats: HEX, RGB, and HSL. Each has its own strengths.
HEX Color Codes
Format: #RRGGBB (6 hexadecimal digits)
Each pair represents Red, Green, Blue intensity from 00 (0) to FF (255). Example: #FF5733 = R:255, G:87, B:51 (an orange-red color).
Used in: HTML, CSS, design tools (Figma, Photoshop), brand guidelines.
RGB Color Codes
Format: rgb(R, G, B) — three values 0–255
More readable than HEX for understanding color composition. Example: rgb(255, 87, 51) is the same orange-red as #FF5733.
Use rgba(R, G, B, A) for transparency where A is 0 (transparent) to 1 (opaque).
HSL Color Codes
Format: hsl(Hue, Saturation%, Lightness%)
Most intuitive for designers. Hue = color wheel angle (0°=red, 120°=green, 240°=blue). Saturation = color intensity. Lightness = 0%=black, 100%=white.
Example: hsl(14, 100%, 60%) = a warm orange. Easier to adjust than HEX — just change lightness to make darker/lighter versions.
Common Web Colors
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Pure Red | #FF0000 | rgb(255,0,0) | hsl(0,100%,50%) |
| Pure Green | #00FF00 | rgb(0,255,0) | hsl(120,100%,50%) |
| Pure Blue | #0000FF | rgb(0,0,255) | hsl(240,100%,50%) |
| Black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) |
| White | #FFFFFF | rgb(255,255,255) | hsl(0,0%,100%) |
| Gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) |
🎨 Pro tip: Use HSL when you want to create color themes. Pick a hue, then create light/dark variants by adjusting lightness. Much easier than guessing HEX values.