How do I convert a HEX color to RGB?

A HEX color like #FF5733 contains three pairs of hexadecimal digits: FF (red = 255), 57 (green = 87), 33 (blue = 51). Convert each pair from base-16 to base-10 to get RGB values. So #FF5733 = rgb(255, 87, 51). Shorthand HEX codes like #F00 expand to #FF0000.

What is the difference between RGB and RGBA?

RGB defines a color using Red, Green, and Blue channels (0-255 each). RGBA adds an Alpha channel (0-1) for transparency. rgb(255, 0, 0) is solid red. rgba(255, 0, 0, 0.5) is 50% transparent red. Use RGBA when you need semi-transparent colors in CSS.

How do I convert RGB to HEX?

Convert each RGB component (0-255) to hexadecimal (00-FF). For rgb(59, 130, 246): 59 = 3B, 130 = 82, 246 = F6, giving #3B82F6. In JavaScript: "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join("").

What is HSL and how does it relate to HEX/RGB?

HSL stands for Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). It is another way to represent the same color as HEX or RGB. HSL is more intuitive for designers: hue selects the color, saturation controls vibrance, lightness controls brightness. All three formats (HEX, RGB, HSL) can represent the same colors.

Can I use shorthand HEX codes?

Yes. Shorthand HEX uses 3 digits instead of 6, where each digit is doubled. #F00 = #FF0000 (red), #0F0 = #00FF00 (green), #09C = #0099CC. Shorthand works in all CSS. Not all colors can be expressed in shorthand — only when each pair of digits is identical.

What HEX color is white, black, and common grays?

White = #FFFFFF = rgb(255, 255, 255). Black = #000000 = rgb(0, 0, 0). Common grays: #808080 = rgb(128, 128, 128), #C0C0C0 = rgb(192, 192, 192), #333333 = rgb(51, 51, 51), #F5F5F5 = rgb(245, 245, 245). Grays always have equal R, G, B values.

Back

HEX to RGB Converter

HEX color codes represent colors as three pairs of hexadecimal digits: #RRGGBB. Each pair converts to a decimal 0-255 for Red, Green, Blue. #FF5733 = rgb(255, 87, 51). Shorthand #F00 expands to #FF0000 = rgb(255, 0, 0). HSL is an alternative: hue (0-360), saturation (0-100%), lightness (0-100%). RGBA adds an alpha channel (0-1) for transparency.

Convert HEX color codes to RGB, HSL, and RGBA instantly. Bidirectional conversion between HEX and RGB. Copy CSS color values in any format. Live color preview with alpha slider.

Works OfflineDark ModeNo Ads

Conversion Mode

HEX Color Input

Alpha (Opacity)

1.00

Color Preview

R: 59 G: 130 B: 246

H: 217° S: 91% L: 60%

CSS Color Formats

hex#3B82F6

rgbrgb(59, 130, 246)

rgbargba(59, 130, 246, 1)

hslhsl(217, 91%, 60%)

hslahsla(217, 91%, 60%, 1)

Common Color Values

Color	HEX	RGB	HSL
Red	#FF0000	255, 0, 0	0, 100%, 50%
Green	#00FF00	0, 255, 0	120, 100%, 50%
Blue	#0000FF	0, 0, 255	240, 100%, 50%
White	#FFFFFF	255, 255, 255	0, 0%, 100%
Black	#000000	0, 0, 0	0, 0%, 0%
Yellow	#FFFF00	255, 255, 0	60, 100%, 50%
Cyan	#00FFFF	0, 255, 255	180, 100%, 50%
Magenta	#FF00FF	255, 0, 255	300, 100%, 50%
Tailwind Blue	#3B82F6	59, 130, 246	217, 91%, 60%

How to Use

1
Enter a color value
Type a HEX code (#FF5733 or FF5733) in HEX-to-RGB mode, or enter RGB values (255, 87, 51) in RGB-to-HEX mode. Use presets for common colors.
2
Adjust alpha if needed
Use the alpha slider (0-1) to set transparency. This generates RGBA and HSLA values for semi-transparent colors.
3
Preview the color
See a live color swatch with RGB and HSL component values displayed alongside.
4
Copy CSS values
Click the copy button next to any format (HEX, RGB, RGBA, HSL, HSLA) to copy the CSS value to your clipboard.

Frequently Asked Questions

How do I convert a HEX color to RGB?: A HEX color like #FF5733 contains three pairs of hexadecimal digits: FF (red = 255), 57 (green = 87), 33 (blue = 51). Convert each pair from base-16 to base-10 to get RGB values. So #FF5733 = rgb(255, 87, 51). Shorthand HEX codes like #F00 expand to #FF0000.
What is the difference between RGB and RGBA?: RGB defines a color using Red, Green, and Blue channels (0-255 each). RGBA adds an Alpha channel (0-1) for transparency. rgb(255, 0, 0) is solid red. rgba(255, 0, 0, 0.5) is 50% transparent red. Use RGBA when you need semi-transparent colors in CSS.
How do I convert RGB to HEX?: Convert each RGB component (0-255) to hexadecimal (00-FF). For rgb(59, 130, 246): 59 = 3B, 130 = 82, 246 = F6, giving #3B82F6. In JavaScript: "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join("").
What is HSL and how does it relate to HEX/RGB?: HSL stands for Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). It is another way to represent the same color as HEX or RGB. HSL is more intuitive for designers: hue selects the color, saturation controls vibrance, lightness controls brightness. All three formats (HEX, RGB, HSL) can represent the same colors.
Can I use shorthand HEX codes?: Yes. Shorthand HEX uses 3 digits instead of 6, where each digit is doubled. #F00 = #FF0000 (red), #0F0 = #00FF00 (green), #09C = #0099CC. Shorthand works in all CSS. Not all colors can be expressed in shorthand — only when each pair of digits is identical.
What HEX color is white, black, and common grays?: White = #FFFFFF = rgb(255, 255, 255). Black = #000000 = rgb(0, 0, 0). Common grays: #808080 = rgb(128, 128, 128), #C0C0C0 = rgb(192, 192, 192), #333333 = rgb(51, 51, 51), #F5F5F5 = rgb(245, 245, 245). Grays always have equal R, G, B values.