How it works
The Hex to RGB Converter translates hexadecimal CSS color values (#FF5733 or #F53) to their RGB equivalents (rgb(255, 87, 51)) and displays the color visually with a preview swatch.
Hex and RGB are the two most common ways to specify color in CSS. Hex is more compact (#FF5733) but RGB is more legible (you can immediately see which channel is dominant) and is required when you need to manipulate individual color channels or use rgba() for transparency.
How to use it: type or paste a hex color value — with or without the # prefix, in 3-character (#ABC) or 6-character (#AABBCC) format, or 8-character with alpha (#AABBCCFF). The converted RGB values appear instantly with a color preview swatch. Also outputs HSL, HSB/HSV for reference, and the CSS-ready rgb() function string.
3-digit hex shorthand: #ABC expands to #AABBCC — each single digit is doubled. So #F53 becomes #FF5533, rgb(255, 85, 51).
Alpha channel: 8-digit hex (#AABBCCDD) includes an alpha value in the last two digits. This is converted to rgba(R, G, B, A) where A is the alpha as a decimal 0–1.
Color format cheat sheet: Hex (#FF5733) = RGB (255, 87, 51) = HSL (11°, 100%, 60%). All three describe the same color; the format to use depends on context — hex for design tokens, RGB when manipulating channels in JavaScript, HSL for programmatic color adjustments (rotating hue, adjusting saturation/lightness).
Frequently Asked Questions
- 3-digit hex (#ABC) is a shorthand where each digit is doubled: #ABC = #AABBCC. All three pairs must be repeated digits for the shorthand to apply. 6-digit hex is the full form and works for all colors.
- 8-digit hex (#RRGGBBAA) adds an alpha (opacity) value as the last two digits. FF = fully opaque, 80 = 50% transparent, 00 = fully transparent. This maps to rgba(R, G, B, A) where A is the alpha as a 0–1 decimal.
- No. #ff5733 and #FF5733 represent the same color. The tool accepts both uppercase and lowercase hex digits.
- HSL (Hue, Saturation, Lightness) is more intuitive for creating color variations. To lighten a color, increase Lightness. To mute it, decrease Saturation. To find a complementary color, add 180° to Hue. Use HSL when you need to programmatically manipulate colors.