Hex to RGB Converter
Convert hex colour codes to RGB and RGB to hex instantly. Live preview, HSL output, and CSS code snippets.
Click the colour square to pick any colour, or use the panels above to enter codes manually.
Recent Colours
How Hex and RGB Colour Codes Work
Hex and RGB are two formats for describing the same colour. A hex code like #FF5733 contains three pairs of hexadecimal digits: FF (red = 255), 57 (green = 87), and 33 (blue = 51). RGB uses these same values in decimal: rgb(255, 87, 51). Screens create colours by mixing red, green, and blue light at different intensities (0-255 per channel). This converter translates between hex, RGB, and HSL formats instantly, with live preview and ready-to-paste CSS code.
How to Convert Hex to RGB Manually
A hex colour code has 6 characters after the # symbol. Split them into three pairs: the first two digits are red, the middle two are green, and the last two are blue. Convert each pair from hexadecimal (base 16) to decimal (base 10). For example, #1A8FE3: 1A = 26 red, 8F = 143 green, E3 = 227 blue. In hex, digits go 0-9 then A=10, B=11, C=12, D=13, E=14, F=15. The first digit is multiplied by 16, then add the second digit.
How to Convert RGB to Hex Manually
Take each RGB value (0-255) and convert it to a two-digit hexadecimal number. Divide the value by 16 — the quotient is the first digit, the remainder is the second. For example, 87: 87 ÷ 16 = 5 remainder 7, so 87 = 57 in hex. Values under 16 need a leading zero: 10 in decimal = 0A in hex. Combine all three pairs with a # prefix.
Common Colour Codes Reference
Hex vs RGB vs HSL — When to Use Each
- HEX (#FF5733): Most common in CSS stylesheets. Compact, widely supported, easy to copy-paste. Use for static colour definitions.
- RGB (rgb(255, 87, 51)): Useful when you need to calculate colours programmatically or when using rgba() for transparency.
- HSL (hsl(11, 100%, 60%)): Most intuitive for humans. Easy to create colour variations by adjusting saturation and lightness while keeping hue constant. Increasingly popular in modern CSS.
Transparency with RGBA and 8-Digit Hex
To add transparency, use rgba() with a fourth value between 0 (fully transparent) and 1 (fully opaque): rgba(255, 87, 51, 0.5) is 50% transparent. In hex, you can add two more digits for alpha: #FF573380 is the same 50% transparency (80 hex = 128 decimal = ~50%). Browser support for 8-digit hex is universal in modern browsers.
Hexadecimal Number System
Hexadecimal is base-16, using digits 0-9 and letters A-F. Each hex digit represents 4 bits of data. Two hex digits represent one byte (0-255 in decimal, 00-FF in hex). This is why colour channels max out at FF (255) — each channel is one byte. The # prefix in CSS is simply a convention to indicate a hex colour value.
CSS Colour Functions
- color: #FF5733; — hex notation, most common
- color: rgb(255, 87, 51); — RGB function
- color: rgba(255, 87, 51, 0.8); — RGB with alpha transparency
- color: hsl(11, 100%, 60%); — HSL function
- color: hsla(11, 100%, 60%, 0.8); — HSL with alpha
- color: orangered; — named CSS colour (148 named colours available)
Related Tools
Frequently Asked Questions
Split the hex code into 3 pairs, convert each from hex to decimal. #FF5733: FF=255, 57=87, 33=51 → RGB(255, 87, 51).
Same colour, different notation. Hex uses base-16 (#FF5733), RGB uses base-10 (255, 87, 51). Both describe red, green, blue channels.
#FFFFFF (all channels at maximum). Black is #000000 (all at zero).
Yes. Use 8-digit hex: #FF573380 = 50% opacity. Or use rgba(255, 87, 51, 0.5) in CSS.
Hex is most common. HSL is growing for ease of creating variations. Use rgba() when you need transparency.
Hue (0-360°), Saturation (0-100%), Lightness (0-100%). More intuitive than RGB for adjusting colours.
