HEX to RGB Converter
Convert web colors between HEX, RGB and HSL. Enter a color in any of the three formats — you'll get the other two, plus a live swatch so you can see exactly what you're working with.
How to use this calculator
- Enter a color as HEX (#3B82F6 or #39f), RGB (59, 130, 246) or hsl.
- Press Convert to get all formats plus a live swatch.
- The luminance row tells you whether light or dark text sits better on the color.
Formula used
A HEX color is three bytes: two hex digits each for red, green and blue, every pair converting to 0–255. Shorthand like #39f expands by doubling each digit (#3399ff). HSL is derived geometrically from the RGB values.
Example calculation
#3B82F6 splits into 3B, 82, F6 → rgb(59, 130, 246) — a blue. In hex, 3B = 3×16 + 11 = 59, and F6 = 15×16 + 6 = 246.
As HSL that's hsl(217, 91%, 60%) — hue 217° (blue), highly saturated, medium-light.
Three ways to name the same color
HEX and RGB are the same data in different clothing — HEX is just RGB written in base 16, compact for CSS and design tools. HSL rearranges those numbers into hue, saturation and lightness, which humans reason about far more naturally: to make a color darker you drop the L, to mute it you drop the S, without touching three interdependent channels.
Luminance is the practical payoff. The weighted brightness (green counts most, blue least, matching human vision) predicts contrast — which is why the same conversion math underlies accessibility checks for readable text.
Why use this calculator?
- Move between HEX, RGB and HSL without three separate lookups.
- Grab a ready rgba() string for CSS opacity.
- See luminance to pick readable text color over any background.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and convert each from base 16. For #FF5733: FF = 255, 57 = 87, 33 = 51 → rgb(255, 87, 51). Each hex digit is worth its value × 16 (first digit) plus its value (second).
What does the # and shorthand like #f00 mean?
The # marks a hex color in CSS. Three-digit shorthand doubles each digit: #f00 = #ff0000 (pure red), #39f = #3399ff. It only works when each channel's two digits are identical.
When should I use HSL instead of HEX?
HSL shines for programmatic color adjustment — generating hover states (nudge lightness), color scales, or theme variations — because you change one intuitive dimension at a time. HEX is fine for fixed brand colors.