HEX to RGB Converter

HEX to RGB Converter Online — Convert HEX Color Codes to RGB Free

The HEX to RGB Converter by Toolsiro converts any hexadecimal color code to its RGB values instantly — with a live color preview, sliders showing each channel, and outputs in multiple formats including RGB, CSS rgba(), HSL, and the original HEX. Type or paste a HEX code, or pick a color visually, and all formats update in real time.

HEX and RGB are the two most common color formats in web development. Knowing how to convert between them — and understanding what the values mean — makes you faster, more accurate, and more confident when working with color in code, design tools, and anywhere color values appear.

How HEX to RGB Conversion Works

A hexadecimal color code is a compact representation of three RGB channel values. The # prefix is just a marker — the actual data is the six hex digits that follow, split into three pairs. Each pair represents one channel: the first two digits are Red, the middle two are Green, the last two are Blue.

Converting each pair from hexadecimal to decimal gives the RGB value. In hexadecimal, the digits 0–9 have their normal values, and A–F represent 10–15. A two-digit hex number works as: (first digit × 16) + second digit. For example: #6366F1 splits into 63 (Red), 66 (Green), F1 (Blue). 63 hex = (6 × 16) + 3 = 99. 66 hex = (6 × 16) + 6 = 102. F1 hex = (15 × 16) + 1 = 241. Result: RGB(99, 102, 241).

This tool does the conversion instantly for any valid HEX code — 3-digit shorthand, 6-digit standard, or 8-digit with alpha.

Reading HEX Color Codes

With practice, you can learn to read HEX colors at a glance without converting. The range 00–FF for each channel maps to a simple set of recognizable patterns. #FF0000 is pure red (Red=255, Green=0, Blue=0). #00FF00 is pure green. #0000FF is pure blue. #FFFFFF is white (all channels maximum). #000000 is black (all channels zero). #808080 is medium gray (all channels at 128, exactly halfway).

When all three pairs are the same value, the color is always a neutral gray at that brightness level — #333333 is dark gray, #AAAAAA is light gray, #EEEEEE is very light gray. When one pair is much higher than the others, that channel dominates and the color leans toward that primary color. #FF8800 has maximum red, medium green, no blue — producing orange.

3-Digit HEX Shorthand

Three-digit HEX codes are valid shorthand for 6-digit codes where each digit pair consists of two identical digits. #FFF expands to #FFFFFF (white). #000 to #000000 (black). #F00 to #FF0000 (red). #ABC to #AABBCC. The conversion is identical — each digit simply doubles to form the two-digit pair. The tool accepts 3-digit input and expands it automatically before conversion.

8-Digit HEX with Alpha

Modern CSS supports 8-digit HEX codes that include an alpha (transparency) channel as the final two digits. #6366F180 means the primary indigo color at approximately 50% opacity (80 hex = 128 decimal, half of 255). #6366F1FF is fully opaque (FF = 255 = 100% opacity). #6366F100 is fully transparent (00 = 0 opacity). The converter reads 8-digit HEX codes and shows the extracted alpha value alongside the RGB channels.

HEX Colors in CSS and HTML

HEX color codes appear throughout CSS and HTML. In CSS, they're valid for any color property: color: #6366F1; for text, background-color: #F3F4F6; for backgrounds, border-color: #E5E7EB; for borders. In HTML, the bgcolor attribute (deprecated) and color attribute in some legacy elements accept HEX codes. SVG elements use HEX extensively in fill and stroke attributes.

HEX is case-insensitive — #6366f1 and #6366F1 are identical. Most style guides choose one convention (all uppercase or all lowercase) for consistency, but browsers accept both. Tools and linters typically enforce one case as part of CSS formatting rules.

When to Use HEX vs RGB in CSS

Both HEX and RGB describe the same colors with equal precision. The choice is contextual. Use HEX when compact notation matters — a 7-character HEX code is shorter than an 11-character rgb() declaration. Use rgb() when you need transparency (rgba()) or when manipulating individual channel values programmatically with CSS variables or calc(). Use HSL when creating color variations in CSS — hsl(240, 82%, 60%) is far more readable than #6366F1 when you need to explain what a color is.

Modern CSS custom properties (variables) often store colors as individual RGB channel values to enable the rgba() transparency trick without separate variable definitions: --color-primary: 99, 102, 241; followed by background: rgba(var(--color-primary), 0.1); This technique requires the RGB values, making the HEX-to-RGB conversion directly practical.

HEX Colors in Design Tools

Every major design tool supports HEX color input and output. In Figma, the color picker shows a HEX field where you can type or paste codes directly. Sketch and Adobe XD have identical functionality. When copying colors between a design file and CSS code, HEX is the most frictionless format — paste it directly from the tool into your stylesheet or vice versa.

Design tokens in modern design systems are almost universally stored as HEX. Whether using Style Dictionary, Theo, or Tailwind's config format, the hex value is the canonical reference that other formats derive from. This makes HEX-to-RGB conversion essential when a design system needs to expose RGB channel values for CSS variable tricks or JavaScript color manipulation.

Color Channels and Visual Weight

Understanding how individual RGB channels affect perceived color helps you make better color decisions. The Red channel contributes to warm, energetic tones — increasing red pushes colors toward orange, yellow, and pink. The Green channel dominates in most neutral colors — medium gray, skin tones, and many browns have surprisingly high green values. The Blue channel contributes to cool, calm tones — high blue values produce purples, teals, and steel grays.

The human eye is most sensitive to the green channel — which is why the luminance formula weights green at 71.52%, red at 21.26%, and blue at only 7.22% when calculating perceived brightness. This means a color with high green values will look brighter than a color with high red or blue values at the same RGB total.

Frequently Asked Questions

What RGB values does #FFFFFF produce? RGB(255, 255, 255) — pure white with all channels at maximum.

How do I convert a 3-digit HEX to RGB? Expand the 3-digit code to 6 digits first by doubling each digit (#ABC → #AABBCC), then convert each pair from hex to decimal (AA → 170, BB → 187, CC → 204). The RGB is (170, 187, 204).

What does it mean when two HEX pairs are the same? When all three pairs are identical, the color is a neutral gray — #555555 is a medium-dark gray. When two pairs are equal and one is different, the color leans toward the unique channel's primary color.

Can HEX represent every color? Standard 6-digit HEX represents all 16,777,216 colors in the 8-bit-per-channel RGB color space. This is the same gamut as standard computer monitors (sRGB). It cannot represent wide-gamut colors (used in HDR displays and high-end photography) that fall outside the sRGB space.

Is there a difference between lowercase and uppercase HEX? No — #6366f1 and #6366F1 are identical. CSS is case-insensitive for HEX colors. Choose one convention for your codebase and stick with it for consistency.