How to Convert HEX to RGB (and Back) — Free Color Tool
Colors on the web are written in several formats — HEX like #6366f1, RGB like rgb(99,102,241), and HSL like hsl(239,84%,67%) — and they all describe the same color in different ways. Designers and developers constantly need to convert between them. This guide explains what each format means, when to use which, and how to convert HEX to RGB (and HSL) instantly with a live picker.
🎨 Try the Color Converter (HEX RGB HSL) now — freeOpen →Different tools and situations call for different color formats. A design file might give you HEX, but you need RGB with an alpha channel for a semi-transparent overlay, or HSL to nudge a color's lightness for a hover state. Converting between them by hand is fiddly; a converter makes it instant and exact.
HEX, RGB and HSL — what each means
HEX is a six-digit code (#RRGGBB) where each pair is the red, green and blue amount in hexadecimal (00–FF). It's compact and the most common format in CSS and design tools. RGB expresses the same three channels as numbers from 0–255, and adds an easy alpha channel (RGBA) for transparency.
HSL describes color as Hue (the color wheel angle, 0–360°), Saturation (how vivid, 0–100%) and Lightness (how bright, 0–100%). Its superpower is intuitive tweaking: to make a color darker you just lower the lightness, without recalculating three separate channels.
Which format to use when
- HEX — general use in CSS and design handoffs; compact and universal.
- RGB / RGBA — when you need transparency (the alpha channel).
- HSL / HSLA — when you want to adjust shade, tint or vividness intuitively.
- Any — modern CSS accepts all three, so pick what's easiest to edit.
Step-by-step
Common mistakes to avoid
Pro tips
Frequently asked questions
What's the difference between HEX and RGB?
They describe the same red-green-blue color — HEX in hexadecimal (#RRGGBB), RGB as numbers 0–255. RGB also easily adds transparency via RGBA.
When should I use HSL?
When you want to adjust a color intuitively — lower the lightness for a darker shade, or the saturation for a muted version.
Is it free?
Yes — free with no sign-up, with a live color picker, all in your browser.
Can I add transparency?
Yes — use RGBA or HSLA, which add an alpha channel. Plain HEX doesn't carry transparency (though 8-digit HEX can).
Do modern browsers support all three?
Yes — CSS accepts HEX, RGB/RGBA and HSL/HSLA, so use whichever is easiest to work with.
HEX, RGB and HSL are three ways of writing the same color, each handy in different situations. A converter with a live picker lets you move between them instantly — grab HEX for handoff, RGBA for transparency, HSL for tweaking shades. Free and private in your browser.