How RGB to HEX Converter works
Enter a red, a green and a blue value and this RGB to HEX converter writes each one as a two-digit hexadecimal number and joins them behind a hash. rgb(79, 70, 229) becomes #4f46e5, rgb(255, 255, 255) becomes #ffffff and rgb(0, 0, 0) becomes #000000. The result updates as you type. You also get the same color as hsl(), a suggested white or near-black text color to put on it, and a short CSS rule that uses the code. Tick Uppercase output if your project writes codes as #4F46E5. Values must be between 0 and 255; anything outside that range is flagged, not silently changed.
RGB to hex color chart
Common RGB values and the hex code this tool returns for each, with the text color it suggests on that background.
| Color | RGB | Hex code | Readable text on it |
|---|---|---|---|
| Black | 0, 0, 0 | #000000 | #ffffff |
| White | 255, 255, 255 | #ffffff | #101828 |
| Red | 255, 0, 0 | #ff0000 | #ffffff |
| Lime | 0, 255, 0 | #00ff00 | #101828 |
| Blue | 0, 0, 255 | #0000ff | #ffffff |
| Yellow | 255, 255, 0 | #ffff00 | #101828 |
| Cyan | 0, 255, 255 | #00ffff | #101828 |
| Magenta | 255, 0, 255 | #ff00ff | #ffffff |
| Orange | 255, 165, 0 | #ffa500 | #101828 |
| Gold | 255, 215, 0 | #ffd700 | #101828 |
| Pink | 255, 192, 203 | #ffc0cb | #101828 |
| Purple | 128, 0, 128 | #800080 | #ffffff |
| Green | 0, 128, 0 | #008000 | #ffffff |
| Navy | 0, 0, 128 | #000080 | #ffffff |
| Teal | 0, 128, 128 | #008080 | #ffffff |
| Brown | 165, 42, 42 | #a52a2a | #ffffff |
| Dodger blue | 30, 144, 255 | #1e90ff | #ffffff |
| Light blue | 173, 216, 230 | #add8e6 | #101828 |
| Dark gray | 51, 51, 51 | #333333 | #ffffff |
| Mid gray | 128, 128, 128 | #808080 | #ffffff |
| Light gray | 204, 204, 204 | #cccccc | #101828 |
| Off-white | 250, 250, 250 | #fafafa | #101828 |
RGB to hexadecimal formula
For each channel value n from 0 to 255: first digit = whole part of n / 16, second digit = remainder of n / 16. Write 10 as a, 11 as b, 12 as c, 13 as d, 14 as e and 15 as f. Hex code = # + red pair + green pair + blue pair.
Take rgb(79, 70, 229). 79 / 16 = 4 remainder 15, so the red pair is 4f. 70 / 16 = 4 remainder 6, so green is 46. 229 / 16 = 14 remainder 5, so blue is e5. Joined together that is #4f46e5. A second one: rgb(255, 215, 0). 255 / 16 = 15 remainder 15, giving ff. 215 / 16 = 13 remainder 7, giving d7. 0 is 00. The code is #ffd700. Every pair must be two characters, so a value under 16 always starts with 0.
Decimal to hex pairs for common channel values
A lookup for single channels. Find each of your three numbers and write the pairs in red, green, blue order.
| Decimal | Hex pair | Decimal | Hex pair |
|---|---|---|---|
| 0 | 00 | 128 | 80 |
| 5 | 05 | 150 | 96 |
| 10 | 0a | 153 | 99 |
| 15 | 0f | 191 | bf |
| 16 | 10 | 192 | c0 |
| 32 | 20 | 200 | c8 |
| 51 | 33 | 204 | cc |
| 64 | 40 | 230 | e6 |
| 100 | 64 | 240 | f0 |
| 102 | 66 | 250 | fa |
| 127 | 7f | 255 | ff |
Multiples of 17 (0, 17, 34, 51 and so on up to 255) give repeated digits such as 11, 22 and 33. A color whose three channels are all multiples of 17 can be written as three-digit shorthand: rgb(17, 34, 51) is #112233, or #123.
Worked RGB to hex examples
The default indigo
Red 79, Green 70, Blue 229
HEX #4f46e5. HSL hsl(243, 75%, 59%). Readable text on it: #ffffff.
Upper case for a brand sheet
Red 255, Green 99, Blue 71, Uppercase output ticked
HEX #FF6347. The CSS block reads .element { color: #FF6347; background: rgb(255, 99, 71); }
Small values that need zero padding
Red 5, Green 10, Blue 15
HEX #050a0f. HSL hsl(210, 50%, 4%).
Each pair keeps its leading zero, which is the step most often missed when converting by hand.
A value out of range
Red 256, Green 0, Blue 0
No code. The tool shows the message Red must be between 0 and 255.
Negative numbers get the same message. Nothing is clamped to 255 behind your back.
A decimal channel from a calculation
Red 79.6, Green 70.4, Blue 229
HEX #5046e5.
Each channel is rounded to the nearest whole number first, so 79.6 is treated as 80 and 70.4 as 70.
Converting rgba(), percentages and other RGB formats
The tool takes three whole-number channels. Other ways of writing an RGB color need one extra step before or after.
- rgba() with transparency: convert the three color channels here, then work out the alpha pair by hand. Multiply the alpha by 255, round, and convert to hex. An alpha of 0.5 gives 128, which is 80, so rgba(79, 70, 229, 0.5) is #4f46e580.
- Percentages such as rgb(100%, 50%, 0%): multiply each percentage by 2.55 and round. 100% is 255, 50% is 128 and 0% is 0, so enter 255, 128 and 0 to get #ff8000.
- Values from 0 to 1, as used in some graphics and game code: multiply each by 255 and round. 0.2, 0.4, 0.8 becomes 51, 102, 204, which is #3366cc.
- Eyedropper readings from an image editor: enter the R, G and B readings as they are. For 8-bit images they are already on the 0 to 255 scale.
- Going the other way: use the HEX to RGB Converter on this site to turn a code back into channel numbers.
How the Readable text on it suggestion is chosen
The tool calculates the WCAG relative luminance of your color, a brightness score from 0 for black to 1 for white that weights green most heavily and blue least. If the score is above 0.45 it suggests the near-black #101828; otherwise it suggests white, #ffffff. That is why yellow (255, 255, 0) and lime (0, 255, 0) get dark text while pure red and pure blue get white.
Treat it as a first pick, not a pass mark. The rule is a single cutoff, it does not report a contrast ratio, and for mid-tone backgrounds it does not always choose the stronger of the two. On rgb(128, 128, 128) it suggests white, which gives 3.95 to 1, while #101828 gives 4.49 to 1. On orange rgb(255, 128, 0) it suggests white at 2.52 to 1, while #101828 gives 7.05 to 1. For body text, test the final pair in the Colour Contrast Checker and look for a ratio of at least 4.5 to 1.
How to get your result
- 1
Enter the Red, Green and Blue values, each a number from 0 to 255.
- 2
Tick Uppercase output if you want #FF6347 in place of #ff6347.
- 3
Read the HEX line in the Values panel. RGB and HSL forms of the same color sit beside it.
- 4
Check Readable text on it to see whether the tool suggests white (#ffffff) or near-black (#101828) text for that background.
- 5
Copy the CSS block, or download it as colour.css, if you want the code already placed in a rule.