How to Convert HEX to RGB (and RGB to HEX) Online

By FreeToolBox Team · ·
hex to rgbhex color to rgbcolor converterrgb colorcss colorsweb design

If you have ever worked with colors in CSS, Figma, Photoshop, or any design or development tool, you have seen both HEX codes like #3A86FF and RGB values like rgb(58, 134, 255). They describe the same color — just in different formats.

This guide explains what each format means, how to convert between them manually, and how to do it in seconds with a free online tool.

What Is a HEX Color Code?

A HEX (hexadecimal) color code is a six-character string preceded by a hash symbol — for example, #FF5733. It encodes a color as three pairs of hexadecimal digits, where each pair represents one of the three primary color channels: red, green, and blue.

Hexadecimal is base-16, meaning each digit can be 0–9 or A–F. A pair of hex digits can represent values from 00 (0) to FF (255), giving you 256 possible values per channel.

Breaking down #FF5733:

  • FF → red channel → 255
  • 57 → green channel → 87
  • 33 → blue channel → 51

HEX codes are compact and universally supported in CSS and HTML. You will see them everywhere in stylesheets, design tokens, and color pickers.

Shorthand HEX

CSS also accepts a three-digit shorthand when each pair repeats: #RGB. For example, #AABBCC can be written as #ABC. Not all colors have a valid shorthand — only those where both digits in each pair are identical.

What Is RGB?

RGB stands for Red, Green, Blue. In CSS, an RGB value looks like rgb(255, 87, 51), where each number is an integer between 0 and 255.

  • 0 means none of that color channel
  • 255 means full intensity
  • Combining all three at 255 gives white: rgb(255, 255, 255)
  • All at 0 gives black: rgb(0, 0, 0)

RGB maps directly to how screens produce color. Every pixel on your monitor mixes red, green, and blue light at different intensities to produce the color you see. The RGB model makes it intuitive to reason about brightness and hue when you are working in code or design software.

How to Convert HEX to RGB

Converting a HEX code to RGB is a two-step process:

  1. Split the six-character HEX code into three pairs: RR, GG, BB.
  2. Convert each pair from hexadecimal to decimal.

Example: Convert #3A86FF to RGB

  • 3A → 3 × 16 + 10 = 58
  • 86 → 8 × 16 + 6 = 134
  • FF → 15 × 16 + 15 = 255

Result: rgb(58, 134, 255)

You can do this conversion in your head for simple values, but for arbitrary HEX codes it is much faster to use a tool.

How to Convert RGB to HEX

Going the other direction — from RGB to HEX — is equally straightforward:

  1. Take each decimal channel value (0–255).
  2. Convert it to a two-digit hexadecimal number.
  3. Concatenate the three pairs and prepend #.

Example: Convert rgb(30, 215, 96) to HEX

  • 30 ÷ 16 = 1 remainder 14 → 1E
  • 215 ÷ 16 = 13 remainder 7 → D7
  • 96 ÷ 16 = 6 remainder 0 → 60

Result: #1ED760 (Spotify green, incidentally)

If the remainder of dividing by 16 is 10–15, use the letters A–F accordingly (10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 = F).

Why You Need Both Formats

Different tools and workflows prefer different formats:

HEX is common in:

  • CSS and HTML stylesheets
  • Design tokens and Figma files
  • Color swatches and brand palettes

RGB is common in:

  • CSS functions like rgba() for transparency
  • JavaScript canvas and WebGL code
  • Image processing pipelines
  • Accessibility tools that calculate contrast ratios

If you work across both development and design contexts, you will regularly need to convert one format to the other. A fast, private converter that runs in your browser saves you from typing hex digits into a calculator.

RGBA and Transparency

Both formats have an alpha (transparency) variant. In CSS:

  • rgba(58, 134, 255, 0.5) — 50% transparent blue
  • #3A86FF80 — HEX with an extra two-digit alpha channel (00 = fully transparent, FF = fully opaque)

The eight-digit HEX format (#RRGGBBAA) is supported in all modern browsers and is commonly used in design tools and design tokens. When copying colors from Figma or Sketch, you may encounter this eight-digit form.

Common Mistakes to Avoid

Forgetting to pad short values. If a decimal channel value converts to a single hex digit — for example, 9 → 9 — you must pad it to two characters: 09. A HEX code must always have exactly six characters (or eight with alpha). #9FF and #09FFFF are not the same color.

Confusing shorthand with full format. #FFF is shorthand for #FFFFFF (white), not for #FFF000. Each single digit expands by doubling: #ABC → #AABBCC.

Mixing up channel order. HEX and RGB always follow the same order: red first, then green, then blue. In some other color systems (like BGR used in OpenCV), the order is reversed. Make sure you are reading the right format for your tool.

Convert HEX to RGB Instantly

Our free Hex to RGB Converter handles both directions — paste in a HEX code and get the RGB values instantly, or enter RGB numbers and get the HEX code. It also shows a live color preview so you can see exactly what color you are working with.

The tool runs entirely in your browser. No data is sent to any server, no sign-up is required, and no files are uploaded. It supports both the standard six-digit format and the eight-digit format with alpha.

Summary

HEX and RGB are two representations of the same thing: a combination of red, green, and blue light intensities that produce a specific color on screen. HEX encodes those intensities as base-16 digit pairs; RGB expresses them as decimal integers from 0 to 255.

Converting between them is straightforward mathematically — divide or multiply by 16 — but in practice the fastest approach is a converter, especially when working with unfamiliar color values where manual calculation is error-prone.

Use the Hex to RGB Converter to switch between formats instantly, see a live preview, and copy the result in the format your project needs.