Теория цвета, пожалуй, является важнейшим визуальным элементом UX-дизайна. Цвет способен влиять на эмоции, и правильно подобранная цветовая палитра может увеличить конверсию и общее удовлетворение пользователей продуктом.
Понимание таких аспектов теории цвета, как цветовой круг, цветовое пространство и то, как разные цвета вызывают определённые эмоции, является важной основой при проектировании продуктов. Теория цвета сочетает в себе науку и искусство. Важно помнить, что создание хороших цветовых комбинаций требует как знаний, так и интуитивного понимания, приобретаемого на практике.
Цветовой круг (Color wheel)
Цветовой круг — это круговая диаграмма, отображающая цветовые оттенки и показывающая взаимосвязь между первичными, вторичными и третичными цветами. Впервые он был представлен сэром Исааком Ньютоном в его книге «Оптика» (Opticks) в 1704 году.
Цветовой круг является полезным инструментом для создания цветовых схем и палитр. Он служит визуальным руководством для понимания того, как различные цвета взаимодействуют друг с другом, и помогает дизайнерам создавать гармоничные и сбалансированные цветовые сочетания. Традиционно он содержит 12 оттенков: 3 первичных, 3 вторичных и 6 третичных цветов.
Существуют два типа цветовых кругов: субтрактивный (вычитающий) и аддитивный (добавляющий). В полиграфии и печати используется субтрактивная модель цвета, где основными цветами являются циан, маджента и жёлтый (CMY). В цифровой среде чаще всего применяется аддитивный цветовой круг с основными цветами — красным, зелёным и синим (RGB).
Тёплые цвета (Warm colors)
Тёплые цвета в теории цвета вызывают ощущение энергии, страсти и уюта. К ним относятся оттенки красного, оранжевого и жёлтого. Представьте себе яркий закат или потрескивающее пламя костра — это классические примеры тёплых тонов. Понятие «тёплых цветов» вошло в художественный обиход благодаря ирландскому поэту Оливеру Голдсмиту в XVIII веке.
Тёплые цвета могут быть очень интенсивными, особенно в чистом виде. При использовании в качестве акцентных цветов они добавляют жизни и динамики в дизайн. В больших количествах без соответствующего баланса они могут подавлять восприятие. В любом случае они оказывают сильное влияние на любой дизайн.
Холодные цвета (Cool colors)
Холодные цвета широко используются в брендинге. Синий цвет является наиболее популярным холодным цветом в мире. Другие холодные цвета — зелёный и фиолетовый, а также их многочисленные оттенки. Концепция холодных цветов появилась даже раньше тёплых, благодаря французскому искусствоведу Роже де Пилю в 1708 году.
Холодные цвета часто встречаются в природе — в воде, небе и растениях. Эти цвета вызывают ощущение спокойствия и расслабления, а также ассоциируются с лояльностью и доверием (ещё одна причина их популярности в брендинге). В UX-дизайне синий цвет также широко ассоциируется с текстовыми ссылками.
Нейтральные цвета (Neutral colors)
Создать эстетически приятный дизайн, используя только тёплые и холодные цвета, сложно. Именно здесь на помощь приходят нейтральные цвета. Нейтральные цвета наиболее сдержанны и включают чёрный, белый, серый и различные оттенки коричневого. С технической точки зрения коричневый является приглушённым оттенком оранжевого и считается самым тёплым из нейтральных цветов.
Нейтральные цвета популярны для типографики, фонов и создания вайрфреймов (wireframing). Также они могут использоваться для того, чтобы акцентные цвета стали более выразительными, однако при неправильном применении нейтральные цвета легко подавляются другими оттенками.
Совет! Используйте нейтральные цвета, чтобы придать вашему продукту более изысканный вид.
Цветовая палитра (Color palette)
В цифровом дизайне цветовая палитра — это не просто случайный набор оттенков. Это тщательно подобранный набор цветов, предназначенный для того, чтобы вызвать определённое настроение или эмоции.
Использование последовательной цветовой палитры не только придаёт продукту целостный внешний вид, но и наделяет его уникальной индивидуальностью. Это помогает объединить разные продукты под одним брендом, обеспечивая пользователям знакомый визуальный ориентир.
Дизайнерам не всегда нужно создавать палитру с нуля. Если продукт или услуга уже существует некоторое время, вероятно, уже есть брендбук, который поможет ускорить процесс разработки дизайна.
Аддитивная модель цвета (Additive color model)
В цифровом дизайне наиболее часто применяется аддитивная модель цвета, так как именно её используют цифровые экраны. Основные цвета аддитивной модели — красный, зелёный и синий (RGB).
Термин «аддитивная» обозначает, что при добавлении цветов смесь становится светлее и при полном сочетании всех цветов достигает белого. Джеймс Клерк Максвелл считается основоположником аддитивной цветовой модели благодаря своим экспериментам со светом и цветовыми спектрами. В 1861 году он продемонстрировал первую цветную фотографию в Королевском институте.
Субтрактивная модель цвета (Subtractive color model)
Субтрактивная модель цвета основана на смешении пигментов, чернил, красок или красителей. Термин «субтрактивная» («вычитающая») объясняется тем, что при добавлении каждого нового цвета смесь отражает всё меньше света и становится темнее, постепенно приближаясь к чёрному.
В искусстве субтрактивная модель основана на тех первичных цветах, которые мы изучали в детстве: красный, жёлтый и синий. В печати и дизайне субтрактивная модель основана на трёх основных цветах: циане, мадженте и жёлтом. Для точного воспроизведения цветов часто используется дополнительный ключевой цвет, обычно чёрный.
Первичные цвета (Primary colors)
Первичные цвета — это основа всех других цветов. Их невозможно получить путём смешивания других оттенков. В субтрактивной модели цвета (печать, шелкография, живопись) первичные цвета — циан, маджента и жёлтый. В аддитивной модели цвета (цифровые экраны) это красный, зелёный и синий.
В дизайне первичные цвета обладают мощным визуальным и психологическим эффектом. Обычно их используют в чистом виде в качестве акцентов, чтобы не перегружать восприятие. Однако, если требуется произвести сильное впечатление, использование первичных цветов в большем объёме будет оправдано.
Вторичные цвета (Secondary colors)
Вторичные цвета образуются путём смешения двух первичных цветов. В субтрактивной (вычитающей) цветовой модели вторичными цветами являются красный, синий и зелёный, а в аддитивной (добавляющей) модели — циан, маджента и жёлтый.
Обратите внимание, что первичные цвета субтрактивной модели (циан, маджента, жёлтый) становятся вторичными в аддитивной модели. Точно так же красный, синий и зелёный цвета являются первичными в аддитивной модели и вторичными — в субтрактивной. Несмотря на то, что эти цветовые модели работают противоположным образом, они тесно связаны между собой.
Третичные цвета (Tertiary colors)
Третичные цвета создаются при смешивании первичного и вторичного цветов в равных пропорциях. В обеих цветовых моделях (аддитивной и субтрактивной) к третичным цветам относятся оттенки, такие как лазурный (azure), оранжевый (orange) и фиолетовый (violet). Это возможно потому, что первичные и вторичные цвета в двух моделях инвертированы, однако включают те же самые 6 оттенков.
Смешивание третичных цветов с первичными или вторичными образует следующий уровень цветов, называемых четвертичными (quaternary colors).
HEX-код цвета (HEX triplet)
HEX-коды (шестнадцатеричные коды цвета) — один из способов представления RGB-цветов, широко используемый для задания цветов в CSS. HEX-коды начинаются со знака «#» и обычно состоят из 6 шестнадцатеричных символов (цифры от 0 до 9 и буквы от A до F). Каждая пара символов в коде отображает интенсивность красного, зелёного и синего цветов (RGB).
Формат записи: #RRGGBB
- RR: красный цвет (от 00 до FF)
- GG: зелёный цвет (от 00 до FF)
- BB: синий цвет (от 00 до FF)
Вот примеры HEX-кодов:
- Чёрный: #000000
- Белый: #FFFFFF
- Красный: #FF0000
- Зелёный: #00FF00
- Синий: #0000FF
- Жёлтый: #FFFF00
Иногда HEX-код может содержать четвёртую пару символов, обозначающую степень прозрачности (альфа-канал). В некоторых случаях встречаются и трёхзначные HEX-коды, где каждый цвет представлен одним символом вместо двух.
На нашем сайте представлена подробная статья о том, как работают цвета в цифровой среде.
Цветовая модель RGB (RGB color model)
Цветовая модель RGB (Red, Green, Blue — красный, зелёный, синий) наиболее часто применяется в UX-дизайне, поскольку именно её используют цифровые экраны. Она сочетает красный, зелёный и синий цвета света, что позволяет получить более 16 миллионов оттенков (точнее, 16 777 216). Следует учитывать, что RGB — это устройство-зависимая цветовая модель, то есть разные устройства могут отображать одни и те же значения RGB по-разному.
Цвета RGB представлены комбинацией трёх числовых значений, обозначающих интенсивность каждого из основных цветов. Обычно каждое значение находится в диапазоне от 0 до 255, где 0 — это отсутствие интенсивности цвета, а 255 — максимальная интенсивность. Эти три значения часто записываются в формате (R, G, B). Например, (255, 0, 0) соответствует чистому красному цвету, (0, 255, 0) — чистому зелёному, а (0, 0, 255) — чистому синему.