HEX and RGB are the same three numbers
A HEX code stores three bytes in base 16. #2563eb means red 0x25, green 0x63 and blue 0xeb, which is 37, 99 and 235 in decimal. Converting is a multiplication and an addition per channel, so nothing is lost in the round trip: HEX to RGB to HEX always returns the original code.
The three-digit shorthand duplicates each digit, so #29e is #2299ee. Codes with four or eight digits carry transparency in the final byte, where 0xcc means 80 percent opacity.
When to use HSL instead
Use RGB when you are matching a value from a design file or an image picker. Use HSL when you are deriving new colors, because hue, saturation and lightness map onto the decisions you actually make: rotate the hue for a secondary color, drop the lightness for a hover state.
One caveat: HSL lightness is not perceived lightness. Yellow at 50 percent lightness looks far brighter than blue at 50 percent, which is why a palette built only on equal HSL lightness can still look uneven.
| Name | HEX | RGB | HSL |
|---|---|---|---|
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Near black | #111827 | rgb(17, 24, 39) | hsl(221, 39%, 11%) |
| Brand blue | #2563eb | rgb(37, 99, 235) | hsl(221, 83%, 53%) |
| Emerald | #10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| Amber | #f59e0b | rgb(245, 158, 11) | hsl(38, 92%, 50%) |
Frequently asked questions
Does HEX support transparency?
Yes, as an eight-digit code. The last two digits are the alpha channel, where ff is opaque and 00 is fully transparent. #2563eb80 is the brand blue at 50 percent opacity.
Why do my RGB values differ slightly from the design file?
Design tools store colors in wider gamuts than sRGB. When a color sits outside sRGB, the exported HEX is the nearest in-gamut approximation, so the RGB round trip will not match the original.
More free tools
Related guides
Related searches
hex to rgbrgb to hexhex color converterhsl convertercss color