Цвет

Что такое цвет?

Язык, который видят все

Думаешь, что уже все знаешь про цвета и эту часть можно смело скипать? Ха! Да что ты знаешь? Что красный — цвет опасности? С таким багажом знаний ты долго не протянешь.

Хочешь открою секрет? Обычно именно Junior дизайнеры думают, что все знают. Давай ты сначала до мидла дойдешь, а потом поговорим? Садись и слушай, сейчас будем разбирать базу.

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

Еще он может подавать в мозг быстрые сигналы («зеленый» — одобрено, «желтый» — новое уведомление).

Цвет может работать на атмосферу (неон будоражит, а черный манит своей таинственностью).

А самое главное — он может управлять вниманием. Акцентные цвета буквально кричат зрителю «Эй! Посмотри на меня, запомни! Кликай!».

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

А самое обидное, что без знания основ работы с цветом твой дизайн всегда будет выглядеть «сырым».

Психология цвета

Начнем с увлекательного — психология цвета

Наше подсознание воспринимает некоторые цвета, как символы. Отчасти это накопленный многими поколениями опыт (синий = прохлада, потому что вода имеет синий оттенок), отчасти заложено современной визуальной культурой (красный = ошибка). Знание таких ассоциаций действительно может облегчить работу, но…

Не спеши радоваться! Хваленая «психология цвета" — это не панацея. Никто не даст тебе четкой инструкции где какие оттенки применять, все зависит от контекста.

Сейчас мы разберемся с основами этой теории, а дальше в ход идет твое критическое мышление

Итак, погнали, смотри видос

скачать памятку

тут будет душно

Ну что, поразвлекался? Теперь поговорим о серьезных вещах.

Поэтому на повестке дня вопрос: что такое цветовые модели?

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

Цветовые модели

Цветовые модели: что такое код цвета?

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

RGB (Red, Green, Blue)

Чисто красный

Как работает? Чем больше значения — тем ярче цвет.

Где используется: Всё, что светится — экраны, сайты, соцсети, цифровые дисплеи.

Как читать код? Каждый канал имеет значение от 0 до 255. Код — это то, как они смешиваются

RGB — Аддитивная модель (цвет создаётся путём «сложения света»)

rgb(255, 0, 0)

Чисто зеленый

rgb(0, 255, 0)

rgb(255, 225, 225)

Белый (max. яркость)

Черный (min. яркость)

rgb(0, 0, 0)

Красный + синий

rgb(225, 0, 225)

CMYK (Cyan, Magenta, Yellow, Key/Black)

Чисто красный (маджента+желтый)

Как работает? Чем больше красок — тем темнее результат. Чёрный (K) добавляется отдельно, чтобы избежать грязи при смешивании CMY.

Где используется: Печатная продукция — визитки, плакаты, и все остальное, что вылезает из принтера.

Как читать код? Каждый канал имеет значение от 0 до 100%. Код — это то, как они смешиваются

Субтрактивная модель (цвет создаётся путём поглощения света краской).

cmyk(0%, 100%, 100%, 0%)

cmyk(0%, 0%, 0%, 0%)

Белый (за белый отвечает бумага)

Черный (добавляется параметром K)

cmyk(0%, 0%, 0%, 100%)

Зеленый (циан+желтый)

cmyk(100%, 0%, 100%, 0%)

HEX коды

HEX-коды: цветовой язык для компьютеров (по сути тот же RGB)

Если в RGB цвета задаются числами от 0 до 255, то HEX «переводит» эти числа в систему, понятную компьютерам и веб-браузерам.

Как читать код? Здесь используется тот же формат RGB, каждый канал имеет значение от 00 до FF. Код — это то, как они смешиваются

Откуда взялись буквы? Шестнадцатеричная система использует 16 символов: цифры 0-9 и буквы A-F где:

A = 10, B = 11, ..., F = 15.
Это позволяет одной парой символов описать диапазон 0–255 (например, FF = 15×16 + 15 = 255).

Почему умножаем на 16? HEX — числа в 16-ричной системе. Каждая цифра кодирует степень 16.
Например:

#FF0000 → F(15) * 16¹ + F(15) * 16⁰ = 240 + 15 = 255 (ярко-красный).
#009B00 → 9 * 16 + B(11) = 155 (темно-зеленый).
#00008E → 3 * 16 + D(13) = 61 (тёмно-синий).
#22FF4A → 2*16 + 2 = 34 (красный канал); F(15) * 16 + F(15) = 255 (зеленый канал); 4*16 + A(10) = 74 (синий канал)→ RGB(34, 255, 74)

Суть: Первый символ пары ×16, второй + как есть. Это «адрес» цвета для компьютера.

#FF0303

#88F6FD

#DAF500

#D000F5

#2AF500

#6400BD

#2A00F5

HSL (Hue, Saturation, Lightness)

Зачем нужен HSL? Удобно для подбора гармоничных оттенков (например, тёмно-синий → hsl(240°, 100%, 25%))

Где используется: Там же, где и RGB и HEX

Как читать код?

Hue (тон): 0-360° (0° — красный, 120° — зелёный, 240° — синий).
Saturation (насыщенность): 0% (серый) — 100% (яркий).
Lightness (светлота): 0% (чёрный) — 100% (белый).

Модель, основанная на восприятии цвета человеком.

