Hexadecimal to RGB

Convert HEX to RGB

HEX to RGB conversion decodes a 6-character hexadecimal color code into its three Red, Green, Blue channel values (0-255 each). Enter any HEX code and instantly see the RGB triplet, CSS function syntax, HSL equivalent, and a live color swatch. This free converter is built for front-end developers, UI designers, and anyone who needs to switch between HEX and RGB notation in seconds.

Decode HEX to RGB
INPUT

Enter HEX Color Code

#
HSL239°, 84%, 67%
CMYK59%, 58%, 0%, 5%
Popular Colors
RESULT

RGB Color Values

RGB VALUES

99, 102, 241

rgb(99, 102, 241)

Channel Breakdown

Copied!
HOW IT WORKS

How HEX Encodes RGB

The math behind 6 hexadecimal characters and 3 color channels

A HEX color code is a compact way to write an RGB value. The 6 characters split into 3 pairs: the first pair is Red, the second is Green, the third is Blue. Each pair uses base-16 (hexadecimal) notation where digits range from 0-9 and letters A-F, giving 256 possible values per channel (00 to FF).

The conversion formula is straightforward: take each 2-character pair and convert from base-16 to base-10. For #6366F1: Red = 63₁₆ = 6×16 + 3 = 99. Green = 66₁₆ = 6×16 + 6 = 102. Blue = F1₁₆ = 15×16 + 1 = 241. Result: RGB(99, 102, 241).

HEX and RGB are two notations for the same color model — they represent identical colors. HEX is shorter and easier to paste into CSS. RGB is more human-readable and allows alpha transparency when extended to RGBA. Our converter handles this translation instantly.

HEX → RGB Decode
63 → 99
66 → 102
F1 → 241
#6366F1
DEVELOPMENT

HEX to RGB for CSS Development

When and why front-end developers switch from HEX to RGB in stylesheets

Alpha Transparency

HEX does not natively support transparency in older CSS specs. Converting to RGB lets you use rgba(99, 102, 241, 0.5) for 50% opacity — essential for overlays, glass effects, and fade transitions.

JavaScript Manipulation

Programmatic color changes — hover effects, theme switching, data visualization — are easier with separate R, G, B numeric channels. Incrementing a number is simpler than parsing a HEX string.

Readability

RGB notation (rgb(99, 102, 241)) tells you the relative intensity of each channel at a glance. HEX (#6366F1) requires mental hexadecimal conversion to understand the color composition.

CSS Custom Properties

Storing channels separately (--r: 99; --g: 102; --b: 241;) lets you use rgb(var(--r), var(--g), var(--b)) and modify individual channels independently for theme variations.

FORMULA

HEX to RGB Conversion Formula

The mathematical steps to decode any hexadecimal color

StepOperationExample (#6366F1)
1. SplitDivide 6 chars into 3 pairs63 | 66 | F1
2. Convert RFirst pair: base-16 to base-106×16 + 3 = 99
3. Convert GSecond pair: base-16 to base-106×16 + 6 = 102
4. Convert BThird pair: base-16 to base-1015×16 + 1 = 241
5. ResultCombine into RGB tripletrgb(99, 102, 241)

This formula works for any 6-digit HEX code. For 3-digit shorthand (e.g., #F0C), expand each digit by doubling it: F→FF, 0→00, C→CC, then apply the same conversion. Our tool handles both formats automatically.

TOOLS

HEX to RGB in Design Tools

Where to find and use RGB values in popular design software

Figma

Hover for details →

Click any color fill → switch from HEX to RGB in the color picker panel. Figma shows R, G, B channels and supports RGBA for opacity. Paste HEX and read RGB instantly.

Adobe Photoshop

Hover for details →

Open the Color Picker (click foreground color), paste HEX in the # field, and read R, G, B values from the right panel. Photoshop converts between all color models in real time.

VS Code

Hover for details →

Hover over any HEX value in CSS to see the color preview. The Color Picker extension shows RGB, HSL, and RGBA. Click the swatch to cycle between notations.

Tailwind CSS

Hover for details →

Tailwind config accepts HEX, RGB, or HSL. Using RGB with CSS custom properties enables opacity utilities like bg-brand/50 — only possible with separated channel values.

EDUCATION

Browser Color Rendering

How browsers interpret HEX and RGB values to display pixels

When a browser reads color: #6366F1; or color: rgb(99, 102, 241);, the rendering engine converts it to the same internal representation. The CSS parser translates both notations into an identical 24-bit color value (8 bits per channel). There is zero visual difference between them on screen.

Modern browsers support additional color notations: 8-digit HEX for alpha (#6366F180), rgba() for decimal alpha, and the newer color() function for wide-gamut Display P3 colors. All of these ultimately map to specific subpixel intensities on your monitor's LED panel.

The sRGB color space is the default for CSS colors. Browsers assume sRGB unless you explicitly use a wide-gamut color function. For standard web design, HEX and RGB in sRGB are interchangeable — pick whichever notation your team prefers for readability and maintainability.

R: 255
G: 255
B: 255
R+G
R+B
FAQ

HEX to RGB — Frequently Asked Questions

Yes, they represent the same color model. HEX is a base-16 notation (#6366F1) and RGB is a base-10 notation (99, 102, 241). Both encode the same 3 channels — Red, Green, Blue — and produce identical colors on screen.

Use RGB when you need alpha transparency (rgba), when manipulating colors programmatically in JavaScript, or when storing individual channel values in CSS custom properties for dynamic theming.

Each RGB channel ranges from 0 (no intensity) to 255 (full intensity). This gives 256 levels per channel and 256³ = 16,777,216 total color combinations.

Double each digit: #F0C becomes #FF00CC. Then convert normally: R=255, G=0, B=204. Our converter handles this expansion automatically.

No. All modern browsers convert both notations to the same internal 24-bit color. #FF0000 and rgb(255, 0, 0) produce identical pixels. There is zero rendering difference.

Yes. 100% free, no sign-up, unlimited conversions.