Free · instant · formula shown
HEX to RGB Converter
A HEX code is just three RGB channels written in base-16. Paste one below for the exact RGB values — and learn to read the pairs at a glance.
Short answer
A HEX color is three pairs of hexadecimal digits — #RRGGBB — one pair per channel: #ff8000 means red ff (255), green 80 (128), blue 00 (0), so rgb(255, 128, 0). Each pair runs 00–ff (0–255). Shorthand #f80 doubles each digit to #ff8800. The by-eye trick: 00 is off, 80 is about half, ff is full — so you can estimate any HEX color's mix before converting it exactly below.
Preview
- HEX
- #ff8000
- RGB
- rgb(255, 128, 0)
- HSL
- hsl(30, 100%, 50%)
All three are valid CSS — same color, different notation.
About the conversion
HEX and RGB are the same color model in different clothes — no color changes in this conversion, just notation. That's why it's lossless in both directions, unlike conversions into narrower spaces. In CSS they're fully interchangeable; HEX is just the more compact habit.
Common colors in HEX, RGB and HSL
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Pink | #ffc0cb | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
All values computed with the same conversions the tool uses.
How we calculate this
Three notations, two genuinely different models:
- HEX ↔ RGB. pure notation: each RGB channel (0–255) is two hexadecimal digits, #RRGGBB. Lossless in both directions — no color changes.
- RGB ↔ HSL. a real remapping: hue is the angle around the color wheel (0–360°), saturation the distance from gray, lightness the distance from black/white — the standard CSS algorithm, rounded to whole units for display.
- Which to use. HEX for compactness, RGB when code manipulates channels, HSL when humans reason about color — 'same hue, lighter' is one HSL number but three coupled RGB ones.
Assumptions
- All values are sRGB, the web's default color space — wide-gamut spaces (Display-P3) are out of scope.
- HSL round-trips can drift by ±1 per channel from display rounding; the underlying math is exact.
- Alpha (transparency) is orthogonal to these conversions — append it as the fourth value in any of the three notations.
Last reviewed: July 29, 2026
Frequently asked questions
How do I convert HEX to RGB?+
Split the six digits into three pairs and read each pair as a base-16 number: #ff8000 → ff|80|00 → rgb(255, 128, 0). Three-digit shorthand doubles each digit first (#f80 = #ff8800). It's pure notation — the color itself doesn't change, which is why the conversion is exact in both directions.
What is HSL and when should I use it?+
Hue (0–360° around the color wheel), Saturation (0% gray to 100% vivid), Lightness (0% black to 100% white). Use it whenever you're thinking like a human: making a color 'lighter', building tints and shades of a brand color, or generating palettes — each of those is a single HSL number, versus three coupled channels in RGB. CSS supports hsl() everywhere.
Are HEX, RGB and HSL the same color?+
Yes — all three describe points in the same sRGB space, so #ff8000, rgb(255, 128, 0) and hsl(30, 100%, 50%) render identically in CSS. HEX/RGB are literally the same numbers in different bases; HSL is a geometric remapping of them. The only caveat is rounding: whole-number HSL can be off by about one RGB step when converted back.
How do I make a color lighter or darker correctly?+
Convert to HSL, change only the lightness, convert back. Adding white/black in RGB (or worse, scaling channels) drifts the hue — orange fades toward brown. Our per-color pages show this: each shade table holds hue and saturation fixed and steps lightness, keeping every variant recognizably the same color.
What about CMYK?+
CMYK is for ink, not screens: it's a subtractive model whose real output depends on printer, paper, and profile, so any formula-based CMYK value is an approximation. For web work you never need it; for print, do the conversion inside your design tool with the actual output profile rather than a generic formula.
Does this tool upload my colors or track what I pick?+
No — the conversions are a few lines of math running entirely in your browser. Nothing you type or pick is transmitted anywhere. That's also why it works offline once the page has loaded.
Also try the Color Converter.