Color Converter (HEX, RGB, HSL)
Convert colors between HEX, RGB and HSL with a live swatch.
Files are processed in memory and never stored.
Enter a color in HEX or RGB and instantly see it in HEX, RGB and HSL, alongside a live swatch. Handy for translating a value from a design tool into CSS, or for understanding a color's hue, saturation and lightness.
How to use it
- Open the Color Converter.
- Enter a color like #1466f0 or rgb(20,102,240).
- See the HEX, RGB and HSL equivalents plus a swatch.
- Copy whichever format your code needs.
Three ways to describe the same color
| HEX | A six-digit hex code like #1466f0. Compact and the most common in CSS and design tools. |
|---|---|
| RGB | Red, green and blue from 0–255, e.g. rgb(20,102,240). Intuitive and easy to tweak channel by channel. |
| HSL | Hue, saturation and lightness. The most human-friendly — adjust lightness to make a tint or shade of the same hue. |
When each format is useful
HEX is great for pasting a brand color into CSS. RGB is handy when you need a specific channel value or are working with image data. HSL shines when you want to create variations of a color — nudging lightness up or down gives you a consistent palette of tints and shades without guessing hex values. Converting between them lets you work in whichever model fits the task.
Frequently asked questions
What input formats are accepted?
HEX (#1466f0 or #14f) and RGB (rgb(20,102,240)). The output includes HSL too.
Is my input uploaded?
No — conversion runs entirely in your browser.
What's the benefit of HSL?
It makes creating tints and shades easy — change lightness while keeping the same hue.
Does it support alpha/transparency?
It converts the solid RGB color; alpha isn't included in the output.
Can I paste a 3-digit hex?
Yes — short hex like #14f is expanded automatically.
Is it free?
Yes — free and unlimited.