TechCompare LogoTechCompare

How to convert hex to RGB: the web developer's color format explained

Hex is the right format for opaque colors in web development. It's shorter than rgb(), universally recognized, and copy-pastes cleanly between Figma, VS Code, and browser DevTools. Use the 8-digit variant or rgba() when you need transparency.

Hex color codes like #3B82F6 are just RGB values written in hexadecimal. The first two characters are red (3B = 59), the middle two are green (82 = 130), and the last two are blue (F6 = 246). Hex is the dominant color format on the web because it's compact, universally supported, and easy to copy-paste between design tools and code.

By TechCompare · Updated

Format
HEX
Example: #3B82F6
Category
Web Formats
Color knowledge base
This exact #3B82F6 swatch, pre-loaded. Convert to every format, adjust the HSL, or pair it against a second color.
Edit in the full tool

How this is calculated

HTML 3.2 specified hexadecimal RGB values for several color-related attributes. That documents HTML support, but doesn't establish that the notation originated then. The format is case-insensitive (#3b82f6 = #3B82F6) and supports shorthand when each channel uses identical hex digits (#FFF = #FFFFFF). Six-digit #RRGGBB represents opaque RGB, while CSS also supports four-digit #RGBA and eight-digit #RRGGBBAA forms when you need an alpha channel.

Verdict

The format maps two hex characters per channel directly to the 0-255 integer per RGB channel: 3B becomes 59, 82 becomes 130, F6 becomes 246, summing to rgb(59, 130, 246). That 1:1 byte-per-channel structure is why hex survives every design tool round-trip losslessly, where rgb() risks being reformatted or the comma syntax gets mangled. The three-digit shorthand (#FFF for #FFFFFF) doubles each RGB digit, and CSS also supports four-digit #RGBA shorthand plus six- and eight-digit full forms. The eight-digit form (#3B82F6CC) adds the alpha byte, while the four-digit form provides the same channels in shorthand.

More Color scenarios

RGB vs CMYK
RGB (Red, Green, Blue) is an additive color model for screens: you start with black and add colored light to create colors.
View details ➜
HSL color model
HSL (Hue, Saturation, Lightness) describes colors the way people naturally think about them rather than the way screens produce them.
View details ➜
OKLCH in CSS
OKLCH (Lightness, Chroma, Hue) is a modern color space designed to be perceptually uniform, meaning that the same numerical change in a value produces roughly the same perceived change in color, regardless of the hue.
View details ➜

Related guides

WCAG AA for normal text
Why hex colors are the input format for contrast checking.
View guide ➜
HSL color model explained
The intuitive alternative to hex for programmatic colors.
View guide ➜

Frequently asked questions

Is #FFF the same as #FFFFFF?
Yes for the three-digit RGB shorthand. CSS expands #FFF to #FFFFFF and #F00 to #FF0000 by doubling each RGB digit. CSS also supports four-digit #RGBA shorthand, which doubles the RGB and alpha digits, plus six- and eight-digit full forms.
How do I convert a hex color like #3B82F6 to RGB values?
Split the hex string into three two-character pairs: 3B, 82, F6. Convert each pair from base-16 to decimal: 0x3B = 59, 0x82 = 130, 0xF6 = 246. The result is rgb(59, 130, 246). Most spreadsheets, browsers, and design tools accept this conversion natively when you paste a hex code.
What's the difference between #RGB and #RRGGBB hex notation?
Three-digit hex (#F00) doubles each RGB digit to produce #FF0000. Six-digit hex (#FF0000) lets you specify any value from 0-255 per channel. CSS also supports four-digit #RGBA shorthand and eight-digit #RRGGBBAA, with the final digit or pair controlling alpha opacity.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool ➜

JSON Formatter

Validate, format, and minify JSON data with readable output and error detection.

Use tool ➜

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool ➜