HEX ↔ RGB ↔ HSL Color Converter
Type or paste a color in any format — #ff6600, rgb(255, 102, 0) or hsl(24, 100%, 50%) — and get all three formats instantly, ready to copy. A color picker, tints and shades, and the closest CSS color name are included.
🔒 100% private — files never leave your browser
Tints (lighter)
Shades (darker)
Click any block to load it back into the converter.
How to use the Color Converter
- 1 Pick a color, or paste any HEX / RGB / HSL value into the text box.
- 2 Copy the format you need — HEX, RGB and HSL are always in sync.
- 3 Use the tints and shades rows for quick lighter/darker variations.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
HEX (#ff6600) and RGB (rgb(255, 102, 0)) describe the same red-green-blue mix; HEX is just a compact notation. HSL (hsl(24, 100%, 50%)) describes hue, saturation and lightness instead — much easier for humans to tweak.
Does it accept shorthand and mixed formats?
Yes — #f60 shorthand, 6-digit HEX, rgb()/rgba() with commas or spaces, and hsl()/hsla() are all parsed. The parsed color is previewed live so you can see exactly what you got.
Are the values clipped to valid ranges?
Yes. RGB channels are clamped to 0–255, HSL to 0–360 / 0–100% / 0–100%, so a stray value never silently breaks your CSS.