HEX to RGB Converter — Convert Hex Color Codes to RGB Instantly

Type any HEX color code and see the RGB values instantly. Supports 3-digit shorthand (#F00), 6-digit (#FF0000), and 8-digit with alpha (#FF000080).

How HEX Color Codes Work

HEX color codes use the base-16 (hexadecimal) number system to represent colors. A 6-digit hex code like #3B82F6 contains three pairs of digits: the first pair (3B) represents red (59 in decimal), the middle pair (82) represents green (130), and the last pair (F6) represents blue (246). Each channel ranges from 00 (0) to FF (255).

The Conversion Formula

Converting HEX to RGB is straightforward: split the 6-character hex string into three 2-character pairs, then convert each pair from hexadecimal to decimal. For example, #FF6347 (Tomato) becomes R: 255 (FF), G: 99 (63), B: 71 (47), giving rgb(255, 99, 71). Three-digit shorthand like #F63 doubles each digit first: FF6633.

Common HEX to RGB Conversions

#FFFFFF = rgb(255, 255, 255) White. #000000 = rgb(0, 0, 0) Black. #FF0000 = rgb(255, 0, 0) Red. #00FF00 = rgb(0, 255, 0) Green. #0000FF = rgb(0, 0, 255) Blue. #3B82F6 = rgb(59, 130, 246) Tailwind blue-500.

Type a HEX code below to convert it to RGB.

Royal Blue
#3B82F5
Presets
HEX
RGB
rgb(59, 130, 245)
HSL
hsl(217, 90%, 60%)
HSV / HSB
CMYK (approx)
RGBA
rgba(59, 130, 245,
)
CSS Variable
--color: #3B82F5;

Frequently Asked Questions

How do I convert HEX to RGB?▼
Paste or type your HEX code (like #3B82F6) into the HEX field and the RGB values appear instantly — R: 59, G: 130, B: 246. The first two hex characters are red, the middle two are green, the last two are blue.
What is a WCAG contrast ratio and why does it matter?▼
The WCAG contrast ratio measures how distinguishable two colors are, from 1:1 (no contrast) to 21:1 (maximum). WCAG 2.1 requires a minimum of 4.5:1 for normal text (AA) and 7:1 for the highest standard (AAA). This ensures people with visual impairments can read your content.
What’s the difference between RGB and HSL?▼
RGB defines colors by mixing red, green, and blue light (0-255 each). HSL describes colors as Hue (color wheel position 0-360°), Saturation (vividness 0-100%), and Lightness (brightness 0-100%). HSL is more intuitive for creating color variations.
Is CMYK conversion accurate?▼
Our CMYK conversion is mathematically correct but approximate. Precise CMYK values for print depend on ICC color profiles. Our conversion uses the standard formula, sufficient for digital mockups. For production print, use your print provider’s color profile.
Can I extract colors from an image?▼
Yes. Upload any image and click anywhere on it to pick a pixel’s color, or let the tool extract the 5-6 most dominant colors automatically. The image is processed entirely in your browser — never uploaded to any server.
What color format should I use for web design?▼
For CSS, HEX (#3B82F6) and RGB are both widely supported. HSL is increasingly preferred because it’s easier to create color variations. For opacity, use RGBA or HSLA. Tailwind CSS uses predefined color classes like bg-blue-500.
How does the palette generator work?▼
It uses color theory to find harmonious combinations. From your color’s hue on the color wheel, it calculates complementary (180° opposite), analogous (nearby), triadic (120° apart), and other harmonies. These mathematical relationships produce colors that naturally look good together.
Is my data private?▼
Nothing leaves your browser. All color calculations, conversions, and image processing happen entirely in JavaScript on your device. No data is stored on any server.

Related Tools

🎨Pixel Art Editor🖼️Image Compressor🔧JSON Formatter🔐Password Generator📱QR Code Generator