Color Converter
HEX ↔ RGB ↔ HSL with a live preview.
Runs entirely in your browser — nothing you enter is uploaded or sent to a server.
HSL is shown in whole degrees and percentages, so converting back can land a shade off — the HEX and RGB values are the exact ones to rely on. Read our full disclaimer.
About this tool
Designers and developers juggle colour in three notations: HEX (#2dd4bf), RGB (rgb(45, 212, 191)), and HSL (hsl(174, 65%, 50%)). This tool parses any of them and shows the other two, with a live preview swatch so you can see exactly what you're working with. Use the native colour picker to dial in a shade, or paste a value straight from your CSS — it accepts 3-, 4-, 6-, and 8-digit HEX and the rgb()/rgba() and hsl()/hsla() forms, and copies any format in one click.
Try it
#2dd4bf is rgb(45, 212, 191) and hsl(174, 65%, 50%). Paste any one and the tool fills in the rest.
How to use
- 1Type or paste a color in HEX, rgb(), or hsl() — or use the color picker.
- 2See the live preview swatch update instantly.
- 3Read the equivalent HEX, RGB, and HSL values.
- 4Copy any format with one click.
Features
- Parses HEX (3/4/6/8-digit), rgb()/rgba(), and hsl()/hsla().
- Live preview swatch plus a native colour picker.
- One-click copy for each format.
Frequently asked questions
How do I convert HEX to RGB (and back)?
Paste a HEX value like #2dd4bf and the RGB — rgb(45, 212, 191) — appears beside it, and vice versa. Each pair of HEX digits is one 0–255 channel: 2d is 45, d4 is 212, bf is 191.
What's the difference between RGB and HSL?
RGB mixes red, green, and blue channels; HSL describes a colour as hue (0–360° on the colour wheel), saturation, and lightness. HSL is often easier for tweaking a shade — nudge the lightness to make it darker without changing the hue.
Why does the HSL sometimes round-trip a shade off?
HSL is shown as whole degrees and percentages, so converting back to RGB can differ by a unit or two. The HEX and RGB values are the exact ones to rely on.
What are 4- and 8-digit HEX codes?
They add an alpha (transparency) channel: 8-digit HEX is #RRGGBBAA and 4-digit is its shorthand #RGBA. This tool reads them, but the RGB/HSL output focuses on the solid colour.
Does it support alpha / transparency?
It accepts 4- and 8-digit HEX and rgba()/hsla() input, but the conversions focus on the solid colour (alpha is ignored in the output).
More developer tools
View allJSON Formatter
Paste raw JSON and get it neatly indented, minified, or validated — entirely in your browser, with a clear error message pointing to anything invalid.
Open toolBase64 Encoder / Decoder
Encode any text to Base64 or decode it back, instantly and locally — with full Unicode and emoji support, and nothing ever leaving your browser.
Open toolText Diff
Compare two blocks of text line by line and see exactly what was added, removed, or left unchanged — a quick side-by-side diff that runs in your browser.
Open tool