Расчет среднего цвета между двумя HEX-кодами в RGB

Быстрый ответ

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

function midpointColor(hex1, hex2) {
  let lerp = (a, b) => Math.round((a + b) / 2);
  let hexToRgb = hex => parseInt(hex.slice(1), 16);
  let rgbToHex = rgb => '#' + rgb.toString(16).padStart(6, '0'); 
  let color1 = hexToRgb(hex1), color2 = hexToRgb(hex2);
  let blendedColor = lerp(color1 >> 16, color2 >> 16) << 16 | lerp((color1 >> 8) & 0xFF, (color2 >> 8) & 0xFF) << 8 | lerp(color1 & 0xFF, color2 & 0xFF);
  return rgbToHex(blendedColor);
}

console.log(midpointColor('#ff0000', '#0000ff')); // #800080, именно таким будет настоящий пурпурный оттенок.

Этот метод выполняет линейную интерполяцию (lerp) для пары шестнадцатеричных цветов и возвращает шестнадцатеричный код результирующего цвета.

Тонкости работы с RGB и восприятием цвета человеком

Неравномерность цветового пространства RGB

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

Подробнее об этом расскажет наш спикер на видео

Для более точного результата используем HSL

Для получения более естественного перехода между цветами можно конвертировать цвета из RGB в HSL (Hue, Saturation, Lightness — то есть оттенок, насыщенность, светлота), провести градиент в этом пространстве, а затем преобразовать обратно в RGB. Это позволит точнее учесть человеческое восприятие цвета.

Полезно знать разные языки программирования

У программиста в арсенале может быть множество языков программирования. Включая примеры фрагментов кода на таких языках как Python, C# или Java, этот материал станет полезным для широкой аудитории.

Готовые инструменты для работы с цветом

Для тех, кто работает с CSS-препроцессорами, функция mix() из LESS может оказаться незаменимой. Веб-сервисы, например, ColorBlender помогают быстро найти промежуточный оттенок между двумя указанными цветами.

Визуализация

Допустим, вы смешиваете два оттенка краски, чтобы получить новый цвет, который находится ровно посередине между исходными:

Цвет A (🎨🔴): Чистый красный
Цвет B (🎨🔵): Чистый синий

Смешивание красного и синего в равных пропорциях дает пурпурный:

🔴 + 🔵 = 🟣

Процесс поиска промежуточного оттенка аналогичен равномерному смешиванию каждого из исходных цветов. Вот пример в коде:

| Смешивание  | Цвет |
| ----------- | ---- |
| 50% 🔴      |      |
| 50% 🔵      | 🟣   |

Таким образом, средний цвет можно найти путем усреднения RGB-значений каждого из исходных цветов.

Расширение темы: технические особенности и приемы программирования

Важность форматирования

Обратите внимание на правильность преобразования шестнадцатеричных значений — все компоненты RGB должны быть представлены двумя символами. Использование функции padToTwo() позволит избежать ошибок форматирования.

Усреднение шестнадцатеричных кодов

Для нахождения среднего цвета создайте функцию hexAverage(), используя Array.reduce(), что обеспечит наиболее точный результат.

Учет особенностей восприятия цвета

Важно учитывать особенности восприятия человеком цветового спектра. Использование цветовых пространств HSL/HSV сделает результат приятнее для глаз и избавит вас от необходимости объясняться перед дизайнерами!

Объединение ресурсов

Используя источники в интернете, например, Programming-Idioms, вы обеспечиваете себя примерами кода на разных языках. Этот ресурс поможет в расчете среднего цвета и будет полезен для разработчиков по всему миру.

Полезные материалы

1. CSS Gradient — Generator, Maker, and Background — интерактивный инструмент для создания градиентов в CSS.
2. Calculate color HEX having 2 colors and percent/position – Stack Overflow — обсуждение расчета промежуточных цветов в HEX.
3. linear-gradient() – CSS: Cascading Style Sheets | MDN — официальная документация по функции linear-gradient().
4. Color Blender — инструмент для смешивания цветов, помогающий определить промежуточные оттенки.
5. HTML Color Mixer — больше информации о процессе смешивания цветов.
6. RGB to HSL and HSL to RGB — инструкция по конвертации между моделями цвета RGB и HSL.