Взаимодействие цвета

То есть, речь сегодня пойдёт скорее про продвинутые методики, детали на острие ножа, которые не всегда будут заметны невооружённым взглядом, а тем более неподготовленным созерцателям ваших работ. Ну тогда зачем нам это, Ванильный Гром, зачем ты тратишь наше время? Всё потому что я уверен, годы работы убедили меня, что работа дилетанта от работы профессионала отличается только этими самыми деталями и вниманием к ним. Дилетант использует прозрачность в создании гармонии, а профессионал подбирает всё руками; дилетант использует контраст, а профессионал использует осознанный контраст; дилетант делает всё по наитию, а профессионал может аргументировать каждое своё решение.

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

И снова физика

Буквально в паре слов напомню, что из себя представляет цвет и почему он неразрывно связан со светом. Согласно корпускулярно-волновой теории, цвет представляет собой пучок энергии с определённой длиной волны. Чистый белый свет представляет набор из всех цветов, то есть весь видимый спектр, собранный в одном луче. Но стоит этому лучу упасть на какой-то объект, часть энергии поглотится, а часть объект отразит блуждать во внешний мир. И вот мы уже видим вполне определённый цвет. Есть тела, которые поглощают абсолютно весь свет, падающий на них — такие тела называют абсолютно чёрными. Как думаете, что это за объекты такие? Ну например сажа или субстанция Vantablack, состоящая из параллельно ориентированных углеродных нанотрубок, — поглощает 99,965 % падающего на неё излучения.

Да-да, картинку никак не обрабатывали (по крайней мере я), это реальная фотография двух одинаковых медных бюстов, один из которых обработан Vantablack. Вот тут можно посмотреть видосик. Как вы можете видеть, эффект поразителен, мало того, что любой цвет пропал, так ещё и любые блики и полутени, что заставляет задуматься, а существует-ли здесь вообще пространство. В общем, Vantablack воистину внушает мне трепет.

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

Вот свет из окна попал на него, и голодный карандаш скушал все волны, кроме зелёных, которые мы и увидели. Да, так дела обстоят в объективной реальности, но на практике всё происходит иначе.

Давайте вспомним, как мы видим цвет, чтобы понять, как каждый из нас ломает объективную модель мира. Отраженный свет этого карандаша улавливается нашим зрачком, фокусируется и проникает в глазное дно. Ловушка захлопнулась, а внизу его ждёт только сетчатка со своим набором цветочувствительных колбочек и палочек: специальных рецепторов-интерпретаторов цвета. Их у нас существует три вида: красно-оранжевые, зелёные и синие (напоминает rgb). Хотя современная теория восприятия скорее гласит, что мы улавливаем разницу между цветовыми комбинаторными парами, сейчас это нас не волнует. Важно, что всё изображение, попавшее на сетчатку, анализируется нашими рецепторами с точки зрения цвета, и передаётся дальше в мозг для расшифровки. И, как вы, наверное, уже могли догадаться, проблема субъективности и лежит именно в этом механизме.

Индивидуальная объективность

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

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

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

Вторая мысль, которая не даёт мне покоя, это тот факт, что цвета объектов зачастую рассматриваются в вакууме. То есть, раз карандаш поглотил весь свет, кроме зелёного, значит он зелёный. Но проблема в том, что мне по-барабану, что он там поглотил, я вижу его в среде, где на него воздействует ещё тысяча факторов, которые искажают моё восприятие. То есть классическая модель рассматривает цвет объекта вместо того, чтобы говорить о его восприятии, а ведь именно это для нас главное: работы, которые мы создаём, будут восприниматься такими же людьми, как и мы, которым также будет наплевать, кто там что поглощает. Мы рассматриваем картину целиком, со всеми её связями и взаимодействиями, потому использование реального цвета объектов будет ошибкой.

И, наконец, третье. Хочу задать вам вопрос: что это за цвет — #A90015? Да, вы верно поняли, это цветовой код, который указывает наличие в конечном цвете красного, зелёного и синего компонентов. И всё кажется понятным, и у вас даже может получится смешать всё в голове. Но вы скажете, что это цвет помады Джокера? (а это реально он) Понимаете, к чему я веду? Вряд ли, когда вам нужно будет изобразить ванильное мороженное, вы откроете огромную книгу с надписью «Каталог цветов на все случаи жизни», найдёте там ванильное мороженное и посмотрите, какой цвет вам использовать. Проще же найти картинку и пикнуть цвет оттуда. Но если мороженное такое должно быть освещённым отражённым водной гладью светом падающей звезды, то вряд-ли вы найдёте хоть что-то подобное в выдаче. Поэтому, лучше работать и изучать не отдельные цвета, а скорее свод правил, по которым цвет работает.

