How to Convert a HEX Color to RGB (and HSL)

Q: How do I convert a HEX color to RGB by hand?

Drop the # and split the six hex digits into three pairs (RR, GG, BB). Convert each pair from base-16 to base-10. For example, #FF5733 becomes the pairs FF, 57, 33, which are 255, 87, and 51 in decimal, giving rgb(255, 87, 51).

Q: Can I expand a 3-digit hex shorthand to 6 digits?

Yes. Each digit is doubled: #F53 expands to #FF5533. So #F53 means red FF (255), green 55 (85), and blue 33 (51). The 3-digit form can only represent colors where each channel is a repeated digit.

To convert a HEX color to RGB, drop the leading #, split the six characters into three pairs (red, green, blue), and convert each pair from base-16 (hexadecimal) to base-10 (decimal). For example, #FF5733 becomes rgb(255, 87, 51). The fastest way to do it without doing math in your head is a free in-browser Color Converter — paste the hex code, copy the RGB result. Below is exactly how the conversion works, with a worked example, the 3-digit shorthand rule, 8-digit alpha hex, and when to use each format in CSS.

What HEX, RGB, and HSL Actually Mean

All three notations describe the same thing — a color on a screen — but they slice it up differently.

A HEX color is a base-16 representation of a color’s red, green, and blue components. It starts with # and is usually six characters long, where each pair of characters encodes one channel from 00 to FF. Hexadecimal uses sixteen digits: 0-9 then A-F, where A = 10, B = 11, C = 12, D = 13, E = 14, and F = 15. So FF is the highest value (255) and 00 is the lowest (0).

An RGB color describes the same three channels in plain decimal, from 0 to 255. rgb(255, 87, 51) means 255 parts red, 87 parts green, 51 parts blue. RGBA adds a fourth value for alpha (opacity), expressed as a decimal from 0 (fully transparent) to 1 (fully opaque): rgba(255, 87, 51, 0.5).

An HSL color takes a completely different approach. Instead of mixing primaries, it describes a color by Hue (an angle from 0 to 360 degrees on the color wheel), Saturation (0%–100%, how vivid it is), and Lightness (0%–100%, from black through the color to white). HSL is the same color, just expressed in a way that is far more intuitive to tweak by hand.

Here is the same color in every notation:

Notation	Value	Channel meaning
HEX	`#FF5733`	RR=FF, GG=57, BB=33
HEX shorthand	(not possible here)	only works when each pair repeats
RGB	`rgb(255, 87, 51)`	255 red, 87 green, 51 blue
RGBA	`rgba(255, 87, 51, 1)`	+ alpha 1 (fully opaque)
HSL	`hsl(11, 100%, 60%)`	hue 11°, sat 100%, light 60%
8-digit HEX	`#FF5733FF`	+ alpha FF (255 = fully opaque)

Why You Need to Convert HEX to RGB

If hex and RGB describe the same color, why convert at all? Because different contexts demand different formats:

Opacity (alpha). Classic 6-digit hex has no opacity channel. The moment you need a semi-transparent color in older codebases, you reach for rgba(). Converting your brand hex to RGB lets you add an alpha value: rgba(255, 87, 51, 0.3).
CSS variables and calculations. When you store color channels as separate numbers (a common technique: --accent: 255, 87, 51;), you can reuse them with any opacity via rgb(var(--accent) / 0.5). That requires the RGB values, not the hex string.
Canvas, WebGL, and graphics code. Many drawing APIs and shaders expect numeric channels — sometimes 0–255, sometimes normalized to 0.0–1.0. You divide each RGB value by 255 to normalize.
Design-to-code handoff. A designer hands you #FF5733; the API, JSON theme file, or native mobile code wants integer RGB. You translate.
Accessibility math. Contrast-ratio calculations work on RGB (or linearized RGB) values, not hex strings.

How to Convert HEX to RGB: The Manual Math

Each hex pair is a two-digit base-16 number. To turn it into decimal, you multiply the first digit by 16 and add the second digit:

