Hex to RGB Converter

What is a Hex to RGB Converter?

A hex to RGB converter turns a hexadecimal color code into its red, green and blue values — three numbers from 0 to 255 — and works both ways, rebuilding the hex code when you edit the channels. Enter a hex string like #8b5cf6 and the tool returns rgb(139, 92, 246), plus HSL and a live color swatch, all updating instantly in your browser.

What does this tool do?

It bridges the two color formats web pages and design apps use most. Hex codes are compact and copy-paste friendly, while RGB triplets are easier to read and tweak channel by channel. This converter shows both at once: paste a hex value to read RGB, or change a number input to write a new hex code. It also derives HSL and paints a swatch so you can see the color, not just its digits.

How does it work?

The conversion reads the hex string as three base-16 pairs. A hex color has six digits after the #, and each pair of digits encodes one channel from 00 (0) to ff (255).

The formula is:

R = hex[0:2]₁₆, G = hex[2:4]₁₆, B = hex[4:6]₁₆

where each pair is parsed in base 16 (hexadecimal). The steps are:

1. Normalise the string. A 3-digit shorthand like #abc is expanded by doubling each digit to #aabbcc. A leading # is optional and ignored during parsing.
2. Split into three pairs. The six characters become 8b, 5c, f6 for #8b5cf6.
3. Parse each pair as base 16. 8b = 8 times 16 plus 11 = 139, 5c = 92, f6 = 246. That gives R, G, B, each from 0 to 255.

Going the other way, editing the R, G or B number inputs rebuilds the hex string: each channel is converted back to a two-digit hex value and zero-padded, so a value of 5 becomes 05, not 5. The HSL output uses the standard RGB-to-HSL algorithm, producing a hue from 0 to 360 degrees and saturation and lightness as percentages.

Examples

Each example below follows the exact logic the tool uses. The hex is normalised, split into pairs, and each pair is read in base 16.

Example 1 — Toolzent violet #8b5cf6:

1. No shorthand to expand; pairs are 8b, 5c, f6.
2. 8b₁₆ = 139, 5c₁₆ = 92, f6₁₆ = 246.
3. Result: rgb(139, 92, 246), shown as hsl(258, 90%, 66%).

Example 2 — pure red #ff0000:

1. Pairs are ff, 00, 00.
2. ff₁₆ = 255, 00₁₆ = 0, 00₁₆ = 0.
3. Result: rgb(255, 0, 0), shown as hsl(0, 100%, 50%).

Example 3 — the shorthand #abc:

1. Three digits, so each is doubled: #abc becomes #aabbcc.
2. Pairs are aa, bb, cc; aa₁₆ = 170, bb₁₆ = 187, cc₁₆ = 204.
3. Result: rgb(170, 187, 204), shown as hsl(210, 25%, 73%).

Example 4 — the extremes:

#ffffff is rgb(255, 255, 255) (white, every channel at maximum) and #000000 is rgb(0, 0, 0) (black, every channel at zero). These are the two ends of the 0-to-255 range.

Hex to RGB reference chart

These common colors are computed with the same rules as the tool, so you can use them as a quick lookup. RGB values are exact; HSL is rounded to whole numbers.

Color	Hex	RGB	HSL
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
White	#ffffff	rgb(255, 255, 255)	hsl(0, 0%, 100%)
Red	#ff0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Green	#00ff00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
Blue	#0000ff	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Mid gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)
Toolzent violet	#8b5cf6	rgb(139, 92, 246)	hsl(258, 90%, 66%)
Shorthand #abc	#aabbcc	rgb(170, 187, 204)	hsl(210, 25%, 73%)

Notice that #808080 sits at exactly half of 255 on every channel (128), which is why it reads as 50% lightness with zero saturation — a neutral gray.

Common uses

Color conversion sits at the heart of front-end and design work. Typical situations include:

• Front-end developers copying a hex value from a design file and needing rgb() so they can add an alpha channel as rgba() for a semi-transparent overlay or shadow.
• UI and brand designers translating a hex code from a style guide into the RGB sliders inside Figma, Sketch or Photoshop.
• CSS authors who prefer readable RGB channels when fine-tuning a single component, then converting back to a compact hex code for the final stylesheet.
• Students and beginners learning how hexadecimal maps to the 0-to-255 color model and why ff means 255.
• Accessibility checks, where reading the RGB and HSL lightness helps you reason about contrast between text and background.

Tips and common mistakes

A few details trip people up when moving between hex and RGB:

• Hex is a notation, not encryption. A hex color simply writes each 0-to-255 channel in base 16; it hides nothing and is fully reversible. It is not a hash or an encoded secret.
• Zero-padding matters when writing hex. A channel value of 5 must become 05, giving a valid six-digit code; 5 alone would shift the other digits and produce the wrong color.
• Three digits versus six. #abc is shorthand for #aabbcc, not #0a0b0c. Each single digit is doubled, so only colors whose pairs share both digits can be written in shorthand.
• The # and whitespace are cosmetic. A leading # and surrounding spaces do not change the value; the tool reads the same color with or without them.
• RGB uses 0 to 255, HSL uses different units. Do not mix them. Hue is 0 to 360 degrees, while saturation and lightness are percentages, so hsl(0, 100%, 50%) is red, not hsl(0, 255, 128).
• Hex digits are case-insensitive. #FF0000 and #ff0000 are the same red; the letters A to F carry the same value in either case.

Limitations and notes

This tool converts standard 6-digit and 3-digit hex colors into RGB and HSL. It does not parse an 8-digit hex code with a built-in alpha channel (#rrggbbaa); to add transparency, take the RGB result and wrap it as rgba(r, g, b, a) with your own alpha from 0 to 1. Named CSS colors such as tomato or rebeccapurple are not accepted as input — convert from their hex equivalents instead. The HSL values are rounded to whole numbers for display, so re-converting HSL back to hex by hand may land a digit or two away from the original. Everything runs locally: the conversion is plain JavaScript executing in your browser, so the colors you enter are never uploaded, logged or stored, and the tool keeps working offline once the page has loaded.

For more developer utilities, pair this with the base64 encode and decode tool, the UUID generator and the aspect ratio calculator on the dev tools page.