Выводы из моего бурчания:

— математическая цветовая модель может передать реальный цвет объекта, но это будет отличаться от того, как зритель его видит,

— цвет, который мы видим, никогда не бывает один, он скорее находится в среде, которая его искажает,

— запоминайте правила поведения и взаимодействия цвета, а не коды или конкретные цвета в конкретных ситуациях.

Цветовая гармония

Когда вы услышали или увидели название «Цветовая гармония», что пришло вам в голову? Что вы вкладываете в это понятие? Лично моё мнение, что этот термин немного исказился со временем, ведь по сути, любая палитра может быть гармоничной в том или ином контексте. Любимый пример Людвига Быстроновского с «несочетаемыми красным и зелёным»: просто посмотрите на грядку с клубникой. То есть цветовая гармония — это лишь мера, слаженности цветовой палитры, которая служит определённой цели, вызывая необходимое эмоциональное переживание.

Если говорить о гармонии в целом, то её разновидностей бывает много: слушая музыку, мы попадаем в волшебный мир нот и переходов между ними, когда слух наполняют стройные созвучия; когда мы наблюдаем хореографию, нас зачаровывает безупречный язык тела, разговор, который затеял с нами танцовщик; ну а если нам довелось лицезреть гармонию архитектуры, то она, бесспорно, рождается из сложных взаимодействий света, пространства и формы, которая раскрывается с тем, как мы изучаем объект.

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

И в этом сложном уравнении каждая переменная влияет друг на друга. То есть добавляя новый цвет в палитру, все прежние цвета уже не будут восприниматься так же. С этой точки зрения, любая попытка систематизировать нахождение гармоничной палитры обречена на провал. Конечно, сейчас многие сервисы предоставляют возможность воспользоваться классическими правилами создания гармоничных палитр, используя , например, комплементарные цвета или монохромное распределение, но ведь каждый цвет влияет на восприятие других, равно как и среда. Причём происходит это с разными цветами по-разному, потому не стоит полагаться только на автоматику в этом вопросе, придётся марать и ручки.

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

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

Все это можно сравнить с кулинарией, где основной рецепт не меняется, но повар чуть правит его для лучшего вкуса. И как и кулинария, построение гармонии — это навык, которому можно и нужно обучиться упорно тренируясь.

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

Контраст

Один из основных способов достижения гармонии в цветовой палитре — это работа с контрастом. Как вы понимаете, под ним не подразумеваю выкручивание кривых и уровней, а скорее говорю о соотношении определённых параметров цвета. Но зачем вообще нужна эта работа? В одной из своих прошлых лекций я говорил о том, что внимание похоже на воду или реку, а контраст — это ландшафт. То есть, если контраст будет высоким, мы создадим «гору», и вода бурным потоком потечёт сверху вниз. В то же время, если перепад высот будет небольшим, то и внимание будет растекаться по всей поверхности, создавая расслабленную гармонию. Таким образом контраст влияет на внимание пользователя, его восприятие всей композиции. А значит, если вы хотите привлечь внимание к определённой детали, то вы должны сделать её контрастнее. И цвет как раз и может в этом помочь. Вот на какие критерии мы можем смотреть:

1. цветовой тон,
2. светлота,
3. насыщенность,
4. количество цвета и его форма.

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

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

С цветовым тоном всё обстоит довольно сложно, ибо даже малейший сдвиг может пагубно сказаться на результате: вы же помните, что я говорил про разную чувствительность рецепторов у разных людей? Так вот, мало того, что чувствительность отличается от человека к человеку, так ещё и она неравномерно распределена между рецепторами. Например, самым широким спектром восприятия будет обладать зелёный цветовой тон, потому и работать с ним так сложно, чего так боятся современные иллюстраторы (посмотрите хоть на dribbble).

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

