Hex To RGB Calculator

Work out hex to rgb instantly with clear inputs, formula shown and shareable results.

About Hex To RGB Calculator

Each pair of hex digits is a base-16 number from 00 to FF, which converts to a decimal channel value from 0 to 255; three-digit shorthand doubles each digit. Hex is compact for authoring but RGB is what you need for interpolation and opacity, which is why design tokens are usually stored in the numeric form.

Formula

Channel conversion

channel = the two hex digits read as a base-16 number, giving 0 to 255

Worked example

With the default values below, Hex To RGB Calculator returns CSS colour value of rgba(59, 130, 246, 1). Change any input above and every figure here is recalculated in your browser.

Inputs used

Hex colour: #3B82F6
Opacityaccepts 0–100 %: 100 %

Results

CSS colour value: rgba(59, 130, 246, 1)
Red channel: 59
Green channel: 130
Blue channel: 246

Step by step

1Values used
2Channel conversion
3CSS colour value= rgba(59, 130, 246, 1)
4Red channel= 59
5Green channel= 130
6Blue channel= 246

Assumptions and limits

The result is derived only from the 2 inputs listed above. Anything not among them is not part of the calculation.
In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
Figures are rounded for display to whole numbers, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.

How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.

Frequently Asked Questions

How is the Hex To RGB figure worked out?

channel = the two hex digits read as a base-16 number, giving 0 to 255. Each pair of hex digits is a base-16 number from 00 to FF, which converts to a decimal channel value from 0 to 255; three-digit shorthand doubles each digit.

Why does this matter?

Hex is compact for authoring but RGB is what you need for interpolation and opacity, which is why design tokens are usually stored in the numeric form.

What do I need to enter?

Enter hex colour, opacity. The defaults shown are a realistic worked example — swap in your own figures to get a result you can use.