decimal = (first digit × 16) + (second digit)

Remember to translate letters first: A=10, B=11, C=12, D=13, E=14, F=15.

Worked Example: Convert #FF5733

Step 1 — Drop the hash and split into pairs.

#FF5733  →  FF  57  33
            ^^  ^^  ^^
            R   G   B

Step 2 — Convert the red pair FF.

F = 15, F = 15
(15 × 16) + 15 = 240 + 15 = 255

Step 3 — Convert the green pair 57.

5 = 5, 7 = 7
(5 × 16) + 7 = 80 + 7 = 87

Step 4 — Convert the blue pair 33.

3 = 3, 3 = 3
(3 × 16) + 3 = 48 + 3 = 51

Step 5 — Assemble the result.

#FF5733  →  rgb(255, 87, 51)

That’s the whole algorithm. A few more conversions so you can spot-check your own work:

HEX	Pairs (R, G, B)	Math	RGB
`#000000`	00, 00, 00	0, 0, 0	`rgb(0, 0, 0)` (black)
`#FFFFFF`	FF, FF, FF	255, 255, 255	`rgb(255, 255, 255)` (white)
`#FF0000`	FF, 00, 00	255, 0, 0	`rgb(255, 0, 0)` (pure red)
`#1E90FF`	1E, 90, FF	30, 144, 255	`rgb(30, 144, 255)` (dodger blue)
`#808080`	80, 80, 80	128, 128, 128	`rgb(128, 128, 128)` (gray)
`#3CB371`	3C, B3, 71	60, 179, 113	`rgb(60, 179, 113)` (sea green)

Working backward (RGB → HEX) reverses the process: divide each decimal value by 16 for the first hex digit and take the remainder for the second, then map 10–15 back to A–F. 87 ÷ 16 = 5 remainder 7, so green is 57.

The 3-Digit HEX Shorthand

You’ll often see short hex codes like #F53 or #0AF. These are a CSS shorthand where each single digit is doubled to form the full 6-digit value:

#F53  →  #FF5533
#0AF  →  #00AAFF
#FFF  →  #FFFFFF  (white)
#000  →  #000000  (black)

So to convert #F53 to RGB, expand it first, then do the normal math:

#F53  →  FF 55 33  →  rgb(255, 85, 51)

The catch: shorthand can only represent colors where each channel is a repeated digit (00, 11, 22 … FF). That’s just 4,096 of the 16.7 million colors full hex can express. You cannot shorten #FF5733, because 57 and 33 aren’t repeated digits. Modern CSS also supports a 4-digit shorthand (#RGBA) that expands the same way and includes alpha — #F53C becomes #FF5533CC.

8-Digit HEX: Adding Alpha

CSS Color Module Level 4 added an alpha channel to hex notation. An 8-digit hex is #RRGGBBAA, where the last pair is opacity from 00 (transparent) to FF (opaque), using the exact same base-16 math.

To get the decimal alpha out of an 8-digit hex, convert the last pair and divide by 255:

#FF573380  →  alpha pair = 80
80 in decimal = (8 × 16) + 0 = 128
128 / 255 ≈ 0.50

#FF573380  →  rgba(255, 87, 51, 0.5)

Some common alpha pairs are worth memorizing:

Hex alpha	Decimal	Opacity
`FF`	255	100% (opaque)
`BF`	191	~75%
`80`	128	~50%
`40`	64	~25%
`1A`	26	~10%
`00`	0	0% (transparent)

Note that 80 is 128, not 127.5, so #…80 is approximately 50% — alpha can’t land on an exact 0.5 because 255 is an odd maximum. If you need precise opacity, rgba() with a decimal is more exact than 8-digit hex.

How to Convert HEX to RGB Online (Fastest Way)

Doing the math by hand is great for understanding, but tedious in practice. The free Color Converter handles HEX, RGB, HSL, and alpha in one place — and like every tool on FindPicked, it runs entirely in your browser, so nothing you paste is ever uploaded to a server.

