HEX to RGB Converter - Convert HEX to RGB Online Free

What Is HEX to RGB Conversion?

HEX to RGB conversion is the process of translating a hexadecimal color code into its equivalent red, green, and blue (RGB) channel values. On the web, colors are most commonly expressed in two notations: HEX (a six-digit hexadecimal number prefixed with #) and RGB (three decimal numbers representing the intensity of red, green, and blue light). Both notations describe exactly the same color; they simply use different number systems to express it.

A HEX color code like #FF6600 is a six-digit string where each pair of digits represents one color channel. The first two digits (FF) define the red channel, the middle two digits (66) define the green channel, and the last two digits (00) define the blue channel. Converting each hexadecimal pair to its decimal equivalent yields the RGB equivalent: rgb(255, 102, 0). The result is a vibrant orange color used widely in web design, branding, and user interfaces.

How HEX Digits Map to RGB Channels

Each HEX color code is composed of six hexadecimal digits, grouped into three pairs. Hexadecimal is a base-16 number system that uses the digits 0-9 and the letters A-F (where A=10, B=11, C=12, D=13, E=14, F=15). Each pair of HEX digits represents a value from 0 to 255, which maps directly to the corresponding RGB channel.

• First pair (RR) — Red channel intensity. 00 means no red, FF means maximum red (255).
• Second pair (GG) — Green channel intensity. 00 means no green, FF means maximum green (255).
• Third pair (BB) — Blue channel intensity. 00 means no blue, FF means maximum blue (255).

For example, #000000 has all three channels at zero, producing black. #FFFFFF has all three channels at maximum (255), producing white. #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. Every color you see on the web is some combination of these three channels, expressed in either HEX or RGB notation.

The conversion formula is straightforward: take each two-digit HEX pair, convert it from base-16 to base-10, and you have the RGB channel value. For instance, A3 in hexadecimal equals (10 × 16) + (3 × 1) = 163 in decimal. So #A3FF5C converts to rgb(163, 255, 92).

3-Digit vs 6-Digit HEX Codes

CSS supports a shorthand notation for HEX colors where a three-digit code can represent a six-digit code. The shorthand works by duplicating each digit. If a HEX code has pairs where both digits are identical, the shorthand applies:

• #F0A expands to #FF00AA — Each digit is doubled: F becomes FF, 0 becomes 00, A becomes AA.
• #333 expands to #333333 — All channels are identical, producing a medium dark gray.
• #FFF expands to #FFFFFF — All channels at maximum, producing white.
• #000 expands to #000000 — All channels at zero, producing black.

The three-digit shorthand only works when both digits of each channel pair are the same. If your color uses #F06, it expands to #FF0066 because F becomes FF, 0 becomes 00, and 6 becomes 66. If you need precise control over both digits of a channel, you must use the full six-digit form. Our tool accepts both formats and expands shorthand automatically.

CSS rgb() Output

When you convert a HEX code using this tool, the output includes a ready-to-use CSS rgb() function string. The syntax is rgb(red, green, blue) where each value is a decimal integer between 0 and 255. For example, converting #2196F3 (a popular Material Design blue) produces rgb(33, 150, 243).

This output can be pasted directly into CSS stylesheets, inline styles, or JavaScript style assignments. If you need transparency, you can extend the function to rgba() by adding a fourth alpha parameter ranging from 0 (fully transparent) to 1 (fully opaque). For instance, rgba(33, 150, 243, 0.5) produces the same blue at 50% opacity.

CSS also supports modern functions like color-mix() and the oklch() color space, but rgb() remains the most widely supported and understood format across all browsers and design tools.

Use Cases for HEX to RGB Conversion

Converting HEX colors to RGB is a routine task across multiple disciplines in web development and digital design:

• CSS Styling — When a design tool exports colors as HEX but your CSS framework or component library requires RGB values, conversion ensures compatibility. Some CSS properties like background gradients and box-shadow are easier to write and read in RGB notation.
• Design Tool Integration — Tools like Figma, Sketch, and Adobe XD may export color palettes in HEX format. Converting to RGB lets you use those colors in canvas-based drawing, WebGL shaders, and image editing software that expects decimal channel values.
• Color Extraction — When extracting colors from images, screenshots, or existing designs, the raw pixel data is in RGB. Converting between HEX and RGB helps you document and standardize your extracted palette across tools and platforms.
• Accessibility Checks — WCAG 2.1 contrast ratio calculations require RGB values to compute relative luminance. Converting your HEX palette to RGB is the first step in verifying that your text and background combinations meet AA or AAA contrast requirements.
• JavaScript Color Manipulation — Libraries that generate, blend, or analyze colors often accept or return RGB arrays. Converting your HEX palette to RGB makes it compatible with these libraries without additional runtime conversion.
• Data Visualization — Charting libraries like D3.js, Chart.js, and Plotly.js frequently use RGB arrays or objects. Converting your brand HEX colors to RGB ensures your charts and graphs match your design system.

Whether you are building a design system, auditing accessibility compliance, or integrating with external APIs, the ability to convert between HEX and RGB is a fundamental skill for anyone working with digital colors.

Understanding Color Channels and Intensity

Each RGB channel controls the intensity of one primary color of light. On digital displays, these three channels combine additively to produce the full spectrum of visible colors on screen:

• Red (R) — Controls how much red light is emitted. At 0, no red is visible. At 255, red is at full brightness. Blending red with green produces yellows, oranges, and warm tones.
• Green (G) — Controls how much green light is emitted. Green is the most visually dominant channel to the human eye. High green values paired with moderate red produce the greens and teals used extensively in UI design.
• Blue (B) — Controls how much blue light is emitted. Blue channels are critical for cool tones, purples, and the deep navy colors popular in dark mode interfaces.

When all three channels are equal, the result is a shade of gray. For example, rgb(128, 128, 128) is a medium gray that converts to #808080 in HEX. When all three channels are at their maximum (255), the result is white. When all three are at zero, the result is black. The infinite combinations between these extremes produce the 16,777,216 colors that the web can display.

HEX to RGB Conversion Formula

The mathematical formula for converting a two-digit HEX pair to an RGB channel value is:

decimal = (first_digit × 16) + second_digit

Where first_digit and second_digit are the decimal equivalents of the HEX characters. For example, to convert #B5A7D2:

• Red: B5 = (11 × 16) + 5 = 181
• Green: A7 = (10 × 16) + 7 = 167
• Blue: D2 = (13 × 16) + 2 = 210

The result is rgb(181, 167, 210), a soft lavender color. This manual conversion is useful for understanding the relationship between the two formats, but using a reliable converter eliminates errors and saves time, especially when working with large color palettes.

Related Tools

• RGB to HEX — Convert RGB color values back to hexadecimal notation for use in CSS and design tools.
• Color Converter — Convert between HEX, RGB, HSL, HSV, and CMYK color formats in one comprehensive tool.

How to Use This Tool

1. Enter your HEX color code — Type or paste a valid HEX color code into the input field. Use either 3-digit shorthand (like #F0A) or full 6-digit format (like #FF6600). The leading hash symbol is optional.
2. View the RGB conversion — The tool instantly converts your HEX code and displays the red, green, and blue channel values along with the CSS rgb() function output.
3. Preview and copy — Check the live color preview swatch to verify the result visually. Copy the rgb() string or individual channel values to use in your project.

Need the reverse? Use our RGB to HEX converter to transform RGB values back into hexadecimal color codes.

Privacy and Security

All color conversion is performed locally in your browser. No color data is sent to our servers, stored in databases, or shared with third parties. The tool processes your input entirely in memory and discards it when you navigate away. No cookies or tracking scripts are used to collect your color values.