HEX to RGB: Convert Colors Between Formats Instantly
Every design tool speaks a different dialect of the same language. Your CSS wants HEX, the game engine's shader wants RGB channels, and modern CSS color functions love HSL. Converting between them by hand means hexadecimal math nobody should do before coffee. Here's how to convert instantly, and — more usefully — when each format actually matters.
The Three Formats, Translated
All three describe the same thing: how much red, green, and blue light makes a color.
- HEX —
#3A7BD5. Six hexadecimal digits: two each for red, green, blue (00-FF = 0-255). Compact, clipboard-friendly, the default of the web. - RGB —
rgb(58, 123, 213). The same three channels as plain decimal numbers. Required by most game engines, Unity/Unreal material editors, and CSS functions like rgba(). - HSL —
hsl(215, 64%, 53%). Hue (0-360° on the color wheel), saturation, and lightness. The same color described the way humans think about it.
Converting in Seconds
Open the color format converter and type into any field — HEX, the R/G/B channels, or the H/S/L values. Everything else updates live, with a big preview swatch so you can confirm you're converting the right color. Click the RGB or HSL field to copy that value straight to your clipboard.
A real example: Discord's brand "blurple" is #5865F2. Type it in and you instantly get rgb(88, 101, 242) for your Unity UI and hsl(235, 86%, 65%) for a CSS gradient. One paste, every format.
When HSL Beats HEX (Seriously)
HEX is great for copying a color, terrible for adjusting one. Try making "#3A7BD5" 10% darker in your head. Now try it in HSL: hue 215, saturation 64%, lightness 53% → just lower the L to 43%. Done. This is why design systems and modern CSS increasingly define colors in HSL: hover states, dark-mode variants, and muted backgrounds become arithmetic instead of guesswork.
A practical workflow: extract a color from a screenshot with the palette extractor (which copies HEX), convert it here to HSL, then build your lighter/darker variants by nudging the L value.
Common Conversion Questions
What about transparency? Alpha lives outside these three formats. Once you have the RGB values, write CSS as rgba(88, 101, 242, 0.5) with your opacity as the fourth number. HEX8 (#5865F280) exists too, with the last two digits as alpha.
Why do my converted colors look identical? Because they are — HEX #FF0000, rgb(255, 0, 0), and hsl(0, 100%, 50%) are the exact same red. You're switching notation, not color.
Is anything uploaded? No. Conversion is pure math, done locally in your browser.
Reading HEX by Eye
Once you know HEX is just three channels, you can roughly read it: #FF0000 is pure red (red channel maxed), #000000 is black, #FFFFFF is white, and values with three similar pairs (like #7A7A7A) are grays. High first pair with low others? Warm color. Balanced high values? Something light. It's a small superpower for scanning stylesheets.
Quick Reference Cheat Sheet
- White: #FFFFFF · rgb(255,255,255) · hsl(0,0%,100%)
- Black: #000000 · rgb(0,0,0) · hsl(0,0%,0%)
- Discord blurple: #5865F2 · rgb(88,101,242) · hsl(235,86%,65%)
- Steam dark: #1B2838 · rgb(27,40,56) · hsl(210,35%,16%)