Turn any RGB color into a HEX code instantly
Type in your red, green, and blue values and get a clean HEX color code in one click — no math, no guessing. The tool also shows a live color swatch so you can confirm it looks exactly right before you copy it into your CSS, design file, or code.
Everything runs in your browser. Your color values are never sent to a server, so there's nothing to worry about with sensitive brand colors or client work.
How to convert RGB to HEX
- Enter your RGB values — type the red (R), green (G), and blue (B) numbers. Each is a whole number from 0 to 255.
- Check the live swatch — the preview updates as you type so you can see the color immediately.
- Copy the HEX code — click the copy button next to the result (e.g.
#FF6B35) and paste it wherever you need it. - Use the extra formats for free — the tool also shows you the same color as HSL, HSV, and CMYK values, all at once.
Worked example: RGB to HEX
Say your design tool gives you the color RGB(255, 107, 53) — a warm orange. Here's what the converter returns:
| Input (RGB) | Output (HEX) | What it looks like |
|---|---|---|
| R: 255, G: 107, B: 53 | #FF6B35 | Warm orange |
The HEX code #FF6B35 breaks down as: FF = 255 red, 6B = 107 green, 35 = 53 blue. Each pair is just the decimal value written in base 16 (hexadecimal).
How to do this in code
If you need to automate RGB-to-hex conversion in your own project, here are two ready-to-run snippets.
JavaScript
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => v.toString(16).padStart(2, '0'))
.join('').toUpperCase();
}
rgbToHex(255, 107, 53); // Returns '#FF6B35'Python
def rgb_to_hex(r, g, b):
return '#{:02X}{:02X}{:02X}'.format(r, g, b)
rgb_to_hex(255, 107, 53) # Returns '#FF6B35'Both snippets convert each 0–255 integer to a two-character hex pair, then join them with a leading #. The :02X format (Python) and padStart(2, '0') (JavaScript) make sure single-digit values like 9 are written as 09, not just 9.
How the conversion works
An RGB color is three numbers, each between 0 and 255. HEX is the same three numbers written in base 16, joined together with a # in front. For example, 255 in base 16 is FF, and 0 is 00. That's it — no color data is lost or approximated. The two formats represent exactly the same colors; they're just written differently. You can read more about how browsers handle color values in the W3C CSS Color Level 4 specification.
When to use this converter
- Copying from a design tool — Figma, Sketch, and Adobe XD often show RGB values; most CSS and HTML needs HEX.
- Working with brand guidelines — brand books frequently list colors as RGB. Convert once and keep a HEX reference handy.
- Setting colors in frameworks — Tailwind CSS, Bootstrap, and similar tools accept HEX codes in config files.
- Quick sanity checks — paste a color from anywhere and confirm it's the right shade before shipping.
When HEX might not be the best choice
- Transparency / opacity — if you need a semi-transparent color, use
rgba()or an 8-digit HEX (e.g.#FF6B3580for 50% opacity). A standard 6-digit HEX has no alpha channel. - Wide-gamut displays — screens that support P3 or Rec. 2020 color spaces use
color(display-p3 ...)syntax in CSS, not traditional HEX. MDN's CSS color value reference covers the full range of modern color formats. - Print work — CMYK is the standard for print. The tool shows you the CMYK equivalent, but double-check with your printer.
The right format depends on where the color ends up. For anything in a browser stylesheet, HEX is always a safe, widely-supported choice.
Takeaway: Converting RGB to HEX takes two seconds with the tool above — paste your value, grab the code, and move on.