RGB to HEX Converter – Sliders, Live Preview and Steps
RGB to Hex Studio
Transform color channels into dynamic hex codes with live layout previews
Quick answer
To convert RGB to HEX, change each channel (0–255) into a two-digit hexadecimal number and join them after a # sign. For rgb(20, 184, 166): 20 = 14, 184 = B8, 166 = A6, so the hex code is #14B8A6. Values below 16 get a leading zero, so 5 becomes 05.
Our free rgb to hex converter lets you drag a slider or type a number for each channel and watch the color update live. One click gives you the hex code, a Copy button and the base-16 working for each channel. It is handy for CSS, HTML emails, design handoffs and matching brand colors.
How RGB to HEX Conversion Works
Screens mix red, green and blue light. Each channel has 256 levels, from 0 (off) to 255 (full). Hexadecimal can write any of those 256 levels in just two characters (00 to FF), so a whole color fits in six characters. To convert one channel, divide by 16: the whole number is the first hex digit and the remainder is the second.
| Channel | Decimal | ÷ 16 | Hex |
|---|---|---|---|
| Red | 20 | 1 remainder 4 | 14 |
| Green | 184 | 11 (B) remainder 8 | B8 |
| Blue | 166 | 10 (A) remainder 6 | A6 |
How to Use the RGB to HEX Converter
Step 1: Set the Red, Green and Blue Values
Drag each slider or type a value from 0 to 255 in the box next to it. The slider and the box stay in sync. We set Red 20, Green 184 and Blue 166.
Step 2: Check the Live Swatch Preview
The Real-Time Swatch Matrix Preview shows the color as you adjust it, along with its rgb() value. Tweak the channels until the swatch looks right.
Step 3: Click Convert Channels
Press Convert Channels to run the rgb to hex conversion. Use Reset to return to the default color.
Step 4: Copy the HEX Code
The result shows #14B8A6 with a Copy Code button. The Base-16 Translation Steps list each channel's hex value so you can check the rgb to hex maths.
Common RGB to HEX Values
| Color | RGB | HEX |
|---|---|---|
| Black | 0, 0, 0 | #000000 |
| White | 255, 255, 255 | #FFFFFF |
| Red | 255, 0, 0 | #FF0000 |
| Green | 0, 255, 0 | #00FF00 |
| Blue | 0, 0, 255 | #0000FF |
| Gray | 128, 128, 128 | #808080 |
| Royal blue | 37, 99, 235 | #2563EB |
| Teal | 20, 184, 166 | #14B8A6 |
| Orange red | 255, 87, 51 | #FF5733 |
| Amber | 245, 158, 11 | #F59E0B |
Decimal to Hex Quick Reference
| Decimal | Hex | Decimal | Hex |
|---|---|---|---|
| 0 | 00 | 128 | 80 |
| 10 | 0A | 160 | A0 |
| 16 | 10 | 192 | C0 |
| 32 | 20 | 200 | C8 |
| 64 | 40 | 224 | E0 |
| 100 | 64 | 255 | FF |
Common Mistakes to Avoid
- Dropping the leading zero. rgb(5, 10, 15) is #050A0F, not #5AF.
- Using values above 255. Each channel only goes from 0 to 255.
- Swapping channel order. The order is always red, green, blue.
- Forgetting transparency. A plain rgb to hex result has no alpha. For see-through colors, use rgba() in CSS.
To go from a hex code back to RGB or RGBA, use our HEX to RGB converter.
Frequently Asked Questions
How do I convert RGB to HEX?
Convert each channel from decimal to a two-digit hex number and join them: rgb(37, 99, 235) becomes 25, 63 and EB, so #2563EB.
What is rgb(255, 255, 255) in hex?
It is #FFFFFF, pure white.
What is rgb(0, 0, 0) in hex?
It is #000000, pure black.
Why do some hex codes have only 3 digits?
When each pair has two identical digits, CSS lets you shorten it. #FFFFFF can be written #FFF.
Can I type values instead of using sliders?
Yes. Type any number from 0 to 255 in the box beside each slider and the slider moves to match.
Is this rgb to hex converter free?
Yes. It is free, needs no sign-up, and runs entirely in your browser.