Ну а пока я поделюсь одним небольшим трюком, который поможет вам сладить цвета между собой: используйте общий знаменатель. То есть, если два цвета слишком сильно контрастируют между собой, вы можете добавить в каждый частичку партнёра, ну а если это набор цветов, или при разбавлении цветов друг другом получается грязь, то вы можете использовать третий цвет-партнёр, который привнесёт единство. В качестве примера приведу… а чёрт знает, как они называются. В общем штуки, которые засыпают в горшок с растениями.

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

В примере с цветовой палитрой я использовал тот же приём, капнув в каждый цвет немного синей основы, придав им этот самый общий знаменатель.

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

Здесь, я уже не трогал цветовой тон, а манипулировал исключительно насыщенностью и светлотой, что позволило немного снять соперничество малинового и персикового, оставив один доминантный цвет, а второй использовать в качестве помощника. Ну и теперь мы можем сравнить результат:

Я не буду говорить сделал ли я палитру хуже или лучше потому, как всё зависит от контекста применения, возможно в какой-то ситуации, моя согласованность сыграет и в минус. Этим упражнением, я лишь хотел показать, как мы можем манипулировать цветом, придавая целостности нашему восприятию.

Взаимодействие

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

Цвета взаимодействуют друг с другом — Эффект Безольда

Мы говорили про разные цветовые модели, о том, как получаются цвета, но не сказали о том, что чтобы получить нужный оттенок, цвета можно смешивать прямо в глазу. Я не предлагаю использовать чьи-то глаза, как палитру… или предлагаю. В любом случае, меня никто не осудит, ибо этот приём уже использовали задолго до меня художники экспрессионисты. Если присмотреться к их картинам, сразу становится не по себе: цвета-то вовсе не те, коими мы их видим. Они похожи, скорее, на какие-то беспорядочные мазки, которые обретают смысл только в нашем восприятии.

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

Думаете, как бы это применить? Что ж, я думаю, что вы в любом случае примените этот эффект, хотите вы того, или нет, точнее он применится сам собой. Вопрос лишь в том, будете ли вы готовы к такому повороту.

Я бы хотел, чтобы мы раз и навсегда уяснили (я вообще не устаю это повторять), что все цвета взаимосвязаны и влияют друг на друга. Эффект Безольда является лишь утрированным примером этой связи. На самом деле это самое смешение в восприятии будет происходить на всех уровнях. Возьмём конкретный пример.

Как вам кажется, какая из полосочек не подвергалась манипуляциям моими потными ручками? Правильный ответ — верхняя. Можете перепроверить, просмотрев hex цветов слева и справа у каждой полосочки. Как видите, оказавшись в разных контекстах цвет повёл себя совершенно по-разному. Всё потому, что наше зрение подвергается воздействию и среды и объекта, искажая восприятие. Этакий эффект Безольда в бета-версии, только цвета не смешиваются полностью, а изменяются.

Объекты взаимодействуют друг с другом

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

Это происходит из-за полноценного отражения, которое так часто встречается в нашем мире и зависит от текстуры объекта, на который отражается излучение: если объект глянцево гладкий, то и отражение будет чётким и насыщенным, в то время как, если объект матовый — цвета смешаются мягко.

Но даже если вы уберёте все искажающие объекты, оставив лишь один предмет… он всё равно будет взаимодействовать, но уже со средой.

Объекты взаимодействуют со средой

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

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

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

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

Этот приём актуален для работ с перспективой или несколькими планами, создавая реалистичную глубину. Для этого, вам нужно смещать цветовую палитру объекта ближе к цвету атмосферы, уменьшая контраст, так чтобы казалось, что он погружается в туман.

Источник света тоже вносит свои коррективы, например, он может делать тени синее, если сама его температура низкая. То есть, если лампа ламповая и светит приятным жёлтым светом, то тени, отбрасываемые освещённым предметом, становятся синее. И наоборот. Но и это ещё не всё, температура света, это не единственный параметр, который может исказить восприятие, но и сам цвет света (световые фильтры). Этим пользуются продавцы фруктов, своими цветными крышами.

Относительность цвета

Прежде чем продолжить, я бы хотел спросить, как мы можем классифицировать цвета? Я услышал что-то наподобие «Тёплый — Холодный». Тогда давайте сыграем в игру с аналогичным названием. Считается, что прототипом тёплого цвета будет красный…

… а холодного синий…

давайте посмотрим, так-ли это на самом деле:

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

