Смешиваем два цвета в SCSS или «Как конвертировать RGBA в RGB / HEX?»

Смешиваем два цвета в SCSS или «Как конвертировать RGBA в RGB / HEX?»

Начнем с того, как же возникла такая задача...
На одном из существующих web проектов решили внедрить поддержку цветовых тем. Для этого выделили некий набор используемых цветов и заменили их на переменные (например: "основной фон" - белый цвет (#fff), "цвет основного текста" - черный (#000), "цвет рамок" - серый (#ccc), "основной активный цвет" - синий (#37809f) и т.д.). Если нужен был немного светлее текст или голубоватый фон - использовались альфа каналы для основных цветов, а не добавлялись новые. Небольшой пример:

See the Pen Case: Blending colors by Stanislav (@slavko23) on CodePen.

  • (1) - Исходный цвет-переменная
  • (2) - Исходный цвет-переменная с альфа каналом 0.5
  • (3) - Статический результирующий цвет
  • Розовый блок служит для отображения прозрачности у среднего блока

Как мы видим наложение 2-го блока на белом фоне и третий блок без прозрачности имеет одинаковый цвет. Т.е. браузер отобразил (смешал) или наложил цвет с прозрачностью на белый фон и показал нам результирующий цвет.

В целом данный подход на проекте имел свои плюсы и минусы. Но решал возложенные на него задачи на тот момент. Были моменты где полупрозрачность была не уместна, так как под элементом могли находится иные и они друг на друга накладывались. Но что если нас устраивает результирующий цвет и мы знаем какой цвет фона используется, но не хотим заводить новых переменных? - мы должны получить результирующий цвет и указать его в стилях без прозрачности!

Можно найти готовые функции для преобразования и работы с цветами, и их преобразованием в JavaScript. Но нас интересует данная возможность в таблицах стилей (CSS). В нашем случаем используется препроцессор SCSS (SASS), поэтому решение делаем для него. Для этого идем на w3.org и знакомимся со спецификацией и о том как происходит наложение

Example of task

Изучив всю нужную информацию пишем SCSS функцию

See the Pen Solution: Blending colors by Stanislav (@slavko23) on CodePen.

Используя формулы из спецификации получаем простую SCSS функцию для смешивания цветов в двух вариантах.

Конечно в нашей ситуации применения тем - нужно передавать переменные цветов, а для функции можно указать цвет фона по умолчанию для каждой темы. Таким образом мы сможем контролировать смешивание цветов! Но будьте внимательны, в поддержке данный подход может оказаться намного проблемней, нежели создать больше переменных без альфа канала и управлять ними.

Обратите внимание! Проект на Бета версии Подробнее