Преобразование RGB в HEX и HEX в RGB

Вот альтернативная версия функции hexToRgb, которая выполняет ту же задачу, но немного иначе:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

Редактирование: 28/03/2017
Вот другой подход, который кажется даже быстрее:

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0, parseInt(hex, 16), false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

Редактирование: 11/08/2017
После дополнительных тестов новый подход не оказался быстрее 😦. Тем не менее, это интересный альтернативный способ.

Вот мой вариант кода для конвертации RGB в HEX и обратно:

function rgbToHex(red, green, blue) {
  const rgb = (red << 16) | (green << 8) | (blue << 0);
  return '#' + (0x1000000 + rgb).toString(16).slice(1);
}

function hexToRgb(hex) {
  const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
  if (normal) return normal.slice(1).map(e => parseInt(e, 16));

  const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
  if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));

  return null;
}

Функция rgbToHex принимает три параметра: красный, зеленый и синий цвета (в диапазоне от 0 до 255). Она создает 24-битный целочисленный цвет и преобразует его в шестнадцатеричную строку, добавляя символ # в начале.

Функция hexToRgb принимает строку в формате HEX и сначала пытается извлечь обычный формат (6 символов). Если это не удается, она проверяет сокращенный формат (3 символа). В обоих случаях она возвращает массив, содержащий значения красного, зеленого и синего цветов в десятичном формате. Если формат неправильный, возвращается null.

Такой подход обеспечивает корректную конвертацию между форматами RGB и HEX.

Для перевода шестнадцатичного цвета в RGB вы можете использовать следующую функцию на JavaScript:

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

Эта функция принимает строку hex, представляющую цвет в шестнадцатеричном формате (например, #FF5733). Она извлекает значения красного, зеленого и синего компонентов цвета, представляя каждый из них в десятичной системе.

Принцип работы функции следующий:

1. hex[1] и hex[2] берут символы, представляющие красный цвет.
2. hex[3] и hex[4] — зеленый.
3. hex[5] и hex[6] — синий.
4. Затем каждый компонент преобразуется в десятичное число с помощью операции | 0, что является простым способом преобразования строки в число в JavaScript.

Этот подход работает только для шестнадцатеричных строк длиной 7 символов (включая символ # в начале). Если вы хотите обработать более короткие форматы (например, #F53), вам нужно будет добавить дополнительную логику для разбиения 3-значного значения на 6-значное.

Я предполагаю, что вы имеете в виду шестнадцатеричную нотацию в стиле HTML, т.е. #rrggbb. Ваш код почти верен, но порядок значений у вас перепутан. Он должен быть таким:

var decColor = red * 65536 + green * 256 + blue;

Кроме того, использование битовых сдвигов может сделать код немного более читаемым:

var decColor = (red << 16) + (green << 8) + blue;

Удивлён, что этот ответ ещё не появился.

• Не использует никаких библиотек #используем-аналоги ✔️
• Всего 3 строки, и поддерживает все цвета, которые поддерживают браузеры.

const toRGB = (color) => {
    const { style } = new Option();
    style.color = color;
    return style.color;
}
// обрабатывает любой цвет, который поддерживает браузер, и конвертирует его.
console.log(toRGB("#333")) // rgb(51, 51, 51);
console.log(toRGB("hsl(30, 30%, 30%)")) 

Этот код позволяет вам конвертировать цвет в формате HEX или HSL в формат RGB, который поддерживается всеми браузерами.