Number tool
Color Converter
Convert between HEX (`#ff0000`), RGB (`255, 0, 0`) and HSL (`0°, 100%, 50%`) color codes. Useful for web design, CSS, brand-asset matching and graphic-design tools.
How the conversion works
HEX is base-16 RGB: `#RRGGBB` where each pair encodes 0–255. HSL: H = hue angle (0–360°), S = saturation (0–100%), L = lightness (0–100%). Conversion between HSL and RGB uses a standard algorithm with chroma + hue sector lookup.
When you'll use this converter
- CSS / Tailwind / Figma color matching
- Brand-asset color verification
- Accessibility contrast checking
- Designer ↔ developer hand-off
Frequently asked
Why does HSL exist when we already have RGB?
HSL maps to how humans perceive color. Adjusting lightness or saturation in HSL gives natural-looking variations; doing the same in RGB requires changing all three channels at once.
What's the difference between HSL and HSV?
Subtle. HSL's lightness goes 0%=black → 50%=full color → 100%=white. HSV's value goes 0%=black → 100%=full color (no white path). HSL is the CSS standard.