RGB to HEX Converter
Convert RGB color values to HEX codes instantly with live color preview.
HEX Code
#E3EB01
CSS RGB
rgb(227, 235, 1)
Formula
HEX = # + toHex(R) + toHex(G) + toHex(B)
How RGB to HEX Conversion Works
Converting RGB to HEX is the reverse of HEX to RGB. Each decimal number (0-255) gets converted to a two-digit hexadecimal number. The three hex pairs are then concatenated with a # prefix to form the final color code.
The key to understanding the conversion is knowing that hexadecimal is base-16 counting. Instead of going 0-9 and then carrying over (like base-10), hex goes 0-9, A, B, C, D, E, F, and then carries over. So 10 in decimal is A in hex, 15 is F, and 16 is 10.
To convert any number from 0-255 to hex: divide by 16. The whole number part becomes the first hex digit, and the remainder becomes the second. For 200: 200 / 16 = 12 remainder 8. 12 is C in hex, so 200 = C8.
Code Examples
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(x => Math.max(0, Math.min(255, x))
.toString(16)
.padStart(2, '0'))
.join('')
.toUpperCase();
}
rgbToHex(255, 87, 51); // "#FF5733"
rgbToHex(227, 235, 1); // "#E3EB01"/* All of these produce the same orange-red color */
.box { color: #FF5733; } /* HEX */
.box { color: rgb(255, 87, 51); } /* RGB */
.box { color: hsl(11, 100%, 60%); }/* HSL */
/* With 50% transparency */
.box { color: #FF573380; } /* HEX8 */
.box { color: rgba(255, 87, 51, 0.5); } /* RGBA */
.box { color: hsla(11, 100%, 60%, 0.5); }/* HSLA */
/* Modern syntax (no commas) */
.box { color: rgb(255 87 51 / 0.5); }When to Use RGB vs HEX
Use HEX when...
You want compact code, are pasting from a design tool, or are defining CSS custom properties. HEX is the most widely recognized format and takes up the least space in your stylesheet.
Use RGB when...
You need transparency (RGBA), are manipulating colors in JavaScript, or are interpolating between colors programmatically. RGB values are easier to calculate with than hex strings.
Use HSL when...
You are building color themes or generating shades. HSL makes it easy to create lighter and darker versions of a color by adjusting the lightness value, which is much harder with HEX or RGB.
Frequently Asked Questions
How do I convert RGB to HEX?
Convert each RGB value (0-255) to a two-digit hexadecimal number and concatenate them with a # prefix. For example, 255 becomes FF, 87 becomes 57, 51 becomes 33, giving you #FF5733.
What is the RGB color model?
RGB is an additive color model where Red, Green, and Blue light are combined to create colors. Each channel ranges from 0 (no light) to 255 (full intensity). Mixing all three at maximum gives white.
Why convert RGB to HEX?
HEX codes are more compact in CSS (#FF5733 vs rgb(255, 87, 51)) and are the standard format in design tools like Figma, Sketch, and Photoshop. Most color pickers copy colors in HEX format.
What does the # symbol mean in HEX colors?
The # prefix tells the browser that the following characters are a hexadecimal color value. It is required in CSS. Without it, the browser might interpret the value as a class name or other selector.
How do I convert a decimal number to hex?
Divide by 16. The quotient is the first digit, the remainder is the second. For 255: 255 / 16 = 15 remainder 15, which is FF. For 87: 87 / 16 = 5 remainder 7, which is 57.
Can RGB values be negative or above 255?
No. Each RGB channel must be between 0 and 255. Values outside this range will be clamped by the browser. Some CSS functions like calc() can produce out-of-range values, but the browser clips them.
What is the HEX code for transparent?
There is no transparent HEX color. Transparency requires an alpha channel. Use an 8-digit HEX code like #FF573380 (where 80 is about 50% opacity) or switch to rgba(255, 87, 51, 0.5).
How do CSS color functions differ from HEX?
Modern CSS supports rgb(), hsl(), hwb(), lab(), lch(), oklch(), and color(). HEX only encodes RGB values. For wide-gamut colors or perceptual uniformity, you need the newer color functions.
Can I convert RGB to HEX in JavaScript?
Yes. Use toString(16): (255).toString(16) gives 'ff'. Pad single digits with padStart(2, '0'). A full function: (r,g,b) => '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('').
What is the difference between sRGB and Display P3?
sRGB is the standard color space for the web. Display P3 is a wider gamut used by modern Apple devices. HEX and rgb() are always sRGB. For P3 colors, use the CSS color() function.
Do uppercase and lowercase HEX produce different colors?
No. #FF5733 and #ff5733 are identical. CSS hex values are case-insensitive. Most design tools output uppercase, but lowercase is equally valid.
How do I find the RGB values of a color on screen?
Use the browser's built-in color picker in DevTools. In Chrome, click any color swatch in the Styles panel to open the picker, which shows HEX, RGB, and HSL values simultaneously.
Disclaimer: This tool provides approximate conversions for reference purposes. Color rendering may vary slightly across different displays and browsers.