Pantone (Spot-Color)

Pantone — это система стандартизированных цветов для точного воспроизведения.

Где используется? Зачастую в печатной продукции, так как номера Pantone гарантируют, что цвет будет одинаковым на любом материале.

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

429 C

PANTONE

Жми и крути

И что теперь делать?

Резонный вопрос: «что делать с этими цветовыми кодами? Как составить палитру для проекта?». Цветовой код — это просто «буквы», чтобы создавать «слова», «предложения» и целые «рассказы», нужно изучить цветовые схемы.

Что такое цветовые схемы? Оххх, оказывается все еще более запущено, чем я думал. Говоря простым языком, цветовые схемы — это варианты сочетания цветов, используя которые, дизайн точно будет выглядеть гармонично.

Раз уж ты совсем ничего не помнишь, начнем с самого начала. На дворе 1672 год, Исаак Ньютон крутит в руках прозрачную призму и обнаруживает, что луч, проходя сквозь нее разлагается на 7 цветов, а вместе они дают белый свет (короче, своего рода радугу он изобрел).

Что было дальше? Спустя чуть меньше чем 300 лет Иттен придумал свой цветовой круг. Теперь все используют его для создания разных цветовых схем.

Крути круг и он расскажет тебе все о схемах!

Жми и крути

Комплементарное сочетание

Комплементарное сочетание — это цвета-враги с противоположных сторон круга (красный ↔ зеленый, синий ↔ оранжевый).

Зачем: Чтобы выделить главное.

Как применять:

80% дизайна — основной цвет (например, синий фон).
20% — его комплемент (оранжевая кнопка «Купить»).
Осторожно: Не делай 50/50 — будет как новогодняя ёлка.

Жми и крути

Контрастная триада

Контрастная триада — это основной цвет + пара соседних комплиментарному (например, желтый ↔ сине-фиолетовый и розовый).

Зачем: Если хочется контраста, но без «кричащего» эффекта.

Как применять:

Основной цвет — доминирует (желтый).
Два соседних к его «врагу» — для акцентов (сине-фиолетовый заголовок, розовая иконка).
Фишка: Смягчает резкость, но сохраняет драйв.

Жми и крути

Классическая триада

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

Зачем: Для ярких, но сбалансированных проектов.

Как применять:

Один цвет — основной (фиолетовый фон).
Два других — поровну для деталей (зелёный текст, оранжевые кнопки).
Лайфхак: Используй один цвет в насыщенном варианте, остальные — приглушённые.

Жми и крути

Аналоговая триада

Аналоговая триада — это три соседа по кругу (например, синий, сине-зелёный, зелёный).

Зачем: Для гармонии без резких переходов.

Как применять:

Средний оттенок — база (сине-зелёный фон).
Соседи — для градиентов или тонких акцентов.
Важно: Добавь контраст через нейтральный (белый/серый) или тёмный текст.

Жми и крути

Тетрада (квадратная)

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

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

Как применять:

Два цвета — основа (синий фон, жёлтые заголовки).
Два других — для мелких элементов (розовые иконки, зелёные рамки).
Секрет: Один цвет должен быть явным лидером, иначе выйдет «каша».

Жми и крути

Прямоугольная схема

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

Зачем: Для мягкого, но разнообразного дизайна.

Как применять:

Тёплые оттенки — для акцентов (оранжевые кнопки).
Холодные — для фона (сине-зелёный).
Фишка: Напоминает природные сочетания — не раздражает глаз.

контраст

Вот мы и добрались до самой важной и, одновременно, самой сложной части разговора про цвет. Эта часть — контраст.

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

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

Что такое? Неудобно читать? Приходится щуриться? А все потому что тут контраст низкий.

Ну что ты тут завис? Давай скорее заканчивай, ты вообще знаешь что нас ждет впереди, когда ты сдашь свой первый плакат?!

Хочешь спойлер? Тыкай кнопку и я приоткрою тебе завесу тайны следующих уровней)))

узнать что впереди

ловушка контраста

А знаешь в чем основная подлянка?

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

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

Не веришь?

Теперь то ты понял как легко налажать с контрастом?

Ну смотри, этот экран я верстал не меньше часа и на мой взгляд он вполне читабельный. Знаешь, изначальный вариант был какой то слишком яркий. Текст такой супер черный, хотелось его успокоить. Я понижал и понижал контрастность…

Что, плохо видно? Жаль, а мне казалось будет супер. Ну ладно, давай поправим

Не паникуй раньше времени, есть инструменты, которые помогут избежать такой оказии, о них поговорим чуть ниже.

Контраст — это не про «красиво/некрасиво». Это про иерархию. Хочешь, чтобы пользователь сначала увидел заголовок, потом подзаголовок, потом кнопку? Сделай их контрастными по отношению друг к другу.

Важно! Эти циферки на моей картинке — это степень контраста, в этом инструменте ее можно проверить.

Результат: Глаз скользит сверху вниз, как по лестнице. Если бы все было одинаково контрастно, это выглядело бы как кричащая толпа в метро в час пик.

Чего вообще можно добиться с помощью контраста?

повысить контрастность

Я заголовок, посмотри на меня! Контраст 21:1 (максимум!)

Я ползаголовок, смотри на меня во вторую очередь! Контраст 7:1

Я кнопка. Контраст 4.5:1

погнали изучать дальше