Колористика
Цвет, палитра, палитра и интерфейс
Этот файл является основным информационным материалом на данной странице.
Теоретическая база по колористике для UI/UX Дизайнера
Во время изучения теории цвета мной так и не было найдено статьи, отвечающей на все мои вопросы понятно, обоснованно и без лишней воды. Отсюда и родилась идея перенести мой черновой конспект, созданный во время изучения этого вопроса, в более публичный формат.
Физика цвета
Не хочу сильно углубляться в физику цвета, но базовое представление о фундаментальных основах понимать полезно, поэтому хотя бы тезисно о них:
В 1676 году Исаак Ньютон с помощью трехгранной призмы разложил белый солнечный свет на цветовой спектр (cм. рисунок выше);
Цвет — отраженная волна света определенной длины и частоты.
Цвет предметов возникает главным образом в процессе поглощения волн. Красный сосуд выглядит красным, потому что он поглощает все остальные цвета светового луча и отражает только красный. Когда мы говорим «эта чашка красная», то мы на самом деле имеем в виду то, что молекулярный состав поверхности чашки таков, что он поглощает все световые лучи, кроме красных.
Чашка сама по себе не имеет никакого цвета, цвет создается при ее освещении.
Если эта тема интересна, то более основательно о ней можно почитать вот здесь. А мы идем дальше.
Цветовой круг и гармония
Цветовой круг
Был создан как инструмент цветового конструирования последователем школы Баухаус, Иоганнесом Иттеном, в 1961г.
До этого на базе своих исследований, свои круги создавали Ньютон и Гете (да тот самый Иоганн Вольфганг фон Гёте, который, между прочим, считал своим основным трудом жизни не “Фауста”, а исследования в области теории цвета 🤷♂️).
Однако цветовое конструирование и по сей день производится на базе цветового круга Иттена.
Согласно Иттену и школе Баухаус выделают 3 первичных цвета или цвета первого порядка:
Желтый
Красный
Синий
Три основных цвета первого порядка(первичные) размещаются в равностороннем треугольнике так, чтобы желтый был у вершины, красный — справа внизу и синий — внизу слева. Затем данный треугольник вписывается в круг и на его основе выстраивается равносторонний шестиугольник. В образовавшиеся равнобедренные треугольники мы помещаем три смешанных цвета, каждый из которых состоит из двух основных цветов, и получаем, таким образом, цвета второго порядка:
желтый + красный = оранжевый;
желтый + синий = зеленый;
красный + синий = фиолетовый
Идея в том, что из сочетания первичных цветов можно получить все остальные цвета, к примеру:
Если смешать синий и красный, то получим фиолетовый цвет второго порядка
Если смешать красный и фиолетовый, то получим красно-фиолетовый (малиновый цвет) третьего порядка
и так далее
Цветовая гармония
Понятие цветовой гармонии должно быть изъято из области субъективных чувств и перенесено в область объективных закономерностей. Гармония — это равновесие, симметрия сил.
Иттен стремился придать объективность понятию гармонии цвета и базировался в определении гармоничности цвета на различных закономерностях:
С точки зрения физики: физик Румфорд первым опубликовал в 1797 году в Никольсон-журнале свою гипотезу о том, что цвета являются гармоничными в том случае, если их смесь даёт белый цвет. Как физик он исходил из изучения спектральных цветов. Ведь если изъять какой-либо цвет, предположим, красный, из цветового спектра, а остальные окрашенные световые лучи — жёлтый, оранжевый, фиолетовый, синий и зелёный — собрать с помощью линзы вместе, то сумма этих остаточных цветов будет зелёной, то есть мы получим цвет дополнительный к изъятому.
С другой стороны изучение физиологической стороны цвета и такого явления как симультанный контраст поможет понять физиологический принцип гармонии цвета. Симультанный контраст — это явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, то есть одновременно, порождает его сам. При резком переключении взгляда с красного квадрата на серое полотно мы увидим на короткий промежуток зеленый квадрат — мозг будет пытаться восполнить отсутствие дополнительного цвета.
Однако, так как художник-колорист работает с цветовыми пигментами (красками), то и цветовой порядок круга должен был быть построен в первую очередь согласно законам пигментных цветовых смесей. Иттен считал, что с точки зрения пигментных смесей, воплощением гармонии является нейтральный серый цвет. Ведь если группа из 2 или более цветов содержит желтый, красный и синий (цвета первого порядка по Иттену) в соответствующих пропорциях, то смесь этих цветов будет серой. (Впоследствии физиолог Эвальд Геринг доказал, что глазу и мозгу действительно необходим средне-серый цвет, иначе при его отсутствии они теряют спокойствие)
Базируясь на этих принципах гармоничности Иттен и выстроил свой цветовой круг, где друг напротив друга располагаются гармоничные, дополнительные друг к другу цвета.
Возьмем к примеру желтый и фиолетовый цвета, находящиеся друг напротив друга в цветовом круге:
Их смесь дает серый цвет, но важный момент для понимания системы конструкции круга состоит в том, что по сути фиолетовый цвет — это смесь синего и красного. И в итоге мы приходим к исходному набору цветов первого порядка, сумма которых дает желанный нейтрально-серый цвет:
Отсюда становится понятно почему комбинация различных геометрических фигур и цветового круга также дает гармоничные сочетания цветов. Возьмем пример с сочетанием цветов “триадой”:
Как вы можете наблюдать на картинке, сочетание зеленого, фиолетового и оранжевого цветов посредством комбинации равнобедренного треугольника и цветового круга есть не что иное, как комбинация желтого, красного и синего цветов в определенных пропорциях, т.е. суммой их сочетания будет нейтрально-серый цвет и такое сочетание будет гармоничным согласно Иттену.
Все цветовые сочетания, которые не дают нам серого цвета, согласно Иттену, считаются экспрессивными или дисгармоничными. Это ни в коем случае не означает, что они плохие, все зависит от цели конкретного художника или дизайнера в конкретной работе.
Параметры цвета
Перед тем как переходить к более практико-ориентированной части нашего теоретического экскурса в цвет, заложим единое понимание базовой терминологии параметров цвета.
Все цвета, которые может видеть человеческий глаз, делятся на хроматические (цвета видимого спектра) и ахроматические (белый, черный и оттенки серого).
Тень — это более темная версия цвета, которая получается путем добавления черного цвета к изначальному.
Оттенок — это более светлая версия цвета, которая получается путем добавления белого цвета к изначальному.
Цветовой тон — это характеристика цвета, отвечающая за его положение в видимом спектре. В обычное жизни это то, что мы называем “цветом”. (пример “Желтый”, “Красный”, “Синий”)
Насыщенность — степень или сила выражения цветового тона. Эта характеристика цвета указывает на количество краски или на концентрацию красителя.
Светлота — относительный цветовой признак, позволяющий оценить степень “светлости” хроматического цвета, сопоставив его с одним из ахроматических цветов. Хочу дополнительно отметить здесь, что термин “яркость” в данном контексте слишком неоднозначен и может быть использован в абсолютно разных значениях, поэтому им пользоваться не рекомендую и далее буду использовать именно термин “светлота”.
Если выстроить ахроматическую колонку цветов, а рядом по горизонтали напротив каждого ахроматического цвета попытаться подобрать соответствующий по светлоте хроматический цвет из двенадцати цветов цветового круга, то мы получим примерно такую картину:
Здесь чистый желтый цвет соответствует третьей строке серого цвета, оранжевый — пятой, красный — шестой, синий — восьмой, а фиолетовый — десятой. Таблица показывает, что чистый желтый цвет является самым светлым из двенадцати цветов, а фиолетовый — самым темным. Так что желтый цвет, чтобы совпасть с темными тонами серой шкалы, должен приглушаться начиная уже с четвертой строки. Чистый красный и синий цвет расположены более глубоко, на расстоянии всего нескольких ступеней от черного и далеко от белого. Каждая примесь черного или белого уменьшает их насыщенность.
Виды цветовых сочетаний
1.Монохромное — 1 тон для которого варьируют светлоту и насыщенность.
2. Родственное(нюансное) — несколько соседних тонов (я бы рекомендовал максимум 3) и у каждого можно варьировать светлоту и насыщенность.
3. Комплементарное — противоположные тона круга и у каждого можно варьировать светлоту и насыщенность.
4. Как мы выяснили ранее, комбинация различных геометрических фигур и цветового круга также дает возможность создавать массу различных гармоничных сочетаний цветов.
Могут быть использованы различные фигуры: равносторонний или равнобедренный треугольники, квадрат или прямоугольник. Эти фигуры можно вращать в пределах круга, получая таким образом различные гармоничные сочетания цветов.
Важно понимать, что в cлучае комплементарной схемы или схемы построенной посредством комбинации цветового круга и геометрической фигуры все равно преобладать должно монохромное или родственное сочетание, а вкрапление комплементарного цвета должно быть локальным и акцентным. Если соотношение комплементарных цветов одинаковое, то акценты потеряются.
Также, в этом контексте нужно помнить о том, как ведут себя комплементарные цвета одинаковой/схожей насыщенности. Поставив такие цвета рядом можно получить эффект “ряби” в глазах из-за симультанного контраста.
Если потеря акцента или вызов такого напряжения глаз не является конечной целью, то лучше избегать такого соотношения цветов.
Цветовые контрасты
Достаточно знать, что можно выделить 7 цветовых контрастов:
Контраст по тону;
Контраст светлого и темного;
Контраст холодного и теплого;
Контраст дополнительных цветов;
Симультанный контраст;
Контраст по насыщенности;
Контраст по площади цветовых пятен.
Бонус — пример использования
На картинке показан пример использования треугольной схемы цветового круга с выделением основного акцентного цвета. “Основа” — создана в HSL-пространстве тона акцентного цвета.
Тона подбирались в Adobe Color. Их свет и насыщенность настраивалась вручную.
Отдельно стоят семантические цвета, которые нарочно выпадают из гармоничной схемы акцентов и имеют наиболее утилитарный смысл: выстроить последовательную ассоциацию между цветом и определенным действием/состоянием.
Другими словами, зеленый — позитив, красный — негатив.
Любая конструктивная критика приветствуется, также пишите в комментариях если было бы интересно почитать больше про практическую сторону вопроса.
Обязательно к прочтению:
Если есть время и желание, конечно же стоит прочитать книгу Иттена “Искусство цвета”. Эта книга лежит в основе всего, что связано с цветом, в том числе в основе этой статьи:
Важно знать и понимать:
Last updated