На самом деле левый чёрный цвет — это цвет белой газеты, взятый из загиба, а светло-серый справа — это цвет с правого плеча пиджака.

Это еще один принцип, который я бы хотел, чтобы вы уяснили — это то, что цвет относительный, а потому какая-либо классификация вряд-ли представляется возможной без контекста. А ниже я приведу несколько примеров, как этот контекст может задаваться.

Смещение цветового зрения — Эффект Пуркинье

Совсем недавно я столкнулся в жизни с этим эффектом и позвольте поведать историю эту и вам. Сидим мы как-то с моим сыном, читаем его книжку с Малышариками, а там, чтобы вы понимали, всего 8 страниц, так что я успел досконально изучить каждую, раз за разом начиная сначала. И вот солнце уже почти село, и я в очередной раз переворачиваю страницу и спрашиваю «А где ёжик?»… и сам не могу его найти. Словно он заделался в морпехи, раскрасил гуталином лицо и нырнул в кусты. Если честно, я немного испугался и за свои глаза и за чистоту своего нижнего белья. Но спустя мгновение я уже смотрел в глаза пропаже, вспоминая эффект Пуркинье. Не то, чтобы я вот помнил, как он называется, нет, я просто знаю, что наше цветовое восприятие очень сильно завязано на количество света.

Если быть более конкретным, то при ярком белом свете, например в середине дня, мы видим жёлтые и красные цвета ярче синих, но всё меняется с приходом ночи. Тогда, как раз синие цвета выступают вперёд, а красные и жёлтые кажутся почти чёрными. Потому-то фиолетовый Ёжик в сумерках сравнялся по восприятию с более жёлтой травой и смог укрыться от моего всевидящего ока.

Что же делать нам с этою бедой, если как бы мы не старались, всё равно наши цвета будут искажены столькими параметрами? На самом деле, всё не так плохо, ведь в цифровой среде средством отображения будет монитор, который сам по себе излучает свет, а значит и искажения, вызванные недостатком освещённости, будут минимальны. Другое дело, что ваша палитра, в сумерках и ночью может неплохо давить на зрение пользователя. Потому я предлагаю применять смену палитры в сменах дня и ночи, как это делает, например Medium. Да и сам Android обладает такой штукой, как Night Light, который делает все отображаемые цвета теплее и приглушённее, снижая нагрузку на зрение.

Эффект Вебера-Фехнера

Ещё одним удачным примером того, как математика не соотносится с реальностью, будет как раз эффект Вебера-Фехнера, гласящий, что простое равномерное распределение в рамках цветового тона не будет восприниматься как равномерный цветовой ряд.

Для пущей наглядности (мне, чтобы понять в, чём суть, потребовалось несколько раз перечитать определение) давайте говорить о конкретном примере. Допустим, мы хотим создать цветовую палитру или градиент от красного к чёрному, такую, как на тизере выше. Подобного эффекта, казалось бы, можно добиться просто смешивая красный с чёрным сперва 1 к 1, потом 1 к 2, потом 1 к 3, потом 1 к 4 и так далее. Однако визуально это будет восприниматься не так как задумано. Чтобы компенсировать эффект сглаженного восприятия и достигнуть необходимого контраста, нужно использовать геометрическую последовательность, то есть смешивать красный с чёрным 1 к 1, 1 к 2, потом 1 к 4 и 1 к 8. Сравните два ряда (справа выровненный вариант).

Это всё к тому, что геометрическая прогрессия цветового тона воспринимается мозгом как арифметическая. То есть, чтобы скорректировать восприятие, нам нужно сделать шаг между темными тонами больше. Актуально для создания унифицированных палитр типа Material Color.

Практика

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

Чтобы вам было удобнее, я поделюсь своим исходником в Sketch, но думаю, вы запросто сможете повторить подобное и в любом другом редакторе. Ну что, погнали!

Один цвет, как два: используя цвета-помощники и цвет среды попробуйте сделать так, чтобы один и тот-же цвет выглядел бы по-разному.

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

Использование эффекта Безольда: создайте цвет из двух составляющих прямо в глазу созерцателя.

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

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

Тёплый, как холодный а холодный, как тёплый* : задание со звёздочкой, здесь мы можете поэкспериментировать с другими цветовыми тонами, для постижения этого эффекта. Дерзайте.