Hex to RGB Converter
Convert colors between HEX, RGB and HSL — live
This Hex to RGB converter translates any color between the two formats the web runs on — type a hex code like #ff6b35 and get its RGB values instantly, or paste RGB numbers and get the hex code back. A live swatch shows the color as you type, and the HSL equivalent comes free, ready to paste into CSS.
A hex color is three pairs of hexadecimal digits — #RRGGBB — where each pair encodes red, green, or blue from 00 (0) to ff (255). So #ff6b35 literally means red 255, green 107, blue 53. The two notations describe the exact same 16.7 million colors; hex is just base-16 shorthand for the same three numbers.
Which format should you use?
- HEX — the most compact and the default in design tools, brand guides, and most CSS.
- RGB — needed when code manipulates channels, and for transparency via
rgba(255, 107, 53, 0.5). - HSL — hue, saturation, lightness. The most human-friendly for adjustments: want it darker? Lower the lightness number, done.
Shorthand hex works too — #f60 expands to #ff6600. And if you're checking whether your colors are readable on top of each other, pair this with our color contrast checker.
Example
Your designer sends #5c3bef and your code needs RGB:
Paste it in the HEX field → rgb(92, 59, 239) appears instantly, along with hsl(251, 85%, 58%) — click any row to copy it in CSS-ready syntax.
Frequently Asked Questions
How do I convert hex to RGB?
Split the hex code into three pairs and convert each pair from base-16 to decimal: #ff6b35 → ff=255, 6b=107, 35=53 → rgb(255, 107, 53). Each pair is (first digit × 16) + second digit, where a–f count as 10–15. Or paste the code above and skip the math.
How do I convert RGB to hex?
Convert each of the three values (0–255) to two hexadecimal digits and join them: rgb(92, 59, 239) → 92=5c, 59=3b, 239=ef → #5c3bef. Values below 16 get a leading zero — rgb(0, 8, 255) is #0008ff.
What do the letters in a hex color mean?
Hex is base-16, so counting goes 0–9 then a–f, where a=10 and f=15. Two digits cover 0–255: ff is 15×16+15 = 255 (full intensity), 80 is 128 (half), 00 is zero. #ffffff is all channels maxed — white.
Are hex and RGB the same color?
Yes — they're two notations for identical values. #ff6b35 and rgb(255, 107, 53) render pixel-for-pixel the same. Hex is base-16 shorthand; RGB is the same three numbers in decimal. Converting between them never changes the color.
What is a 3-digit hex code like #f60?
CSS shorthand: each digit is doubled, so #f60 expands to #ff6600 and #abc to #aabbcc. It only works when both digits of every pair match, which is why you can't shorten #ff6b35. This converter accepts both forms.
How do I add transparency to a hex color?
Two ways: 8-digit hex appends an alpha pair (#ff6b3580 is 50% opaque), or convert to RGB and use rgba(255, 107, 53, 0.5). The rgba form is more readable and better supported in older browsers — grab the RGB values from the converter and wrap them in rgba().
What is HSL and when is it better than hex?
HSL describes a color by hue (0–360° on the color wheel), saturation, and lightness. It's far easier to adjust by hand: making #5c3bef 10% darker in hex requires math, but in HSL you just lower the lightness number. Modern CSS supports hsl() everywhere hex works.
How many colors can hex codes represent?
256 × 256 × 256 = 16,777,216 colors — every combination of the three channels. That's the standard 24-bit 'true color' space screens use. Human eyes distinguish roughly 10 million colors, so hex covers everything you can perceive on a display.
Why does my hex color look different on another screen?
The code is exact but displays aren't: panel type, color profile, brightness, and OS-level settings (like Night Shift) all shift rendering. For brand-critical color, hex guarantees the same instruction to every screen — not the same photons from every screen.
What's the difference between #000000 and #ffffff?
#000000 is black — all three channels at zero, no light emitted. #ffffff is white — all channels at 255, full intensity. Grays sit between with equal channels, like #808080. Whenever R=G=B, the color has zero saturation.
Is my color data uploaded anywhere?
No — parsing and conversion run entirely in your browser with a few lines of JavaScript. Nothing is transmitted or stored, and the page works offline once loaded.
How do I pick an accessible color combination?
Contrast matters more than the individual colors: WCAG requires a 4.5:1 contrast ratio between text and background for normal text. Convert your colors here, then test the pair in our color contrast checker to see if they pass AA and AAA.