RGB to Hex Converter — Convert Colors Between RGB and Hex

RGB and hex are two ways to write the same color. rgb(255, 99, 71) (Tomato red) and #FF6347 are identical — different notation, same color. Conversion between them is mechanical: each decimal channel (0–255) maps to a two-digit hexadecimal value.

Use the Color Picker to convert between RGB, hex, HSL, and other color formats instantly.

The RGB to hex conversion

Each RGB channel maps to one byte (8 bits), expressed as two hexadecimal digits:

RGB: (255, 99, 71)

R: 255 → FF    (255 ÷ 16 = 15 remainder 15 → F and F)
G:  99 → 63    (99 ÷ 16 = 6 remainder 3 → 6 and 3)
B:  71 → 47    (71 ÷ 16 = 4 remainder 7 → 4 and 7)

Hex: #FF6347

Hex digits: 0–9 represent 0–9, A–F represent 10–15. Case-insensitive: #ff6347 = #FF6347.

The hex to RGB conversion

Reverse: split the hex into three 2-digit pairs and convert each from hex to decimal:

Hex: #1E90FF

R: 1E → 1×16 + 14 = 30
G: 90 → 9×16 + 0  = 144
B: FF → 15×16 + 15 = 255

RGB: (30, 144, 255)  → DodgerBlue

Converting in code

JavaScript

// RGB to Hex:
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('')
    .toUpperCase();
}
console.log(rgbToHex(255, 99, 71)); // "#FF6347"

// Hex to RGB:
function hexToRgb(hex) {
  const clean = hex.replace('#', '');
  return {
    r: parseInt(clean.slice(0, 2), 16),
    g: parseInt(clean.slice(2, 4), 16),
    b: parseInt(clean.slice(4, 6), 16)
  };
}
console.log(hexToRgb('#FF6347')); // { r: 255, g: 99, b: 71 }

// Shorthand hex (#RGB → #RRGGBB):
function expandShortHex(hex) {
  if (hex.length === 4) {
    return '#' + hex[1]+hex[1] + hex[2]+hex[2] + hex[3]+hex[3];
  }
  return hex;
}
console.log(expandShortHex('#F60')); // "#FF6600"

Python

def rgb_to_hex(r, g, b):
    return f'#{r:02X}{g:02X}{b:02X}'

def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

print(rgb_to_hex(255, 99, 71))   # '#FF6347'
print(hex_to_rgb('#FF6347'))     # (255, 99, 71)

CSS

CSS accepts both formats natively, so you rarely need to convert manually in CSS. But knowing the equivalence helps when copying between design tools (Figma outputs hex) and code (you might prefer rgb() for readability or to include opacity with rgba()).

/* These are the same color: */
color: #FF6347;
color: rgb(255, 99, 71);
color: rgb(100% 38.8% 27.8%);  /* Modern CSS */

/* With transparency (hex + alpha channel): */
color: #FF634780;       /* 50% opacity */
color: rgba(255, 99, 71, 0.5);  /* Same */

Shorthand hex colors

When each channel’s two hex digits are identical (e.g., #FF3300), CSS allows a 3-digit shorthand: #F30. The browser expands it to #FF3300.

#RRGGBB → #RGB (only when RR=RR, GG=GG, BB=BB)

#FF3300 → #F30
#AABBCC → #ABC
#112233 → #123
#1E90FF → no shorthand (1E, 90, FF — no matching pairs)

4-digit shorthand #RGBA is also supported: #FF6347C0 → #F6C with 8/15 opacity. Less commonly used.

Color formats comparison

Format	Example	Use case
Hex	#FF6347	HTML/CSS, design tools, copy-paste
RGB	rgb(255, 99, 71)	CSS with opacity needs, dynamic colors in JS
HSL	hsl(9, 100%, 64%)	Programmatic color manipulation
OKLCH	oklch(68% 0.18 29)	Perceptually uniform, modern CSS
Named	tomato	CSS named colors only

When to use hex: Design handoffs, color variables in CSS, HTML attributes. Compact, widely supported, universally understood by designers and developers.

When to use RGB: When you need to set opacity (rgba(255, 99, 71, 0.5)), when building colors dynamically in JavaScript, when individual channel math is needed.

When to use HSL: When you need programmatic color variations — lightening, darkening, shifting hue. hsl(9, 100%, 64%) (tomato) → hsl(9, 100%, 40%) (darker tomato) by just changing the lightness value.

When to use OKLCH: Modern CSS (Chrome 111+, Firefox 113+). Perceptually uniform — equal steps in lightness look equal to human eyes, unlike HSL. Best for design systems that need consistent visual weight across different hues.

Alpha channel (transparency)

Standard hex is 6 digits (RGB). 8-digit hex includes an alpha channel:

#RRGGBBAA

#FF634780 = rgb(255, 99, 71, 0.5)  (50% transparent)
#FF6347FF = rgb(255, 99, 71, 1.0)  (fully opaque)
#FF634700 = rgb(255, 99, 71, 0.0)  (fully transparent)

Alpha: 00 = 0% opacity (transparent), FF = 100% opacity (opaque).

Convert alpha percentage to hex: multiply by 255, round, convert to hex.

• 50% → 0.5 × 255 = 127.5 ≈ 128 → 80
• 75% → 0.75 × 255 = 191.25 ≈ 191 → BF

Related tools

• Color Picker — pick colors and convert between all formats
• Hex Color Codes — how hex colors work
• Contrast Checker — WCAG accessibility ratios for color combinations