QuickWand
← All guides

How to Convert HEX to RGB (and RGB to HEX) for CSS

Your design file hands you #3B82F6, but the CSS you are writing needs rgba() so you can fade the color to 50% opacity. Or you have an rgb()value from a screenshot tool and need the HEX to paste into a style guide. Either way, you need to convert — and doing the base-16 math in your head is no fun.

A color converter does it exactly, both directions. Here is how.

How to convert HEX to RGB (and back) for CSS

QuickWand's free color converter runs in your browser — type a color and read the result, with nothing sent to a server.

  1. Open the color converter.
  2. Enter your color in any format — a HEX value like #3B82F6, an rgb(59, 130, 246) value, or an HSL value.
  3. Read the equivalent values in the other formats, updated as you type.
  4. Copy the format you need and paste it into your CSS or design tool.

How HEX and RGB actually relate

The conversion feels like magic but it is just arithmetic. A HEX color is RGB written in base 16. The six digits are three pairs, one each for red, green, and blue, and each pair is a number from 00 to FF — which is 0 to 255 in everyday base-10 numbers.

Take #3B82F6:

  • 3B → 59 (red)
  • 82 → 130 (green)
  • F6 → 246 (blue)

So #3B82F6 is exactly rgb(59, 130, 246). Because it is a direct base conversion, it is lossless in both directions — HEX to RGB and RGB to HEX describe the identical color with no rounding.

Where HSL comes in

HSL describes the same color as hue, saturation, and lightnessinstead of red/green/blue channels. It does not give you a different color — it gives you a more intuitive set of dials. Want a slightly darker shade of a brand color? Drop the lightness a few percent. The converter shows HSL alongside HEX and RGB so you can switch to whichever is easiest for the job.

When to reach for rgb() or rgba()

HEX is compact and great for solid colors. Reach for rgb() or rgba() when you need transparency: rgba(59, 130, 246, 0.5)is the same blue at half opacity — perfect for overlays, hover tints, and subtle backgrounds. Modern CSS also accepts 8-digit HEX like #3B82F680 for alpha, but the rgba() form is usually easier to read and tweak.

If you are also naming the CSS classes or variables for these colors, the case converter turns a label like Primary Blue into a tidy primary-blue kebab-case class name.

Type a color in any format, copy the one you need — an exact, lossless conversion every time.

Frequently asked questions

How do you convert a HEX color to RGB?
A HEX color is just RGB written in base 16. Split the six digits into three pairs — red, green, blue — and convert each pair from hexadecimal to a decimal number from 0 to 255. For example #3B82F6: 3B = 59, 82 = 130, F6 = 246, giving rgb(59, 130, 246). It is an exact, lossless conversion in both directions.
What is the difference between HEX, RGB, and HSL?
They are three ways to describe the same color. HEX (#3B82F6) and RGB (rgb(59,130,246)) both specify red, green, and blue channels — HEX in base 16, RGB in base 10 — so they are interchangeable. HSL (hue, saturation, lightness) describes color differently, which makes it easier to create a lighter or darker shade by hand.
When should I use rgb() or rgba() instead of HEX in CSS?
Use rgb() or rgba() when you want to add transparency with an alpha value, like rgba(59, 130, 246, 0.5) for 50% opacity. RGB values are also easier to tweak programmatically. Modern CSS also supports 8-digit HEX (#3B82F680) for alpha, but rgba() is more readable.
Is the color converter free and private?
Yes. It is free with no sign-up and runs entirely in your browser. Nothing is uploaded to a server — you just type a color and read the converted values.

Free tool

Color Converter

Pick a color or paste a value and convert instantly between HEX, RGB and HSL, with a live preview.

Try Color Converter— free →