HEX to RGB Converter

Paste a 3 or 6 digit hex code and read off the rgb() value, an rgba() value at the opacity you choose, the HSL equivalent and each channel as a plain number.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Colour

#4f46e5

Values

HEX: #4f46e5
RGB: rgb(79, 70, 229)
RGBA: rgba(79, 70, 229, 1)
HSL: hsl(243, 75%, 59%)
Red: 79
Green: 70
Blue: 229
Luminance: 0.1170

CSS

:root {
  --brand: #4f46e5;
  --brand-rgb: 79 70 229;
  --brand-hsl: 243 75% 59%;
}

Quick answers

How do I convert hex to RGB?: Split the six digits into three pairs and convert each pair from base 16 to decimal: first digit times 16, plus the second digit, with a to f counting as 10 to 15. #4f46e5 splits into 4f, 46 and e5, which are 79, 70 and 229, so the color is rgb(79, 70, 229).
What is #ffffff in RGB?: #ffffff is rgb(255, 255, 255), which is white. Each pair ff equals 15 x 16 + 15 = 255, the highest value a channel can hold. The opposite end, #000000, is rgb(0, 0, 0), black.
How do I convert hex to rgba with 50% opacity?: Convert the hex to its three RGB numbers, then add the opacity as a fourth value between 0 and 1. #4f46e5 at 50% is rgba(79, 70, 229, 0.5). In the tool, set the Alpha slider to 50% and read the RGBA line.
Is #fff the same as #ffffff?: Yes. A three-digit hex code is shorthand in which each digit is doubled, so #fff means #ffffff and #f0c means #ff00cc, which is rgb(255, 0, 204). Only colors whose pairs repeat, such as #aabbcc, can be shortened this way.
What is the RGB for #ff0000, #00ff00 and #0000ff?: #ff0000 is rgb(255, 0, 0), pure red. #00ff00 is rgb(0, 255, 0), which CSS calls lime. #0000ff is rgb(0, 0, 255), pure blue. In each case one channel is at its maximum of 255 and the other two are at 0.
Does hex or RGB give more colors?: Neither. A six-digit hex code and an rgb() value with whole numbers from 0 to 255 describe exactly the same 16,777,216 colors (256 x 256 x 256). They are two ways of writing the same three numbers, so converting between them never changes the color.

How HEX to RGB Converter works

This hex to RGB converter turns a code such as #4f46e5 into rgb(79, 70, 229) as you type. A hex code is three two-digit base-16 numbers, one each for red, green and blue, and every pair converts to a decimal from 0 to 255. Alongside the rgb() value you get rgba() at whatever opacity the Alpha slider is set to, the hsl() form, the red, green and blue channels as separate numbers, and the relative luminance used in contrast checks. A CSS block declares the color as custom properties in hex, bare RGB channels and bare HSL channels. Three-digit shorthand such as #f0c is expanded for you, and the hash is optional.

Hex to RGB color chart

The RGB and HSL values this converter returns for hex codes people look up most often. Names are the CSS color keywords for each code.

Color	Hex code	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%)
Lime	#00ff00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
Blue	#0000ff	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Yellow	#ffff00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
Cyan	#00ffff	rgb(0, 255, 255)	hsl(180, 100%, 50%)
Magenta	#ff00ff	rgb(255, 0, 255)	hsl(300, 100%, 50%)
Gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)
Silver	#c0c0c0	rgb(192, 192, 192)	hsl(0, 0%, 75%)
Maroon	#800000	rgb(128, 0, 0)	hsl(0, 100%, 25%)
Green	#008000	rgb(0, 128, 0)	hsl(120, 100%, 25%)
Navy	#000080	rgb(0, 0, 128)	hsl(240, 100%, 25%)
Teal	#008080	rgb(0, 128, 128)	hsl(180, 100%, 25%)
Purple	#800080	rgb(128, 0, 128)	hsl(300, 100%, 25%)
Orange	#ffa500	rgb(255, 165, 0)	hsl(39, 100%, 50%)
Gold	#ffd700	rgb(255, 215, 0)	hsl(51, 100%, 50%)
Pink	#ffc0cb	rgb(255, 192, 203)	hsl(350, 100%, 88%)
Brown	#a52a2a	rgb(165, 42, 42)	hsl(0, 59%, 41%)
Tomato	#ff6347	rgb(255, 99, 71)	hsl(9, 100%, 64%)
Sky blue	#87ceeb	rgb(135, 206, 235)	hsl(197, 71%, 73%)
Royal blue	#4169e1	rgb(65, 105, 225)	hsl(225, 73%, 57%)

HSL values are rounded to whole degrees and whole percentages, so they are a close description of the color, not an exact one. The RGB values are exact.

How to convert a hex code to RGB by hand

For a code #RRGGBB: Red = (first digit of RR x 16) + second digit of RR. Green and Blue use the GG and BB pairs in the same way. Hex digits 0 to 9 keep their value; a = 10, b = 11, c = 12, d = 13, e = 14, f = 15.

Take #ffd700. The red pair ff is 15 x 16 + 15 = 255. The green pair d7 is 13 x 16 + 7 = 215. The blue pair 00 is 0. The result is rgb(255, 215, 0). For #4f46e5 the pairs are 4f = 4 x 16 + 15 = 79, 46 = 4 x 16 + 6 = 70 and e5 = 14 x 16 + 5 = 229. A three-digit code is expanded first by doubling each digit, so #09f becomes #0099ff and then rgb(0, 153, 255). Case makes no difference: #4F46E5 and #4f46e5 are the same color.

