Color Converter
Convert colors between HEX, RGB, and HSL.
#4f46e5rgb(79, 70, 229)hsl(243, 75%, 59%)About Color Converter
Convert colors between HEX, RGB, and HSL online for free, with a live preview so you can see exactly what you're working with. Designers and developers constantly need to move between formats - HEX for CSS and design tools, RGB for canvas and image work, and HSL for intuitively adjusting hue, saturation, and lightness - and this converter shows all three at once and lets you copy any of them with one click. Shorthand HEX codes like #f80 are expanded automatically. Pick a color with the built-in color picker or type a code, and every format updates instantly.
How to use this tool
- 1Pick a color or type a HEX code.
- 2All formats (HEX, RGB, HSL) update live.
- 3Copy whichever format you need.
Color format cheat sheet
The same color can be written many ways. Here's pure red in every common CSS format, so you can see how the notations relate.
| Format | Value | Best for |
|---|---|---|
| HEX | #ff0000 | Compact, universal, copy-paste |
| RGB | rgb(255, 0, 0) | Programmatic manipulation of channels |
| HSL | hsl(0, 100%, 50%) | Human-friendly tweaks (lighten, desaturate) |
| HWB | hwb(0 0% 0%) | Mixing whiteness/blackness intuitively |
| OKLCH | oklch(0.628 0.258 29.2) | Perceptually uniform palettes (modern CSS) |
Practical tip: use HSL or OKLCH when designing - 'make it 10% lighter' is one number in HSL (the L), but requires recalculating all three channels in RGB. OKLCH additionally keeps perceived brightness consistent across hues, which is why modern design systems are adopting it.
Frequently asked questions
What's the difference between RGB and HSL?
RGB mixes red, green, and blue light; HSL describes hue, saturation, and lightness, which is often more intuitive for adjusting shades.
Are 3-digit HEX codes supported?
Yes. Shorthand like #f80 is expanded to #ff8800 automatically.