Смешение
цветов
Задайте два цвета и пропорцию — получите результат тремя разными способами сразу. Они дают разное, и понимание этой разницы избавляет от сюрпризов в градиентах и анимациях.
усреднение каналов как есть — так делает большинство редакторов
усреднение настоящих яркостей — физически корректно
пер еход по цветовому кругу, насыщенность сохраняется
Показан наивный переход — тот, что получится при обычной анимации цвета в CSS.
Почему синий с жёлтым дают серый
В школе учат, что синий и жёлтый дают зелёный, и это верно — для красок. Пигмент работает вычитанием: он поглощает часть спектра, и от смеси остаётся то, что не поглотил ни один. Экран же складывает свет, и при сложении синего с жёлтым получается нейтральный серый.
Вторая тонкость касается самого усреднения. Значения в HEX хранят не яркость, а гамма-кодированную величину, поэтому простое среднее выходит темнее физически правильного: #808080 вместо #BCBCBC. Разница заметна на глаз, и именно из-за неё градиенты в вебе иногда выглядят грязными в середине.
- Наивное — среднее каналов, так делают редакторы и CSS
- С учётом гаммы — среднее настоящих яркостей
- Через HSL — переход по кругу, без серого в середине
- Чёрный с белым — наивно #808080, с гаммой #BCBCBC
- Краски — там всё иначе, там вычитание