Как на javascript перевести цвет RGB в HEX и обратно?

Во фронтенде иногда возникает необходимость конвертации цвета между форматами RGB/RGBA и HEX.

HEX — это сокращение от слова «hexadecimal», которое переводится на русский язык, как «шестнадцатеричный». Число в этом формате может занимать 16 бит (2 байта) памяти и записывается с помощью 16 символов: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, C, D, E, F.

RGB — это сокращение является краткой записью трех названий цветов палитры «red — green — blue» («красный — зеленый — синий»). Стандартный RGB формат может занимать 24 бита (3 байта) памяти. Для его записи используются те же символы, что и у чисел в HEX формате (кроме букв).

Приведем примеры готовых функций, которыми вы можете воспользоваться для выполнения перевода цвета из hex в rgb и наоборот.

RGB to HEX

Если значение передаётся отдельными компонентами, то есть в виде трёх чисел:

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgb2hex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

Более короткое решение с использованием побитового сдвига влево:

function rgb2hex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

Если цвет в функцию будет передаваться в виде строки вида rgba(0, 255, 0, 0.5):

function rgb2hex(rgb) {
    var rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);

    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
};

Причём функция поддерживает цвет и без прозрачности, то есть без указания альфа-компоненты.

HEX to RGB

Значение передаётся в виде строки, например #00ff00, а результат в виде объекта с тремя компонентами:

function hex2rgb(c) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

Ещё один вариант с использованием побитового сдвига вправо:

function hex2rgb(c) {
    var bigint = parseInt(c.split('#')[1], 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

Как видно, сделать конвертер rgb в hex совсем несложно.