Colors on the web are represented in multiple formats — HEX, RGB, HSL, and HSV. They all describe the same colors but in different ways. Knowing when to use each makes your CSS more readable and your design workflow faster.
HEX — The web standard
color: #FF6B35;HEX (hexadecimal) uses a 6-character code preceded by #. Each pair of characters represents red, green, and blue values from 00 to FF (0-255).
#FF0000— Pure red#00FF00— Pure green#000000— Black#FFFFFF— White
Shorthand: When pairs repeat, you can shorten: #FFAA33 → #FA3
With alpha: 8-character hex adds transparency: #FF6B3580 (50% opacity)
Best for: CSS, design specs, copying colors between tools.
RGB — The color model
color: rgb(255, 107, 53);RGB specifies red, green, and blue channels directly as numbers from 0-255.
rgb(255, 0, 0)— Pure redrgb(0, 0, 0)— Blackrgb(255, 255, 255)— White
With alpha: rgba(255, 107, 53, 0.5) or rgb(255 107 53 / 50%)
Best for: When you need to programmatically adjust individual color channels.
HSL — Human-friendly
color: hsl(20, 100%, 60%);HSL stands for Hue, Saturation, Lightness:
- Hue (0-360): The color wheel position. 0=red, 120=green, 240=blue
- Saturation (0-100%): How vivid the color is. 0%=gray, 100%=full color
- Lightness (0-100%): How bright. 0%=black, 50%=normal, 100%=white
Why HSL is great for designers:
- Want a darker shade? Lower the lightness
- Want a muted version? Lower the saturation
- Want a complementary color? Add 180 to the hue
This is much more intuitive than guessing RGB values.
With alpha: hsla(20, 100%, 60%, 0.5) or hsl(20 100% 60% / 50%)
HSV/HSB — For design tools
HSV (Hue, Saturation, Value) is similar to HSL but used in design software like Photoshop and Figma:
- Hue (0-360): Same as HSL
- Saturation (0-100%): Color purity
- Value/Brightness (0-100%): 0%=black, 100%=brightest
The key difference: HSL’s lightness puts white at 100%, while HSV’s value puts the pure color at 100%.
Quick conversion reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orange | #FF6B35 | rgb(255, 107, 53) | hsl(16, 100%, 60%) |
| Blue | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Gray | #6B7280 | rgb(107, 114, 128) | hsl(220, 9%, 46%) |
When to use which
- HEX: Quick color references, sharing colors, CSS variables
- RGB: Programmatic color manipulation, canvas drawing
- HSL: Creating color palettes, adjusting shades/tints, theming
- HSV: Interfacing with design tools
A color picker tool lets you convert between all formats instantly — pick a color visually or paste a value in any format, and get all the other representations.