This hex to RGB converter translates color codes between hex, RGB and HSL — with a live preview swatch, because numbers are easier to trust when you can see them.
| Hex | – |
| RGB | – |
| CSS rgb() | – |
| HSL | – |
Three Languages for the Same Color
Hex is base-16 shorthand for three bytes: RR-GG-BB. Designers think in hex, CSS accepts everything, and screens emit RGB — this converter keeps the dialects straight, with HSL (hue, saturation, lightness) for humans who think in “darker” and “more vivid.” Part of our Other Calculators collection.
Worked Example (Verified)
- #F43676 (this site's own accent pink): F4 = 244, 36 = 54, 76 = 118 → rgb(244, 54, 118), HSL ≈ hsl(340, 90%, 58%)
- Three-digit shorthand expands by doubling: #F47 → #FF4477 (each digit repeats — it is compression, not rounding)
- Pure anchors: #FF0000 = rgb(255,0,0); #000 = black; #FFF = white; #808080 is the famous mid-gray that is perceptually nowhere near “half” — screens are not linear
- The reverse trip is lossless: RGB integers ↔ hex pairs are the same bytes in different bases, forever
Color-Code Craft
- Alpha lives in extra digits: #RRGGBBAA (or rgba()) — F43676 at 50% opacity ≈ #F4367680.
- HSL is the adjustment-friendly form: keep hue, slide lightness for tints/shades that actually match.
- Contrast is computed from RGB luminance (WCAG) — check text/background pairs before shipping; pink on white is a brand choice with accessibility math attached.
- Print is CMYK's country; screen hex values will shift on paper — proof brand colors physically.
Related Tools
- URL Encoder — the other %-and-hex dialect (note: # in a URL starts a fragment — encode it as %23 inside data)
- Binary Converter — bases 2, 8, 10, 16 for numbers
- Other Calculators — the full collection
Frequently Asked Questions
How do I convert hex to RGB?
Split the hex into three pairs and read each as base-16: #F43676 → F4=244, 36=54, 76=118 → rgb(244, 54, 118). This converter also returns the CSS rgb() syntax and the HSL equivalent, with a preview swatch.
What does #FFF mean?
Three-digit shorthand: each digit doubles — #FFF = #FFFFFF (white), #F47 = #FF4477. It exists for colors whose pairs happen to be doubled digits; most brand colors (like #F43676) need the full six.
What is HSL and when is it better than RGB?
Hue (0–360° around the color wheel), Saturation and Lightness (%). HSL wins for adjustments — “same color, 20% darker” is one slider — while RGB/hex wins for specifying exact screen values. The converter shows all three so you can work in whichever your task speaks.
How do I add transparency to a hex color?
Append an alpha pair: #RRGGBBAA, where AA runs 00 (invisible) to FF (solid) — 50% ≈ 80. In CSS, rgba(244, 54, 118, 0.5) says the same thing decimally. Support for 8-digit hex is universal in modern browsers.
Why do the same colors look different on paper?
Screens add light (RGB); print subtracts it (CMYK inks) from a smaller gamut — vivid screen pinks and greens are famously unprintable exactly. Convert brand colors through a CMYK proof before committing to print runs.
Is this hex to RGB converter free?
Yes — free, instant, no sign-up.