How to use the RGB to HEX color converter
- 1Set Red, Green and Blue with the sliders or type values from 0 to 255. Set Alpha below 1 for a transparent color.
- 2Read the HEX code under Codes, or in the last line of The formula, channel by channel.
- 3For the other direction, type a code into HEX code, such as
#ff5722,#f52or#ff572280; the sliders and RGB values update. - 4Press Copy next to the value you need.
Example
rgb(255, 87, 34)
#FF5722
255 = 15 × 16 + 15 → FF; 87 = 5 × 16 + 7 → 57; 34 = 2 × 16 + 2 → 22.
RGB to HEX formula
Each channel (0–255) becomes two hexadecimal digits. Divide by 16: the whole-number result is the first digit and the remainder the second, with 10–15 written as A–F.
| Channel | Value | ÷ 16 | Remainder | Hex |
|---|---|---|---|---|
| Red | 255 | 15 → F | 15 → F | FF |
| Green | 87 | 5 → 5 | 7 → 7 | 57 |
| Blue | 34 | 2 → 2 | 2 → 2 | 22 |
Join them after a #: #FF5722. Values below 16 need a leading zero: 10 is 0A, so rgb(10, 10, 10) is #0A0A0A, not #AAA. The table in the tool shows these steps for whatever color you set. For more on base 16, see how hexadecimal works.
HEX to RGB
Reverse it: split the code into three pairs and convert each from base 16 by multiplying the first digit by 16 and adding the second. #1E90FF: 1E = 1 × 16 + 14 = 30, 90 = 9 × 16 + 0 = 144, FF = 255, so rgb(30, 144, 255), which is dodgerblue.
Case doesn't matter (#ff5722 = #FF5722), and the # is optional when you type a code here.
Shorthand and 8-digit hex (alpha)
3-digit shorthand doubles each digit: #F52 = #FF5522, and #FFF = #FFFFFF = rgb(255, 255, 255). Only colors whose pairs are doubled digits can be shortened, so #FF5722 has no shorthand.
8-digit hex adds alpha as a fourth pair, on the same 0–255 scale: #FF572280 is #FF5722 at 128/255 ≈ 50% opacity, FF is fully opaque and 00 fully transparent. The 4-digit form #F528 is its shorthand. Set Alpha below 1 and the formula table adds the alpha row.
Using the codes in CSS
All of these mean the same color in CSS:
color: #ff5722;
color: rgb(255 87 34);
color: rgb(255, 87, 34);
background: #ff572280; /* 50% opacity */
background: rgb(255 87 34 / 50%);Every current browser supports 8-digit hex and the space-separated rgb() syntax. For HSL, HSV and CMYK versions of the same color, use the color converter; to pick a color visually, use the color picker.
Is anything I enter stored?
This tool runs entirely in your browser. Your text is not uploaded to our servers.