RGB is how most colour pickers, canvas drawing APIs and design tools represent colour internally, as three or four separate numbers. HEX packs the same numbers into a compact string that is easier to paste into a stylesheet, a design token file or a chat message. Neither format is more correct than the other, they are just different notations for an identical point in sRGB colour space, and this tool moves between them without any rounding beyond what base 16 requires.
The conversion happens entirely on your device. Moving a slider runs a few lines of arithmetic in the browser tab you already have open, so there is no server call, no queue and no limit on how many colours you convert in a session.
When you need an rgb to hex converter
Canvas drawing code, WebGL uniforms, chart libraries and many JavaScript colour utilities all report or accept colour as separate red, green and blue numbers. The moment you need to hand that colour to a designer, paste it into a CSS file, or store it in a design token, hex is usually the more convenient form. An rgb to hex converter saves you converting three separate decimal numbers to base 16 by hand and concatenating them correctly, which is easy to get subtly wrong under time pressure.
It is equally useful in reverse direction thinking: if you already know roughly what RGB mix you want, for example more red and less blue than a starting colour, the rgb color picker sliders let you nudge each channel and watch the hex code update live, rather than guessing a hex string and checking whether it looks right.
- Turning a colour reported by a JavaScript debugger, canvas API or design tool into a hex code for a stylesheet.
- Fine tuning a colour by eye with sliders and reading off the resulting hex value once it looks right.
- Converting an RGBA colour with transparency into an 8 digit hex code that preserves the alpha channel.
- Checking that two tools reporting the same colour in different formats actually agree.
Converting RGBA to HEX with alpha
When the alpha channel is less than fully opaque, converting rgba to hex with alpha needs one extra step beyond the three colour channels. Alpha in RGBA is a fraction between 0 and 1, while hex alpha is a two digit hexadecimal number from 00 to ff. The conversion multiplies the fraction by 255, rounds to the nearest whole number, and writes that as a hex pair appended to the end of the six digit colour, producing an 8 digit hex code.
Not every context that accepts hex colour supports the 8 digit alpha form. Modern CSS, modern browsers and most current design tools do, but some older image formats and some legacy software only understand a plain 6 digit hex code with no transparency. If your alpha slider sits at 100 percent, the hex output stays a clean 6 digits automatically, since there is nothing to express.
Reading the sliders and the swatch
Each of the red, green and blue sliders runs from 0, meaning that channel contributes nothing, to 255, meaning it contributes at full strength. A pure red is 255, 0, 0, pure white is 255, 255, 255 and pure black is 0, 0, 0, everything else is a mixture between those extremes. The alpha slider sits alongside them and runs from 0, fully transparent, to 100 percent, fully opaque.
The swatch above the sliders is drawn on a checkerboard background specifically so that partial transparency is visible rather than being flattened against a solid colour, since a translucent red over white looks very different from the same translucent red over black.
How this rgb to hex converter works under the hood
Each channel value is an integer from 0 to 255, and every integer in that range maps to exactly one two digit hex pair, since 255 is ff in base 16 and 0 is 00. The tool converts each channel with toString(16), pads any single digit result with a leading zero, and concatenates the three or four pairs into one hex string prefixed with a hash character.
Because the mapping between a 0 to 255 integer and its hex pair is exact and reversible, this conversion never loses precision. The same is not true of every colour operation, blending two colours or converting into a narrower colour space can lose information, but reading a decimal channel value as hexadecimal is simple radix conversion with an exact answer every time.
| Colour | RGB | HEX |
|---|---|---|
| Pure red | 255, 0, 0 | #ff0000 |
| Pure white | 255, 255, 255 | #ffffff |
| Pure black | 0, 0, 0 | #000000 |
| 50% grey | 128, 128, 128 | #808080 |
| Half transparent red | 255, 0, 0, 0.5 | #ff000080 |
How to convert RGB to HEX
- 1
Set the red, green and blue values
Drag each slider or type an exact number from 0 to 255 for red, green and blue.
- 2
Adjust alpha if needed
Move the alpha slider below 100 percent for a translucent colour. Leave it at 100 for a fully opaque one.
- 3
Watch the swatch and hex code update
The live swatch and the hex value below it update instantly as you move any slider.
- 4
Copy the hex code
Press copy next to the hex value, or copy the matching HSL output if that is the format you need.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the rgb to hex converter.
Convert each of the red, green and blue numbers, which range from 0 to 255, into a two digit hexadecimal pair, then join the three pairs together with a hash character in front. For example, 59 in decimal is 3b in hexadecimal, so an RGB value of 59, 130, 246 becomes the hex code 3b82f6. Doing this for three channels by hand is where mistakes creep in, which is exactly what this rgb to hex converter automates.
No. Every integer from 0 to 255 has exactly one two digit hexadecimal representation, so the conversion is a change of notation rather than an approximation. Converting back from hex to RGB and forward again returns the identical numbers every time.
An alpha of 0 percent produces the hex pair 00 appended to the colour, for example ff000000 for fully transparent red. The colour information in the first six digits is preserved even though the alpha makes it invisible, so raising alpha back up later restores the exact original colour.
Yes. Each slider has a paired number so you can enter a precise value directly, which is faster than dragging when you already know the exact RGB values you want, for example when matching a colour reported by a design tool or a debugging console.
The output only includes an alpha pair when the alpha slider is below 100 percent. A fully opaque colour is written as a clean 6 digit hex code, since appending ff for alpha would be redundant and some older software does not accept the 8 digit form.
Use the sliders rather than typing numbers if you are matching a colour visually against a reference image or swatch. Moving red, green and blue while watching the live preview gets you to a convincing match faster than guessing decimal numbers, and the hex value below the swatch updates in real time so you always know the exact code you have landed on.
Not anymore. Current CSS treats rgb() and rgba() as aliases, both accept an optional alpha value, and browsers released in the last several years support either spelling identically. Older codebases sometimes still prefer rgba() for readability when transparency is involved, which is why this tool shows both forms.