Step 1: Open the Color Converter

Go to the Color Converter. There’s no signup, no install, and nothing to configure.

Step 2: Paste Your HEX Code

Type or paste your hex value — with or without the leading #, and in 3-, 6-, or 8-digit form. The tool normalizes it for you.

Step 3: Read Off Every Format

The converter shows the equivalent RGB, RGBA, and HSL values side by side, plus a live color swatch so you can confirm you’re looking at the right color before you ship it.

Step 4: Copy the Format You Need

Click to copy the exact string — rgb(...), rgba(...), or hsl(...) — straight into your stylesheet, theme file, or design token. Done.

Common Mistakes and Pitfalls

Forgetting that hex is base-16. The single most common error is treating FF as 99 or 100. It’s 255. A hex digit only ever ranges 0–15, and a pair ranges 0–255.
Mixing up channel order. Hex and standard RGB are both red-green-blue. But some graphics APIs and file formats (notably 32-bit ARGB integers and certain Windows/GDI contexts) use a different byte order, so 0xFF5733 in raw code is not always #FF5733. Always confirm whether a library expects RGB or BGR/ARGB before pasting numbers.
Assuming #…80 is exactly 50% opacity. As shown above, 80 is 128/255 ≈ 0.502, not 0.5. Close, but not identical.
Over-expanding shorthand. #F53 is #FF5533, not #F05030 or #0F0503. Double each digit, don’t pad with zeros.
Dropping leading zeros. #0A0A0A is a valid dark gray; if you accidentally write #AAA thinking it’s the same, you get a much lighter gray (rgb(170, 170, 170)).
Letter case confusion. Hex is case-insensitive: #ff5733, #FF5733, and #Ff5733 are identical colors. Pick one style for consistency, but none of them is “wrong.”

When to Use Each Format in CSS

Use case	Best format	Why
Solid brand colors, design tokens	HEX (`#FF5733`)	Compact, copy-paste friendly, what designers hand you
Any transparency, overlays, shadows	RGBA or 8-digit HEX	Only these carry an alpha channel
Tweaking shades by hand, theming	HSL	Adjust lightness/saturation without recalculating channels
Programmatic color math, canvas/WebGL	RGB integers (or 0.0–1.0)	Numeric channels are easy to compute on
Channel reuse with variable opacity	RGB channels in a CSS variable	`rgb(var(--accent) / 0.5)` reuses one definition

A practical rule: store colors as hex (or HSL for theming), and convert to RGB/RGBA at the moment you need opacity or numeric math. Whenever you need a quick translation, the Color Converter does it instantly without leaving your browser.

Color conversion is one of those everyday tasks that’s easy to get slightly wrong and faster to do with a dedicated tool. If you found this useful, these other practical guides cover similar quick-conversion and formatting jobs:

How to Format JSON Online — pretty-print and validate JSON in your browser.
How to Convert CSV to JSON — turn spreadsheet exports into structured data.
How to Generate a Strong Password — create secure passwords locally, nothing uploaded.
How to Check Regex Online — test and debug regular expressions interactively.

Frequently Asked Questions

How do I convert a HEX color to RGB by hand?

Drop the # and split the six hex digits into three pairs (RR, GG, BB). Convert each pair from base-16 to base-10. For example, #FF5733 becomes the pairs FF, 57, 33, which are 255, 87, and 51 in decimal, giving rgb(255, 87, 51).

What is an 8-digit hex color?

An 8-digit hex color adds a fourth pair for the alpha (opacity) channel: #RRGGBBAA. For example, #FF573380 is rgb(255, 87, 51) at roughly 50% opacity, because 80 in hex equals 128 in decimal, and 128 / 255 is about 0.5.

Can I expand a 3-digit hex shorthand to 6 digits?

Yes. Each digit is doubled: #F53 expands to #FF5533. So #F53 means red FF (255), green 55 (85), and blue 33 (51). The 3-digit form can only represent colors where each channel is a repeated digit.