Режимы смешивания в CSS: Цветовая теория и практическое применение.

Вы можете быть знакомы с "режимами смешивания", если вы пользуетесь Photoshop; они позволяют совмещать слои разными способами и с ними интересно экспериментировать. Режимы смешивания в CSS полностью не поддерживаются на данный момент, но они на пути к этому.

В этом туториале мы разберем, как работают режимы смешивания и рассмотрим разные способы применения этих режимов посредством CSS.

Основы смешивания

Если вы никогда не работали с режимами смешивания, то на первый взгляд, то, как они работают может выглядеть немного неясным. Давайте рассмотрим подробнее.

Что же "режим смешивания" значит на самом деле?

Режимы смешивания доступны в дизайнерском ПО уже в течении многих лет, однако сама концепция этого понятия используется с незапамятных времён.

"Смешивание" буквально значит то, что мы берем два цвета и совмещаем их некоторым способом в один. Более точно выражаясь, мы берём две пиксельные карты и смешиваем их между собой.

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

Займёмся вычислениями

Если у вас действительно амбициозны, посмотрите официальную документацию W3C FX Task Force, в которой объясняются математические операции для каждого режима смешивания (наложения). Там приводятся формулы, которые использутся при вычислении результатов наложения.

Cm = B(Cb, Cs)

• Здесь, Cm - результирующий цвет после наложения.
• B обозначает функцию наложения.
• Cb обозначает цвет фона.
• И переменная  Cs для источника цвета.

Все цвета описываются в пределах шкалы 0-1, которая преобразуется в шкалу rgb с диапазоном 0-255.

Есть две категории режимов наложения. Первая считается категория "не разделяемых" режимов, а вторая (как это не удивительно) - "разделяемых". Разделяемое это наложение или нет - это полностью определяется алгоритмом, по которому оно рассчитывается. Если алгорить одинаковым образом обрабатывает все каналы цвета (красный, зеленый и голубой), то такой режим наложения считается не-разделяемым. Если каждый канал при расчете используется отдельно, такой режим наложения считается разделяемым.

Все режимы смешивания могут возвращать цвета которые лежат в диапазоне от 0 до 255. Все что за пределами этого диапазона, будет обрезаться. Когда вы видите большую полощадь белого или черного цвета после наложения, вероятно, что в этих областях, произошло обрезание величин.

Типы Режимов Наложения Доступные в CSS

В СSS режимы наложения, поддерживаются, и существуют разные варианты. Первый тип режима наложения называется background-blend-mode. Это свойство позволяет вам смешать все фоны внутри одного элемента друг с другом.

Если, например, вы зададите, фон с несколькими изображениями (поддерживается во всех браузерах выше IE8), первое изображение будет обрабатываться как источник,  и другие изображения добавленные потом, будут обрабатываться как фоновые изображения, лежащие под первым.

При добавлении цвета (который должен быть последним в списке) создается в самом низу дополнительный слой. Цветной фон будет отрабатываться как фоновое изображения, а  изображение, как источник. Рассмотрим это на примере:

1

div {

2

    background: 

3

    url(img/pattern.png), 

4

    url(img/jellyfish.jpg),  

5

    #f07e32 ;

6

}

Это дает нам:

И далее мы можем добавить режим наложения, чтобы все смешать:

1

div {

2

    background: 

3

    url(img/pattern.png), 

4

    url(img/jellyfish.jpg),  

5

    #f07e32 ;

6

    background-blend-mode: screen;

7

}

Здесь у нас два div-а, один используется без режима наложения, а другой с ним:

Второй тип наложения, mix-blend-mode, позволяет независимые элементы смешивать друг с другом. Это более специфичный режим, но смешивание происходит в "контексте наложения".

Вот что происходит когда используется mix-blend-mode, при попытке смешать фоновое изображение с цветом в пределах одного элемента (легкий режим):

1

.my-overlay-element {

2

  background-color: #f07e32;

3

  background-image: url(img/jellyfish.jpg); // Note: This image will not be blended with the background color.

4

  mix-blend-mode: color-dodge;

5

}

Ниже, вы можете найти интерактивную демонстрацию, для исследования эффектов данного наложения.

Разделяемые Режимы Наложения

Давайте рассмотрим доступные режимы наложения, проверив используемые формулы, и применим их к красному кругу размещенному поверх нашей медузы.

Screen:

1

B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]

Screen поулчил свое название из идеи проецирования нескольких изображений на один экран. Получающийся цвет всегда несколько светлее, чем смешиваемые цвета.

Darken:

1

B(Cb, Cs) = min(Cb, Cs)

Выбирает более темный из двух цветов.

Lighten:

1

B(Cb, Cs) = max(Cb, Cs)

Выбирает более светлый из двух цветов.

Color dodge:

1

if(Cb == 0)

2

    B(Cb, Cs) = 0

3

else if(Cs == 1)

4

    B(Cb, Cs) = 1

5

else

6

    B(Cb, Cs) = min(1, Cb / (1 - Cs))

Режим Color dodge высветляет фоновый цвет, отражая цвет источника.

Color burn:

1

if(Cb == 1)

2

    B(Cb, Cs) = 1

3

else if(Cs == 0)

4

    B(Cb, Cs) = 0

5

else

6

    B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)

Color burn затемняет фоновый цвет, увеличивая контраст между источником и фоном.

Hard light:

1

if(Cs <= 0.5)

2

    B(Cb, Cs) = Multiply(Cb, 2 x Cs)

3

else

4

    B(Cb, Cs) = Screen(Cb, 2 x Cs -1)  

Использует умножения для светлых цветов и режим screen для темных. По сути, “hard light” является противоположностью режиму “overlay”, который идет у нас следующим.

Overlay:

1

B(Cb, Cs) = HardLight(Cs, Cb)

Использует режим “screen” для светлых цветов и  “multiply” для темных; записывается так же как и “hard light”, только аргументы меняются местами.

Soft light:

1

if(Cs <= 0.5)

2

        B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)

3

    else

4

        B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)

5

with

6

    if(Cb <= 0.25)

7

        D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb

8

    else

9

        D(Cb) = sqrt(Cb)

При этом режиме наложения используется умножение для темных областей и режим screen, для светлых (похож на screen).

В этом алгоритме мы видим вторичную функцию D, которая задается в множестве with на основе доли синего цвета в цвете. Конечный результат обычно намного более мягкий, чем «overlay».

Difference:

1

B(Cb, Cs) = | Cb - Cs |

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

Exclusion:

1

B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs

Режим exclusion похож на “difference”, за исключением того, что подобные цвета приводят к более низкому контрасту между величинами (менее темным областям).

Не-разделяемые Режимы Наложения

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

Важное замечание: Safari не поддерживает режимы “hue”, “saturation”, “color”, или “luminosity” ни в режиме mix-blend-mode ни в режиме background-blend-mode.

1

ClipColor(C)

2

  l = Lum(C)

3

  n = min(Cred, Cgreen, Cblue)

4

  x = max(Cred, Cgreen, Cblue)

5

6

  if n < 0.0

7

    Cred = l + (((Cred - l) * l) / (l - n))

8

    Cgreen = l + (((Cgreen - l) * l) / (l - n))

9

    Cblue = l + (((Cblue - l) * l) / (l - n))

10

11

  if x > 1.0

12

13

    Cred = l + (((Cred - l) * (1 - l)) / (x - l))

14

    Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l))

15

    Cblue = l + (((Cblue - l) * (1 - l)) / (x - l))

16

17

  return C

18

19

SetLum(C, l)

20

  d = l - Lum(C)

21

  Cred = Cred + d

22

  Cgreen = Cgreen + d

23

  Cblue = Cblue + d

24

25

  return ClipColor(C)

26

27

Sat(C) = max(Cred, Cgreen, Cblue) - min(Cred, Cgreen, Cblue)

Обратите внимание, что функции min, mid и max вычисляют минимальную, максимальную и среднюю величины соответственно. (Мid - это не среднее значение трех величин) Величины Cred, Cgreen и Cblue - обозначаются количество красного, зеленого и синего цвета представленное в цвете С.

Разобравшись с этими определениями, мы теперь можем взглянуть на неразделяемые режимы наложения.

Hue:

1

B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))

Этот режим применяет оттенок исходного слоя к яркости и насыщенности цвета фона.

Saturation:

1

B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))

Этот режим делает то же самое, что и режим hue-«оттенок», но вместо этого применяет насыщенность переднего плана к оттенку и яркости фона.

Color:

1

B(Cb, Cs) = SetLum(Cs, Lum(Cb))

Применяет оттенок и насыщенность переднего плана к яркости фона.

Luminosity:

1

B(Cb, Cs) = SetLum(Cb, Lum(Cs))

Этот режим применяет яркость слоя с источником к оттенку и насыщенности фонового слоя.

Заключение

Режимы наложения в CSS дают новую возможность и гибкость, позволяют эксперементировать с эстетикой дизайна. Понимание математики и теории цвета, которые стоят за этими режимами наложения, дает для вас доступным более целостное и осознанное использование этого инструмента.

Что вы будете делать, если браузеры будут развивать возможности использования режимов наложения?

Ссылки по теме

• Посмотрите, что делают авторы используя Экшены Photoshop и Режимы наложения на Envato Market
• Узнайте больше о режимах наложения из руководства от Mozilla Developer Network
• Сочетание и Смешивание в CSS статья Sara Soueidan