How to Convert RGB to HEX in JavaScript

RGB describes a color with three decimal channels: red, green, and blue. CSS-style HEX writes those same channels as six hexadecimal digits, usually with a leading #. This guide converts in both directions and applies the RGB-to-HEX function to an array of colors.

Understand RGB and HEX color formats

Each RGB channel is an integer from 0 through 255. HEX represents red with the first two digits, green with the next two, and blue with the last two. For example, (255, 100, 200) becomes #ff64c8: ff is red, 64 is green, and c8 is blue. The # marks the string as a CSS color; it is not part of the six channel digits.

Each decimal channel must be converted separately to base 16 and represented with two digits. A low value such as decimal 5 converts to the single hexadecimal digit 5, so it needs a leading zero to make the pair 05. Keeping the channel order fixed is essential: swapping the pairs changes the color. CSS accepts uppercase and lowercase hexadecimal digits, so either letter case represents the same value.

Convert RGB to HEX in JavaScript

Convert each channel with toString(16), then use padStart(2, "0") to preserve the two-digit width. Joining the three pairs in red, green, blue order produces the six-digit value. This function expects each argument to be an integer from 0 through 255. It does not validate, clamp, or round inputs, so check or normalize external values before calling it.

Run this example with Node.js or in a browser console:

function rgbToHex(red, green, blue) {
  const channels = [red, green, blue];
  const pairs = channels.map(channel => channel.toString(16).padStart(2, "0"));
  return `#${pairs.join("")}`;
}

console.log(rgbToHex(255, 100, 200));

#ff64c8

For these arguments, the function returns #ff64c8. The method works because a base-16 string for an in-range channel has at most two digits, and padding supplies the leading zero when needed.

Convert HEX to RGB in JavaScript

For a six-digit HEX value, read one two-character pair at a time and parse each pair with radix 16. parseInt() needs the explicit radix so JavaScript interprets the pair as hexadecimal. The function below accepts a string with or without its leading #; it is intended for a six-digit value, and it does not validate malformed strings.

function hexToRgb(hex) {
  const digits = hex.startsWith("#") ? hex.slice(1) : hex;
  return [0, 2, 4].map(offset => parseInt(digits.slice(offset, offset + 2), 16));
}

console.log(hexToRgb("#ff64c8"));

The three returned numbers correspond to red, green, and blue. For a six-digit input, parsing ff, 64, and c8 in radix 16 recovers the channel values 255, 100, and 200. If input comes from a user or an external source, validate that it contains exactly six hexadecimal digits after the optional # before using the result.

Convert multiple RGB colors

When colors are stored as an array of three-channel arrays, map() applies the same conversion to each item and returns a new array of CSS-style HEX strings. This keeps one conversion rule for individual values and batches, so a padding or formatting change only needs to be made in rgbToHex.

function rgbToHex(red, green, blue) {
  return `#${[red, green, blue]
    .map(channel => channel.toString(16).padStart(2, "0"))
    .join("")}`;
}

const colors = [
  [255, 100, 200],
  [0, 16, 255],
  [12, 34, 56],
];

const hexColors = colors.map(([red, green, blue]) => rgbToHex(red, green, blue));
console.log(JSON.stringify(hexColors));

["#ff64c8","#0010ff","#0c2238"]

Each input row uses red, green, and blue order and must satisfy the same integer range as the single-color function. The result preserves the input order, with one HEX string for each RGB triplet. For larger data sets, the same pattern can be used wherever the colors are already available as arrays; the conversion itself does not require a color library.