Color Converter (HEX ↔ RGB)
Convert HEX to RGB and back, with live preview.
HEX (#4f46e5) and RGB (79, 70, 229) are two notations for the same color — HEX is compact for CSS, RGB is explicit for design tools.
How to use
- Type a HEX code or RGB values — the other updates live.
- See the color preview instantly.
- Click "Random color" for inspiration, "Copy HEX" to grab it.
About this tool
Designers constantly convert between them when moving colors from mockups to code.
Conversion happens instantly in your browser.
How it works
In #RRGGBB, each pair of hex digits is one color channel: #FF5733 means red = FF (255), green = 57 (87), blue = 33 (51). Converting HEX to RGB is just base-16 to base-10, done three times — and back again is base-10 to base-16, padded to two digits.
HSL is a third view built for humans: hue (0–360°, position on the color wheel), saturation (0–100%, gray to vivid), lightness (0–100%, black to white). Designers reach for HSL because 'make it a little darker' is simply lowering the lightness number, while in RGB the same tweak means recalculating all three channels.
The numbers are exact — #FF5733 is always rgb(255, 87, 51) on every screen — but the live preview still helps, because the same values render slightly differently across displays.
Worked examples
From design tool to CSS: Figma hands you #3B82F6. Convert it to rgb(59, 130, 246) for a box-shadow, or to hsl(217, 91%, 60%) when you want hover states — just raise the lightness for a lighter variant.
Checking text contrast: White text (#FFFFFF) on a #FF5733 button: convert both to RGB, compute relative luminance, and you can verify the WCAG contrast ratio before the design ships.
Quick reference
| Format | Example | Best for |
|---|---|---|
| HEX | #FF5733 | CSS values, design tools |
| RGB | rgb(255, 87, 51) | CSS functions, canvas code |
| HSL | hsl(11, 100%, 60%) | Tweaking lightness and saturation |
Frequently asked questions
What is the difference between HEX and RGB?
None in meaning — #FF0000 and rgb(255,0,0) are the same red. HEX is shorter; RGB is more readable.
Why do I see 3 or 6 digit HEX codes?
#F00 is shorthand for #FF0000 — each digit is doubled. This tool uses the full 6-digit form.
Is anything uploaded?
No — everything runs locally.
More free tools
UUID Generator
Generate random v4 UUIDs in bulk.
Base64 Encode / Decode
Encode text to Base64 or decode it back.
JSON Formatter & Validator
Format, minify and validate JSON in one click.
What Is My IP
See your public IP address instantly. No sign-up, nothing stored.
URL Encoder / Decoder
Encode or decode URLs and query strings.
Unix Timestamp Converter
Convert timestamps to dates and back.