RGB to HEX Converter: Sliders, Opacity and Lists

About the RGB to HEX

The RGB to HEX Converter turns red, green and blue values into the HEX color code used in CSS, design apps and brand guides. Move the sliders, type the numbers, or paste a value such as rgb(255, 87, 51), and the code updates as you go.

It helps when a color comes from somewhere that speaks RGB, like a screenshot tool, a photo editor, a chart library or a developer's code, and you need it as #FF5733 for a stylesheet or a design file. Add opacity and you get the 8-digit HEX form with transparency built in.

Besides the main code you get the lowercase version, the 3-digit short form when one exists, the CSS rgb() value and HSL. A list mode converts many colors at once. Everything runs in your browser.

How to use it

Set the red, green and blue valuesDrag the sliders or type numbers from 0 to 255 in the boxes next to them.
Add opacity if you need itLower the Opacity slider below 100% to get an 8-digit HEX code and an rgba() value.
Or paste a colorPaste rgb(22, 160, 133), 22 160 133, an rgba() value or any other CSS color into "Or paste a color" and the sliders jump to it.
Copy the HEX codeCopy the uppercase code from the result, or the lowercase, short form, rgb() or HSL version from the list below it.
Convert a listPaste one color per line under "Convert a list" to get one HEX code per line.

Key features

Sliders and number boxes

Both stay in sync. Values above 255 or below 0 are clamped, and decimals are rounded to whole numbers.

Opacity to 8-digit HEX

An opacity below 100% adds a fourth pair to the code, like #FF573380 for 50%.

Short form when possible

Shows the 3 or 4-digit shorthand, such as #F53, when every pair repeats, and says so when it is not possible.

Paste almost anything

The paste box and the list read rgb(), rgba(), plain numbers separated by commas or spaces, HEX, HSL and CSS color names.

List conversion

Empty lines are skipped, and lines that cannot be read are marked "invalid:" so you can see what to fix.

Private by design

Nothing leaves your browser. The conversion is simple math done on your device.

Examples

From RGB to HEX

The tool starts at red 255, green 87, blue 51, which gives #FF5733. Each value is written as two base-16 digits:

Channel	Calculation	HEX
Red 255	15 × 16 + 15	FF
Green 87	5 × 16 + 7	57
Blue 51	3 × 16 + 3	33

Values below 16 get a leading zero: 0 becomes 00 and 13 becomes 0D, so every code has exactly six digits.

Opacity

Keep 255, 87, 51 and lower the opacity:

Opacity	HEX	CSS rgb()
100%	`#FF5733`	`rgb(255, 87, 51)`
90%	`#FF5733E6`	`rgba(255, 87, 51, 0.9)`
75%	`#FF5733BF`	`rgba(255, 87, 51, 0.75)`
50%	`#FF573380`	`rgba(255, 87, 51, 0.5)`
25%	`#FF573340`	`rgba(255, 87, 51, 0.25)`
10%	`#FF57331A`	`rgba(255, 87, 51, 0.1)`

The last pair is the opacity times 255, rounded: 50% of 255 is 127.5, which rounds to 128, or 80 in HEX.

The short form

RGB	HEX	Short form
255, 85, 51	`#FF5533`	`#F53`
17, 34, 51	`#112233`	`#123`
22, 160, 133	`#16A085`	Not possible for this color

Pasting and lists

Paste hsl(227 100% 58%) and the sliders move to 41, 87, 255, giving #2957FF. Because HSL percentages are rounded, that is close to, but not exactly, #2B59FF.

In the list, these lines:

255, 87, 51
rgb(43, 89, 255)
22 160 133
rgba(198, 242, 78, 0.5)
tomato
256, 0, 0

become #FF5733, #2B59FF, #16A085, #C6F24E80, #FF6347 and invalid: 256, 0, 0, because 256 is outside the 0 to 255 range.

Tips

Copy RGB values straight from your source, including the rgb( ) around them. The paste box and the list both accept the whole value.
Use the lowercase version if your team or linter prefers it. #ff5733 and #FF5733 are the same color.
Only use the short form when it exists. Rounding a color to the nearest shorthand changes it, which shows on large areas and brand colors.
For transparent colors in CSS, an 8-digit HEX and rgba() are equivalent. Pick whichever your codebase already uses.
Going the other way? The HEX to RGB converter turns a code back into rgb(), percentages and 0 to 1 values.

Common mistakes and limits

Typing values above 255Each channel goes from 0 to 255. Larger numbers are clamped to 255 by the sliders, and the list marks plain numbers above 255 as invalid.
Using percentages as 0 to 255 valuesA red of 50% is about 128, not 50. Paste rgb(50%, 0%, 0%) as a whole and the tool converts it for you.
Forgetting that HEX opacity is not a percentageIn #FF573380, the 80 is HEX for 128 out of 255, which is about 50% opacity.
Putting the alpha pair firstCSS reads #RRGGBBAA. Android and some other platforms use #AARRGGBB, so move the last pair to the front for those.
Expecting decimals to surviveHEX has no decimals, so 12.6 is rounded to 13 (0D).

Frequently asked questions

How do I convert RGB to HEX by hand?

Divide each value by 16. The whole number is the first HEX digit and the remainder is the second, using A to F for 10 to 15. For 87, that is 5 remainder 7, so 57.

What is an 8-digit HEX code?

A HEX code with opacity. The first six digits are the color, and the last two are the alpha from 00 (transparent) to FF (opaque).

When can a HEX code be shortened?

When each pair has two identical digits, like #FF5533. The short form #F53 means exactly the same color. #FF5733 has no short form.

Which input formats does the paste box accept?

rgb() and rgba(), plain numbers like 255, 87, 51 or 255 87 51, HEX codes, hsl(), and any other color CSS understands, including names like tomato.

How is opacity turned into the last two digits?

The opacity is multiplied by 255, rounded and written in HEX. 75% gives 191.25, which rounds to 191, or BF.

Can I convert a whole palette at once?

Yes. Paste one color per line under "Convert a list". Lines can use different formats, and the results keep the same order, one HEX code per line.

Why does my HSL value not convert back to the same HEX?

HSL is shown with whole numbers, which loses a little precision. Converting it back can be one or two steps off in each channel.

Is HEX better than RGB?

Neither is better; they describe the same colors. HEX is shorter to share, RGB is easier to read and adjust, and both work everywhere in CSS.

Is anything I enter stored?

No. The color codes never leave your browser, and nothing is kept after you close the page.

RGB to HEX

Convert a list