Color Converter
Last updated: June 12, 2026HEX, RGB and HSL — instantly.
Color Converter is a free online tool to hEX, RGB and HSL — instantly. It runs entirely in your browser, so your files never leave your device — nothing is uploaded. There's no sign-up, no watermark, and it works on any modern browser on desktop or mobile.
How to use Color Converter
The Color Converter converts a color between HEX, RGB and HSL with a live preview and a color picker, and lets you copy any format with one click. Free and runs entirely in your browser.
Read the full guide: How to Convert Color Codes: HEX, RGB, HSL (Free)
- 1Pick a color or type a HEX value.
- 2See the RGB and HSL equivalents update live.
- 3Copy the format you need.
HEX, RGB & HSL
Get every common web color format from one input.
Live preview
A swatch and color picker make it easy to dial in the exact color.
One-click copy
Copy any format straight into your CSS.
Convert HEX to rgb() for CSS opacity
A HEX code like #3b82f6 can't carry transparency, so when you need a semi-transparent fill or shadow you have to know its red, green and blue values first. Paste the HEX here, copy the rgb(59, 130, 246) triplet, and drop those three numbers into an rgba(...) or modern rgb(... / 50%) rule to fade the exact same color.
Build hover and shade variants with HSL
HSL splits a color into hue, saturation and lightness, which makes deriving a palette from one brand color easy. Convert your HEX to its hsl() value here, then nudge the lightness up for a subtle background tint or down for a darker hover or active state, keeping the hue locked so every shade stays on-brand and consistent.
Get RGB from a brand HEX for design tools
Brand guidelines and web CSS usually list colors as HEX, but Figma fields, native app code and print specs often want separate R, G and B numbers. Type the brand HEX into the picker, read off the RGB values, and copy them straight into a design swatch, an Android or Flutter color, or a spec sheet without doing the base-16 math yourself.
Color Converter — frequently asked questions
How do I convert HEX to RGB?
Enter the HEX value (e.g. #3b82f6) and the RGB and HSL equivalents appear instantly, each with a copy button.
Does it support 3-digit hex?
Yes — shorthand like #39f is expanded automatically.
What's HSL good for?
HSL (hue, saturation, lightness) makes it intuitive to create lighter/darker or more/less saturated variants of a color.
Is it free?
Yes, completely free.
Share this tool
Send it to someone who needs it or save the link for later.