Free · instant · formula shown
RGB to HEX Converter
Turn rgb(255, 165, 0) into #ffa500: each channel converts to two hexadecimal digits and the three pairs concatenate. Enter your channels below.
Short answer
To convert RGB to HEX, write each channel (0–255) as a two-digit base-16 number and join them: rgb(255, 165, 0) → ff + a5 + 00 → #ffa500. Channels below 16 need a leading zero (10 → 0a) — dropping it is the classic hand-conversion bug that shifts every color after it. The converter below does all three channels exactly, with a live swatch to confirm.
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
Programmatically it's `(r << 16 | g << 8 | b).toString(16).padStart(6, '0')` — the padStart being the part everyone forgets. If your channels come as floats (0–1) from a design tool or shader, multiply by 255 and round before converting.
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.