HEX to RGB converter

Convert HEX colour codes into RGB values and back again, instantly.

About this HEX to RGB converter

This tool converts colour codes between HEX and RGB so you can work faster when writing CSS, designing in Figma or Canva, or adjusting colours in JavaScript.

What is the difference between HEX and RGB?

  • HEX: written as #ff0000, a hash plus six hexadecimal digits. It is the default notation in HTML and CSS.
  • RGB: written as rgb(255, 0, 0) with three values from 0 to 255. Use it when you need opacity (alpha).
  • HSL: written as hsl(0, 100%, 50%), easier to tweak when blending colours.

Are HEX and RGB the same colour?

Exactly. Each channel in HEX is a pair of hex digits that maps to one 0 - 255 value in RGB, so conversion is lossless in both directions.

Real-world examples

Example 1 — brand colour from Figma into CSS

The design file gives you #FF7F50. Convert it to rgb(255, 127, 80) and drop it straight into color: rgb(255, 127, 80).

Example 2 — the 3-digit shorthand

#F50 is shorthand for #FF5500. The tool accepts both and returns rgb(255, 85, 0).

Example 3 — adding opacity for hover states

Turn #FF7F50 into rgba(255, 127, 80, 0.2) for a soft hover background instead of picking the alpha by eye.

Example 4 — checking a palette

Enter rgb(37, 99, 235) to confirm that shade really is the blue primary, rather than something that has drifted purple.

When to use it, and when not to

Worth using

  • Moving a colour from Figma, Canva or a screenshot into CSS.
  • When a JS library such as Chart.js, D3 or a Tailwind config needs RGB values.
  • Producing an alpha value without guessing a number between 0 and 1.
  • Checking whether two HEX codes are actually different colours.

Not worth it

  • Converting between other colour spaces such as HEX to CMYK. This tool only handles RGB.
  • Checking WCAG contrast readability, which needs a dedicated contrast tool.
  • Converting large colour tables, where CSS custom properties or a colour library is far faster.

How to convert colour codes

  1. Enter a HEX code such as #ff0000 and press HEX to RGB.
  2. Or enter RGB values such as 255, 0, 0 and press RGB to HEX.
  3. Copy the result with the Copy result button.

Frequently asked questions

What is a 3-digit HEX code?

It is shorthand used when both hex digits of a channel match, so #ff0000 can be written #f00. This tool accepts both forms.

How do I add transparency to a colour?

Switch to RGBA, or append an alpha pair to the HEX value: #ff000080 is red at 50% opacity.

Does HEX case matter?

No. #FF0000 and #ff0000 describe the identical colour.