Hex to RGBA: opacity values and their 8-digit hex pairs

The Alpha slider sets the fourth number in rgba(). The last column is the two hex digits that mean the same opacity when written at the end of an 8-digit hex code, worked out as opacity x 255, rounded, in base 16.

Alpha slider	rgba() alpha	Example for #4f46e5	8-digit hex alpha pair
100%	1	rgba(79, 70, 229, 1)	ff
87%	0.87	rgba(79, 70, 229, 0.87)	de
80%	0.8	rgba(79, 70, 229, 0.8)	cc
75%	0.75	rgba(79, 70, 229, 0.75)	bf
50%	0.5	rgba(79, 70, 229, 0.5)	80
33%	0.33	rgba(79, 70, 229, 0.33)	54
25%	0.25	rgba(79, 70, 229, 0.25)	40
20%	0.2	rgba(79, 70, 229, 0.2)	33
10%	0.1	rgba(79, 70, 229, 0.1)	1a
5%	0.05	rgba(79, 70, 229, 0.05)	0d
0%	0	rgba(79, 70, 229, 0)	00

The tool outputs the rgba() form only. It does not write 8-digit hex codes, and it does not accept them as input: a code such as #4f46e580 is rejected as not a valid HEX colour. Enter the first six digits and set the slider instead.

Worked hex to RGB examples

A six-digit brand color

HEX colour #4f46e5, Alpha 100%

RGB rgb(79, 70, 229). RGBA rgba(79, 70, 229, 1). HSL hsl(243, 75%, 59%). Red 79, Green 70, Blue 229. Luminance 0.1170.

Three-digit shorthand, no hash

HEX colour f0c

HEX #ff00cc. RGB rgb(255, 0, 204). HSL hsl(312, 100%, 50%). Luminance 0.2562.

The shorthand is expanded and the hash is added back in the HEX line.

A translucent overlay tint

HEX colour #ff6347, Alpha 40%

RGBA rgba(255, 99, 71, 0.4). The CSS block reads --brand: #ff6347; --brand-rgb: 255 99 71; --brand-hsl: 9 100% 64%;

The custom properties always hold the solid color. The slider only changes the RGBA line.

A light gray from a design file

HEX colour #F5F5F5

HEX #f5f5f5. RGB rgb(245, 245, 245). HSL hsl(0, 0%, 96%). Luminance 0.9131.

Upper case input is accepted and returned in lower case.

What the Luminance figure and the CSS variables are for

Luminance is the WCAG relative luminance of the color, a number from 0 for black to 1 for white. It is not the same as HSL lightness. It weights the channels by how bright they look to the eye: green counts for about 72% of the total, red about 21% and blue about 7%. That is why pure blue #0000ff scores only 0.0722 and pure yellow #ffff00 scores 0.9278, even though both have an HSL lightness of 50%. Contrast ratios between text and background are calculated from this number, so a figure near 0 means the color needs light text on top of it and a figure near 1 means it needs dark text.

The CSS block stores the channels without the rgb() wrapper, as in --brand-rgb: 79 70 229. That form lets you set opacity at the point of use by writing rgb(var(--brand-rgb) / 0.5), so one variable covers every tint and overlay you need. The --brand-hsl line works the same way with hsl().

How to use it

1
Type or paste a code into the HEX colour field. Three or six digits, upper or lower case, with or without the hash.
2
Drag the Alpha slider if you want a see-through color. 50% gives an rgba() alpha of 0.5; leave it at 100% for a solid color.
3
Read the Values panel: HEX, RGB, RGBA and HSL, then Red, Green and Blue as plain numbers, then Luminance.
4
Copy the CSS block, or download it as colour.css, to get the color as --brand, --brand-rgb and --brand-hsl custom properties.

Answers to common questions

Can I enter an 8-digit hex code with transparency?

No. The field accepts three or six hex digits only, and an eight-digit code such as #4f46e580 produces an error. Enter the first six digits, then set the Alpha slider to the opacity you want. The last two digits of an eight-digit code are the alpha: 80 is about 50% and ff is fully opaque.

Do I need to type the # symbol?

No. 4f46e5 and #4f46e5 give the same result, and spaces before or after the code are ignored. The HEX line in the results always shows the code with a hash and in lower case.

Can I type a color name such as red or tomato?

No. Only hex digits are read, so a name returns the not a valid HEX colour message. Use the code instead: red is #ff0000 and tomato is #ff6347. The chart on this page lists the codes for the most common named colors.

What is the difference between rgb() and rgba()?

rgba() carries a fourth value for opacity, from 0 for invisible to 1 for solid. In current CSS the two functions are aliases, so rgb(79 70 229 / 0.5) and rgba(79, 70, 229, 0.5) produce the same half-transparent color. The comma form with rgba() is the one older stylesheets and tools expect.

Why does the alpha only have two decimal places?

The Alpha slider moves in steps of 1%, so the rgba() value is the percentage divided by 100: 33% becomes 0.33 and 5% becomes 0.05. Whole tens drop the trailing zero, so 50% is written 0.5 and 100% is written 1.

Why are the HSL numbers slightly different in another tool?

Rounding. Hue is rounded to a whole degree and saturation and lightness to whole percentages. #ffc0cb works out at hsl(350, 100%, 88%) here, and a tool that keeps decimals will show something like 349.5 and 87.6. Both describe the same color; the RGB numbers are the exact ones to rely on.

Does the conversion happen on a server?

No. The arithmetic runs in your browser as you type, and nothing you enter is sent anywhere.