Convert RGB Values to Hex Color Codes

Converting RGB to hex is essential for web development, as many tools and APIs output colors as RGB decimal triplets, but CSS stylesheets and design tokens often use hex notation.

Step-by-step example — converting rgb(65, 105, 225) to hex:

1. Convert each decimal channel value to a 2-digit hex string:
   • Red: 65 / 16 = 4 remainder 1 -> 41
   • Green: 105 / 16 = 6 remainder 9 -> 69
   • Blue: 225 / 16 = 14 remainder 1 -> E1
2. Concatenate with a # prefix: #4169E1

This is Royal Blue.

Important detail — padding with zero:

If a channel value converts to a single hex digit (values 0-15), you must pad with a leading zero. For example, rgb(0, 10, 255) becomes #000AFF, not #0AFF. Forgetting this padding is a common source of bugs.

In JavaScript:

function rgbToHex(r, g, b) {
  return "#" + [r, g, b]
    .map(v => v.toString(16).padStart(2, "0"))
    .join("")
    .toUpperCase();
}

Common RGB-to-hex conversions:

Color	RGB	Hex
White	rgb(255,255,255)	#FFFFFF
Black	rgb(0,0,0)	#000000
Red	rgb(255,0,0)	#FF0000
Green	rgb(0,128,0)	#008000
Blue	rgb(0,0,255)	#0000FF

When to use each format:

Hex is more compact (7 characters vs. up to 16 for rgb notation) and is widely used in design tools, style guides, and configuration files. RGB is better when you need to programmatically manipulate individual channels or when working with alpha transparency using rgba(). Understanding both formats and converting between them is a core skill for front-end development.