HEX to RGB Converter
Convert colors between HEX, RGB, and HSL.
Use on any page (bookmarklet)
Want HEX to RGB Converter without leaving the page you're on? Drag the button below to your bookmarks bar, then click it on any website to open HEX to RGB Converter right there — it runs entirely in your browser.
Use responsibly: a bookmarklet runs on whatever page you click it on. Avoid sensitive sites such as online banking, payment, or healthcare pages — you run it at your own risk. Everything is processed locally and no data is sent anywhere. See our Terms.
- Show your bookmarks bar if it's hidden — Ctrl+Shift+B (⌘+Shift+B on Mac).
- Drag the button above onto the bookmarks bar.
- Open any website and click the bookmark — the HEX to RGB Converter panel appears in the top-right corner. Use ✛ to move it between corners, or ›/‹ to tuck it against the edge and pull it back out.
- Click the bookmark again (or the ✕) to close it.
Note: a few sites with strict security policies may block bookmarklets.
Examples
HEX to RGB & HSL
Input
#3B82F6
Output
rgb(59, 130, 246) · hsl(217, 91%, 60%)
RGB to HEX
Input
rgb(255, 99, 71)
Output
#FF6347 · hsl(9, 100%, 64%)
About this tool
This free online color converter translates colors between HEX, RGB, and HSL. Type a value in any of the three formats — or use the color picker, or the eyedropper to grab a color from anywhere on your screen (Chrome and Edge) — and the other formats update instantly alongside a live swatch. It accepts shorthand and 8-digit hex, as well as rgb() and hsl() notation. Everything runs in your browser with no upload.
How to use
- Type a HEX, RGB, or HSL color (or pick one with the swatch).
- Read the converted values for all three formats.
- Copy the format you need.
Which format to use
- HEX — compact and universal; the default for copying a fixed brand color into CSS or a design tool.
- RGB — states the red/green/blue channels directly; handy when you need transparency (
rgba). - HSL — best for adjusting a color: change lightness for a darker shade, or saturation for a muted version, without touching the hue.
Common uses
Converting design tokens between formats, matching brand colors in CSS, translating a hex from a mockup into rgb() or hsl(), and building a set of shades by varying HSL lightness. Prefer a named color? Browse all 148 in the CSS named colors reference, and see our guide to color formats for how they relate.
Frequently asked questions
How do I convert HEX to RGB?
Paste a hex color like #3B82F6 and the tool instantly shows the equivalent rgb(59, 130, 246) and hsl values, with a live color swatch.
Does it convert RGB and HSL back to HEX?
Yes. Type any rgb() or hsl() value and you'll get the matching HEX, RGB, and HSL — the conversion works in every direction.
Is this color converter free?
Yes — it's a completely free online HEX, RGB, and HSL converter with no sign-up.
Does it support shorthand and 8-digit hex?
Yes. It accepts 3-digit (#abc), 4-digit, 6-digit, and 8-digit hex codes; any alpha channel is ignored in the RGB/HSL output.
Can I pick a color visually?
Yes. Use the built-in color picker to choose a color, and the HEX, RGB, and HSL values update automatically.
Can I grab a color from an image or anywhere on screen?
Yes, in Chrome and Edge. Click the Eyedropper button (or run the bookmarklet on any page) and your cursor becomes a picker — click any pixel of an image, website, or other window to capture its hex color. The eyedropper isn't available in Firefox or Safari, so the button only appears where it's supported.
Is my data uploaded anywhere?
No. All conversion happens in your browser with no upload.
Learn more
Related tools