utilyfe

RGB to Hex Converter

Type three numbers and get the hex code, plus the short form and the alpha digits when they apply.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Three numbers is enough: a fourth is opacity. Full values like rgb(255 87 51 / 50%) and hsl() work too.

Hex
#ff5733
RGB
rgb(255, 87, 51)
RGBA
rgba(255, 87, 51, 1)
HSL
hsl(11, 100%, 60%)
Modern CSS
rgb(255 87 51)
Alpha (0-1)
1
Also try:Hex to RGB ConverterColor Contrast CheckerCSS Gradient Generator

How to use the RGB to Hex Converter

  1. 1Type the red, green and blue values. "255, 87, 51" is enough, and spaces or commas both work.
  2. 2Add a fourth value for opacity if you need it, as a decimal like 0.5 or a percentage like 50%.
  3. 3Or paste a whole value you already have, such as rgb(255 87 51 / 50%) or an hsl() colour.
  4. 4Press Copy next to the hex code, or any other format listed.

From three numbers to one code

RGB describes a colour as three amounts of light (red, green and blue) each from 0 to 255. A hex code says the same thing more compactly by writing each of those numbers in base 16, where two digits cover exactly 0 to 255. So rgb(255, 87, 51) and #ff5733 are not merely similar, they’re the same colour written two ways, and converting between them loses nothing at all.

Doing it by hand

Take each channel separately. Divide the number by 16: the whole part is the first digit and the remainder is the second, with 10 to 15 written as a to f. For 87, that’s 5 remainder 7, so 57. For 51, it’s 3 remainder 3, so 33. For 255, it’s 15 remainder 15, so ff. Write the three pairs in order after a # and you have the code. The only thing that catches people out is a channel below 16, which still needs both digits: 5 becomes 05, not 5.

The short form, and when it isn’t available

A 3-digit code is shorthand for a 6-digit one where each digit is doubled: #0a7 means #00aa77. That makes it available for only a small fraction of colours: both digits of every channel have to match. #ffaa77 shortens to #fa7; #ff5733 can’t shorten at all, because 57 isn’t a doubled digit. The tool shows the short form only when it’s genuinely equivalent, so there’s no risk of shipping a colour that’s slightly off.

Adding opacity

Two more digits on the end of a hex code carry alpha, on the same 0-to-255 scale as the colour channels. To work one out by hand, multiply the decimal alpha by 255 and convert: 0.5 becomes 128, which is 80, so half-transparent #ff5733 is #ff573380. A few are worth memorising: ff solid, cc 80%, bf 75%, 80 roughly half, 40 a quarter, 00 invisible. Note that CSS puts alpha last while Android puts it first, so the same eight digits can mean different colours on different platforms.

Out-of-range and fractional values

Channels outside 0 to 255 are clamped rather than rejected, matching what a browser does with an impossible value: 300 becomes ff and −20 becomes 00. Fractional channels, which can appear when a colour has been scaled or blended, are rounded to the nearest whole number, because a hex pair has no way to store a fraction. The tool shows you the result of those adjustments rather than hiding them, so you can see whether the colour you got is the colour you meant.

Converted on your device

There’s no server involved. The conversion is a few lines of arithmetic that run in the page as you type, so nothing you enter is sent, stored or logged anywhere.

Questions

How do I convert RGB to hex by hand?
Convert each of the three numbers to base 16 on its own, and write each as two digits. For rgb(255, 87, 51): 255 is ff, 87 is 5×16 + 7 so it's 57, and 51 is 3×16 + 3 so it's 33. Join them with a # in front and you have #ff5733. Any value below 16 needs a leading zero, so 5 is 05, not 5.
What are the shortest and longest hex codes?
Three digits is the shortest: #f53 means #ff5533, with each digit doubled. Six digits is the normal form. Eight adds opacity, as in #ff573380. There's also a rare four-digit form, which is the 3-digit shorthand plus one opacity digit.
When can I use the 3-digit shorthand?
Only when both digits of all three channels are the same: #ffaa77 can shrink to #fa7, but #ff5733 can't, because 57 isn't a repeated digit. The tool shows the short form when the colour has one and says nothing when it doesn't, so you never get a colour that's subtly wrong.
How do I write opacity as hex?
Multiply the 0-to-1 alpha by 255 and convert that to two hex digits, then put them at the end: 0.5 × 255 is about 128, which is 80, giving #ff573380. Useful values to recognise are ff for solid, cc for 80%, 80 for about half, 40 for a quarter and 00 for invisible.
Do I have to type rgb() or can I just type the numbers?
Just the numbers is fine. "255, 87, 51" and "255 87 51" both work, as does a full rgb() or rgba() value if that's what you have in your clipboard. The tool also reads hsl(), so it converts in every direction rather than only one.
What happens if a number is outside 0 to 255?
It's clamped to the nearest valid value, which is exactly what a browser does with an out-of-range channel. Type 300 and you get ff, type -20 and you get 00. Fractional numbers are rounded to the nearest whole one, since a hex pair can only hold whole numbers.
Why does my design tool show different numbers?
Design tools often show HSB or HSV, which look similar to HSL but aren't the same, and some show colours in a wider colour space than sRGB. If the numbers don't match, copy the hex code from the design tool instead of retyping the channels, since hex is unambiguous.
Is hex better than rgb() in CSS?
Neither is better; they describe the same colours. Hex is compact and is what most design tools hand you. rgb() is easier to read at a glance, and its modern form lets you keep the three numbers in a CSS variable and change opacity where it's used. Pick one and use it consistently.
Is my colour sent anywhere?
No. The conversion is arithmetic that runs inside this browser tab. Nothing is uploaded, logged or stored.