RGB to Hex Converter
RGB to Hex Converter. Enter your RGB Input (R, G, B) values and the RGB to Hex Converter instantly combines them into Hex Output. Use the binary to text converter to decode a string of space- or line-separated binary codes back into a readable message in seconds.
Turn any shade from a mockup into something your stylesheet understands: this RGB to hex converter reads red, green and blue levels from 0 to 255 and hands back the hex color code in the same moment. Whether you are matching a brand swatch for a CSS rule or checking what a photo editor reported, you get a six-character result you can paste anywhere. Keep reading to see exactly how the math works, so you can verify every answer yourself.
How Your RGB to Hex Converter Builds a Hex Color Code
Every screen pixel mixes three color channels: red, green and blue. Each one carries a whole number from 0 (none of that light) to 255 (full strength), which is why the RGB color model needs exactly three numbers per shade. Hex is just another way of writing those numbers, using base sixteen, so the digits run 0-9 and then A-F. A hexadecimal string such as #D65C3D therefore holds the same information as rgb(214, 92, 61), nothing more and nothing less.
Because each level tops out at 255, it always fits into a two-digit hexadecimal number between 00 and FF. Stack the three results in red, green, blue order and put a hash sign in front, and the layout is #RRGGBB. Each hex pair stands for one light, and the pairs never change order. Browsers read them as sRGB values, the standard space for the web, so a swatch written in either notation looks identical on screen. The tailwind to hex converter looks up the exact hex value behind any Tailwind CSS color class, like blue-500.
What Each Hex Value Represents
Read #D65C3D left to right: D6 is the red level, 5C is the green level, and 3D is the blue level. A higher pair means more of that light, so FF is full strength and 00 is off. When all three pairs match, as in #777777, the result is a neutral gray; equal low pairs approach black and equal high pairs approach white. That single pattern explains most of what you see in a stylesheet palette.
RGB to Hex Color Converter Formula and Worked Example
The formula behind every rgb to hex conversion is a pair of integer steps repeated for each light. Divide the level by 16 to get the left digit, and keep the remainder as the right digit: The hex to cmyk converter converts a hex color into its cyan, magenta, yellow, and key percentages for print design work.
$$\text{left digit} = \left\lfloor \frac{N}{16} \right\rfloor \qquad \text{right digit} = N \bmod 16$$Here \(N\) is the decimal value of one level, and any result from 10 to 15 is written as the letters A through F (10 is A, 11 is B, 12 is C, 13 is D, 14 is E, 15 is F). Then concatenate the three pairs behind a hash sign:
$$\text{Hex} = \#\,R_{16}\,G_{16}\,B_{16}$$Convert RGB to Hex by Hand
Take a burnt-orange shade of rgb(214, 92, 61) and work through each channel in turn:
- Red: 214 ÷ 16 = 13 remainder 6, so the pair is D6 (13 is D).
- Green: 92 ÷ 16 = 5 remainder 12, so the pair is 5C (12 is C).
- Blue: 61 ÷ 16 = 3 remainder 13, so the pair is 3D.
- Join the pairs in order and add the hash sign to get #D65C3D.
| Level | Base 10 | Division by 16 | Result |
|---|---|---|---|
| Red | 214 | 13 remainder 6 | D6 |
| Green | 92 | 5 remainder 12 | 5C |
| Blue | 61 | 3 remainder 13 | 3D |
Checking the Result with the Convert Button
Type the three numbers into the tool and press the convert button; the answer should read #D65C3D without any manual math. A live preview swatch beside the output lets you confirm the shade at a glance, and a color picker lets you nudge a level with a slider instead of typing. When it looks right, copy the result to your clipboard and drop it into your stylesheet. Because every level is a whole number, there is no rounding in this direction, and everything runs in your browser, so nothing you enter is sent anywhere.
Color Table: Hex Code for Each Common Shade
Use this reference as a quick sanity check on any output. Each row was computed with the same division steps shown above.
| Shade | RGB | Hex |
|---|---|---|
| Black | 0, 0, 0 | #000000 |
| White | 255, 255, 255 | #FFFFFF |
| Mid gray | 119, 119, 119 | #777777 |
| Burnt orange | 214, 92, 61 | #D65C3D |
| Deep slate | 18, 52, 86 | #123456 |
| Amber | 255, 176, 0 | #FFB000 |
| Teal | 0, 150, 136 | #009688 |
Notice how the deep slate row comes out as 12, 34 and 56: the three levels 18, 52 and 86 happen to land on consecutive digits, which makes a handy memory test. Many pickers also attach a color name to a result so you can recognise it later, but the name is only a label; the pairs inside it are what the browser actually reads.
Matching a Logo Teal with a Color Converter Before Styling a Button
A front-end developer has a brand logo exported from a vector editor, and the inspector reports its teal as rgb(31, 122, 140). The new call-to-action button needs that exact shade behind light text, and the stylesheet only takes strings that start with a hash sign.
The three levels go in one at a time. 31 gives 1F (1 × 16 + 15), 122 gives 7A (7 × 16 + 10), and 140 gives 8C (8 × 16 + 12). The RGB to hex conversion reads #1F7A8C, and the live preview matches the logo.
Before committing the result, the developer checks it against the WCAG 2.1 AA threshold of 4.5:1: light text on #1F7A8C measures 4.98:1, so the label passes.
The hover state needs a darker teal, so the developer runs the conversion again with 25, 103 and 119 entered into the same three fields. The converter returns #196777, and light text on it reaches 6.47:1. Both strings go into the stylesheet straight from the output box, with no second round of review.
Hex to RGB: Reversing the Conversion
Going backwards uses the same idea in reverse. A hex to RGB converter splits the string into three pairs and multiplies the first digit of each pair by 16 before adding the second. Whenever you need to go from hex to RGB, follow these rules, which assign each color level to a pair of digits:
- The left digits hold the red level.
- The middle digits hold the green level.
- The right digits hold the blue level.
For #123456, 12 is 1 × 16 + 2 = 18, 34 is 3 × 16 + 4 = 52, and 56 is 5 × 16 + 6 = 86, giving rgb(18, 52, 86). Converting back returns the original numbers exactly, so you can round-trip a shade as often as you like.
Hex Code Alpha Channel and Opacity
A plain six-digit string is fully opaque. When you need transparency, add an alpha channel as a fourth pair: FF keeps the shade solid and 00 makes it invisible. Half opacity is 0.5 × 255 = 127.5, and rounding up to 128 gives the pair 80, so #D65C3D at 50% reads #D65C3D80. The matching RGBA form writes the same idea as rgba(214, 92, 61, 0.5).
Where a Hex Color Value Gets Used
A hex string is the most portable way to carry a shade between tools, which is why developers reach for a color code generator like this one dozens of times a project:
- Web pages: the string sets the background and text hues of an element in HTML, and keeps landing pages consistent with a brand.
- Design tools: design tools and photo editing software usually report RGB, so converting lets you carry the same RGB color palette into a stylesheet.
- Digital graphics and art: illustrators, photography editors and digital graphics teams share swatches as short strings that survive any email or chat.
- Other models: HSL, HSV and CMYK describe a shade through hue, brightness or ink, and printing workflows usually start from CMYK, so you convert one model into another before comparing.
- Clean codebases: teams normalize one format across a project so a search finds every use of a swatch, and an accessible contrast check works from one consistent value.
Once a conversion looks right, the result can be bookmarked or pasted into a style guide, and every developer on the project reads the same display value on their screen.