RGB ↔ HSL Color Converter
Convert between RGB and HSL color values instantly. Live color preview updates as you type.
⇄
Tip: HSL = Hue (color wheel °), Saturation (vibrancy %), Lightness (brightness %).
💡 Definition
RGB & HSL Color Models
- RGB defines color by mixing Red, Green, and Blue light (0–255 each).
- HSL describes color by Hue (0–360°), Saturation (0–100%), and Lightness (0–100%).
- HSL is more intuitive for designers since it maps to how humans perceive color.
📖 How to use
Step by Step
- Enter R, G, B values on the left
- Or enter H, S, L values on the right
- Both sides and the preview update instantly
- Copy CSS-ready rgb() or hsl() values
🎯 Use cases
When to use
- Creating color palettes with consistent lightness
- Adjusting color vibrancy without shifting hue
- CSS animations using HSL transitions
- Accessible contrast ratio calculations
Frequently Asked Questions
When should I use HSL over RGB?▾
HSL is better when you want to adjust brightness or saturation without changing the base color. For example, creating hover states by slightly adjusting lightness is trivial in HSL.
What does Hue 0 vs 360 mean?▾
Both represent red — the hue is a circular color wheel. 0°/360° = red, 120° = green, 240° = blue.