How to Convert 3-Digit Hexadecimal Color Code to 6-Digits Using JavaScript?

A 3-digit hexadecimal RGB notation (#rgb) can be converted to the 6-digit form (#rrggbb) by replicating the digit for each color channel. For example, #fb0 expands to #ffbb00, and so on.

There are several ways to make this conversion using JavaScript. One of the simpler ways you can achieve this is in the following way:

// ES12+
const normalizeHex = (hex) => (
    (hex.length > 3) ? hex : hex.replaceAll(/(.{1})/g, '$1$1')
);

console.log(normalizeHex('fb0')); // ffbb00
console.log(normalizeHex('0fc')); // 00ffcc
console.log(normalizeHex('fff')); // ffffff
console.log(normalizeHex('000')); // 000000

This function returns the hexadecimal value as is for values exceeding a length of three, and for all others, it uses String.prototype.replaceAll() to duplicate value for each color channel.

Since String.prototype.replaceAll() was added in ES12, it is only supported in modern browsers. If that is a concern for you, then you can use String.prototype.replace() instead with the global ("g") flag (as it works in the same way and has great browser support).

Alternatively, you can also manually replicate digits for each color channel, for example, like so:

function normalizeHex(hex) {
    if (hex.length > 3) {
        return hex;
    }

    const red = `${hex[0]}${hex[0]}`;
    const green = `${hex[1]}${hex[1]}`;
    const blue = `${hex[2]}${hex[2]}`;

    return `${red}${green}${blue}`;
}

console.log(normalizeHex('fb0')); // ffbb00
console.log(normalizeHex('0fc')); // 00ffcc
console.log(normalizeHex('fff')); // ffffff
console.log(normalizeHex('000')); // 000000

You can also shorten this like so:

const normalizeHex = (hex) => (
    (hex.length > 3) ? hex : `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`
);

In this version, the channel color code is manually repeated twice for each color channel to get a 6-digit hexadecimal color code. When the input value is larger than three, it is returned as is.