Цвет решает больше, чем кажется. Он управляет вниманием, подчеркивает смысл и делает макет «дороже» без лишнего дизайна. В этой статье ты соберешь рабочую палитру и научишься проверять ее в Figma, даже если у тебя нет художественного бэкграунда.
Если ты делаешь лендинги, презентации или брендинг в Figma, тебе не нужен курс по живописи. Тебе нужна система: базовые правила, практический алгоритм и чеклист, который спасает макеты от мутных комбинаций.
- Рабочая палитра состоит из 3-5 ролей (фон, основной текст, акцент, вторичный акцент, нейтральные), а не из «10 красивых цветов».
- Ты начинаешь с оттенков с понятной логикой. Затем проверяешь контраст, и только после этого добавляешь акценты.
- Чтобы палитра выглядела согласованно, ты ограничиваешь насыщенность и варьируешь только светлоту.
- В Figma ты фиксируешь цвета как стили, чтобы сохранять единую систему в макете.
- Ты тестируешь палитру на типографике, иконках и UI-элементах, а не на случайных градиентах.
Что такое теория цвета простыми словами
Теория цвета описывает, как люди воспринимают сочетания оттенков и почему одни композиции выглядят гармонично, а другие спорят с читаемостью. В практической работе важны две вещи: различимость (контраст) и согласованность (ощущение «одной семьи»).
Тебе не нужно помнить десятки терминов. Достаточно понять, что цвет состоит из параметров. Основные из них: оттенок (hue), насыщенность (saturation) и светлота (lightness). Когда ты контролируешь эти параметры, палитра перестает быть случайной.
Понятия, которые пригодятся в Figma
Обычно не дизайнеры теряются в словах вроде «комплементарные» или «аналоговые». Для работы достаточно простого правила: оттенки могут «сближаться» (аналогичные), «контрастировать» (комплементарные) или «балансировать» (триада и тетрада).
Но даже идеальная схема на цветовом круге не спасет плохую читаемость. Поэтому ты всегда ставишь контраст и роль цвета выше модной комбинации.
Почему «красиво» не равно «работает»
Красивый цвет в изоляции не гарантирует, что он выдержит текст, формы, кнопки и состояния интерфейса. На макете ты увидишь проблемы: блеклый заголовок, «дрожащий» акцент, нечитаемые серые.
Рабочая палитра проходит три проверки: читаемость текста, логика иерархии и унификация стилистики во всех компонентах.
Как собрать рабочую палитру: алгоритм из 6 шагов
Собери палитру как систему, а не как набор декоративных цветов. Следующий алгоритм помогает получать результат быстрее и меньше «перебирать» оттенки.
Ты можешь применить его к бренду, презентации или экрану в продукте. Он одинаково хорошо работает для личных проектов и для коммерческих макетов в Figma.
Шаг 1. Назначь роли цветам
Возьми 3-5 ролей и под каждую выбери один цвет. Роли упрощают дизайн и уменьшают хаос. Примеры ролей:
- Фон (Background)
- Основной текст (Text / Body)
- Заголовки или акцент для важного (Primary Accent)
- Вторичный акцент (Secondary Accent)
- Нейтральные для линий, карточек, пустот (Neutral UI)
Когда роли фиксированы, ты перестаешь «искать лучший цвет». Ты ищешь лучший оттенок под конкретную задачу.
Шаг 2. Выбери базовый оттенок и проверь светлоту
Начни с одного «главного» оттенка, который отражает характер бренда. Это может быть спокойный сине-зеленый, энергичный красный или теплый земляной. После этого проверь светлоту: насколько оттенок подходит для фона и для текста.
Обычно один и тот же цвет можно использовать в разных состояниях, если ты меняешь светлоту. Это удерживает палитру в одной логике и делает ее цельной.
Шаг 3. Ограничь насыщенность
Для рабочих макетов ограничься двумя уровнями насыщенности. Пусть основная графика живет на умеренной насыщенности, а «сигнальные» элементы. кнопки и ссылки. получают чуть выше насыщенность.
Так ты избегашь ситуации, когда фон конфликтует с акцентами и вся страница выглядит «шумной».
Шаг 4. Построй нейтральные и контраст
Нейтральные не должны выглядеть одинаковыми. Ты формируешь семейство серых или бежевых с разной светлотой: для текста, для подложек, для линий. Это и есть визуальная иерархия.
Контраст проверяй на примерах: заголовок на фоне, текст абзаца на фоне, состояние ссылки и иконки в интерфейсе.
Шаг 5. Добавь 1-2 акцента максимум
Акцент отвечает за действие или важность. Пусть у тебя будет один основной акцент и, по необходимости, один вторичный. Вторичный чаще всего используется для ссылок, бейджей или выделений внутри текста.
Когда акцентов становится больше, ты начинаешь спорить с самим собой: что важнее, куда смотреть, чем отличается «основное действие» от «второстепенного».
Шаг 6. Зафиксируй палитру как стили в Figma
В Figma закрепи цвета как стили и используй их в компонентах. Это защищает палитру от «случайных» оттенков, которые всплывают при ручном выборе пипеткой.
Если ты рисуешь кнопки, карточки и бейджи, то сначала назначай роли, затем применяй стили, а уже после подбирай точные значения. Порядок экономит время.
Pro tip: сначала собери черновую палитру из ролей, а потом уже добавь «красивый» цвет. Если сделать наоборот, ты затянешься в подбор и сломаешь читаемость.
Какие цвета выбирать для фона и текста
Фон и текст делают интерфейс понятным. Все остальные оттенки работают на фоне этих двух решений. Поэтому ты начинаешь именно с них и только потом «украшаешь» макет.
Даже если ты не дизайнер, ты легко получишь хороший результат, если научишься мыслить светлотой: темнее для текста, светлее для фона, а акцент оставишь для сигналов.
Сценарий 1. Светлая тема, которая не «кричит»
Светлый фон чаще всего выглядит лучше, когда ты не используешь чистый белый. Чуть более теплый или чуть более серый фон уменьшает усталость и делает картинку мягче.
Текст ставь на темный нейтральный. Заголовки могут стать темнее или немного смещаться по насыщенности, но не «уезжать» в другой характер.
Сценарий 2. Темная тема без грязи
Темная тема требует аккуратных нейтральных. Ты получаешь грязные серые, если используешь один и тот же темный оттенок для фона и текста или если текст уходит в слишком серый вариант.
Правило простое. фон всегда темнее, чем основной текст, и ты добавляешь разницу светлоты для карточек и линий.
Сценарий 3. Гибридные страницы с карточками
Если у тебя страница с карточками, то ты создаешь отношения между тремя уровнями: фон страницы, подложки карточек и линии. Эти уровни должны отличаться светлотой, а не только оттенком.
Если карточки конкурируют с фоном, снизь насыщенность карточек и используй нейтральные линии для разделения.
Ошибка, из-за которой макет кажется «дешевым»: ты берешь случайные серые и используешь один оттенок на весь UI. Макет теряет иерархию, а глаз начинает искать контент там, где его нет.
Как выбирать акценты: кнопки, ссылки, статусы
Акцентные цвета работают как навигация. Они говорят пользователю, где действовать и что важно прямо сейчас. Если акцент выбран неправильно, он либо спорит с контентом, либо становится незаметным.
Ты получишь стабильный результат, если назначишь акцент как роль: кнопки, ссылки, выделения и статусы. А затем подбираешь оттенки с понятной светлотой.
Кнопки: один акцент, два состояния
Сделай базовый цвет кнопки и состояние при наведении или активное состояние, где светлота меняется на один шаг вверх или вниз. Так ты сохраняешь характер оттенка и не превращаешь кнопку в отдельный «цветовой мир».
Если ты используешь контрастный текст на кнопке, следи за нейтральными. белый текст на яркой кнопке обычно работает лучше, чем текст с оттенком, который затемняет читаемость.
Ссылки: вторичный акцент и единый стиль
Ссылки часто становятся слишком агрессивными, когда совпадают по цвету с кнопками. В системах без сложных компонентов лучше назначать ссылкам вторичный акцент или чуть более спокойную версию основного.
При этом ссылки должны оставаться узнаваемыми на фоне. Здесь помогает разница светлоты и подчеркивание в типографике, если ты используешь его по проектным правилам.
Статусы: красный, зеленый и их нейтральные версии
Статусы любят «классы» восприятия: ошибка, успех, предупреждение. Не дизайнеры часто делают ошибку. они используют один и тот же красный для всего. Для статусов лучше хранить семейства оттенков и работать через светлоту и прозрачность.
Сделай так, чтобы иконка и фон статуса поддерживали смысл, а текст оставался читаемым.
Хорошая практика для ускорения макетов: когда ты строишь систему акцентов, ты меньше споришь с заказчиком или с собой. Ты показываешь не «цвет мечты», а набор ролей: кнопка, ссылка, бейдж, ошибка, успех.
Как проверить палитру в реальных макетах и типографике
Проверка палитры начинается не с палитры. Она начинается с текста, заголовков, пустых областей и реальных UI-элементов. Ты тестируешь цвет на задачах, а не на картинках из вдохновения.
Когда ты повторяешь проверку на разных секциях, ты быстро находишь «слабые места». обычно это серые, вторичные тексты и тонкие линии.
Проверка 1. Иерархия заголовок, подзаголовок, абзац
Сделай три строки текста. заголовок, подзаголовок и абзац. Разведи их по светлоте и размеру шрифта. Цвет закрепляй ролями, а не подбором на глаз.
Если подзаголовок становится почти тем же цветом, что и абзац, пользователь теряет структуру. Уменьши светлоту или добавь нейтральное различие.
Проверка 2. Тонкие элементы и состояния
Проверь иконки, линии и состояния карточек. Тонкие линии легко растворяются, когда нейтральные цвета слишком близки по светлоте.
Если у тебя есть hover и selected, протестируй их на реальных фрагментах, а не на пустом прямоугольнике.
Проверка 3. Медиа, обводки и изображения
Изображения часто меняют восприятие палитры. Если ты кладешь яркий визуал на нейтральный фон, акценты должны поддерживать его, а не спорить.
Собери страницу-прототип: герой, карточки, секция с цитатой или списком, форма или кнопка. Потом быстро «перекрась» и посмотри, что ломается.
| Проверка | Что тестировать | Признак проблемы | Что поправить |
|---|---|---|---|
| Типографика | Заголовок, подзаголовок, абзац | Подзаголовок сливается с текстом | Разница по светлоте нейтральных |
| Линии и карточки | Границы, разделители | Линии растворяются | Увеличь контраст нейтральных |
| Акценты | Кнопки, ссылки, бейджи | Акцент не направляет взгляд | Изменить светлоту акцента |
| Состояния | Hover, selected, disabled | Состояния выглядят одинаково | Разные уровни прозрачности или светлоты |
Если ты делаешь брендинг, сохраняй палитру как «минимальный набор». Потом ты добавишь декоративные цвета. но система ролей останется постоянной.
Как использовать палитру в брендинге без дизайнерских знаний
Брендинг держится не на количестве цветов. Он держится на повторяемости и на том, как цвет поддерживает характер: спокойствие, энергия, премиальность или дружелюбие.
Ты можешь собрать бренд-палитру даже без художественного чутья, если привяжешь цвета к сценариям: где ты продаешь, где ты рассказываешь, где ты ведешь пользователя к действию.
Выбери «температуру» бренда
Цвета ведут себя как температура. Теплые оттенки чаще дают эффект близости и активности. Холодные. стабильности и технологичности. Нейтральные серые и бежевые связывают и успокаивают.
Твоя задача. выбрать один температурный доминирующий характер, чтобы палитра не прыгала между стилями.
Используй один «герой-цвет» и нейтральный каркас
Сделай каркас из нейтральных. светлый фон, темный текст, линии. Потом добавь герой-цвет как акцент. Он будет появляться в кнопках, заголовках и важных метках.
Так ты получишь ощущение единого бренда даже тогда, когда ты меняешь фотографии или шрифты.
Подстраивай палитру под контент
Если твой контент связан с едой, природой или ремеслом, лучше работают теплые нейтральные и умеренные акценты. Если ты делаешь IT или продуктовую документацию, чаще выигрывают холодные и нейтральные системы с аккуратным акцентом.
Смотри на то, что происходит на реальном носителе: карточки, списки, формы. Цвет должен помогать читателю, а не отвлекать.
Большая часть «ощущения качества» в макетах появляется из-за корректной типографики и правильных нейтральных. Цвет становится магией, когда он обслуживает иерархию, а не мешает ей.
Чеклист палитры для Figma перед публикацией
Перед тем как экспортировать макет или отдавать его разработке, прогоняй палитру через простой чеклист. Этот список помогает не «чинить» визуал по кругу.
Используй его каждый раз, когда добавляешь новый экран, блок или карточку. Ты поймаешь проблемы на ранней стадии.
Чеклист
- У тебя есть роли: фон, текст, основной акцент, вторичный акцент, нейтральные UI.
- Ты назначил цвета как стили в Figma и используешь их в компонентах.
- Заголовок, подзаголовок и абзац читаются на нужном фоне.
- Линии и разделители отличаются светлотой, а не только оттенком.
- Акцентовые кнопки и ссылки заметны, но не перегружают страницу.
- Статусы различаются и имеют читаемый текст.
- Изображения не ломают визуальную иерархию (фон и обводки поддерживают визуал).
Как ускорить подбор, если ты застрял
Когда выбор цветов стопорится, ты не продолжаешь искать. Ты возвращаешься к роли. Замени цвет фона нейтральным из той же семьи. Затем подтяни текст к правильной светлоте.
После этого ты обновляешь акцент и только потом смотришь на вторичные элементы.
- Рабочая палитра всегда опирается на роли и светлоту, а не на «вдохновляющие» оттенки.
- Проверяй палитру на типографике и UI-элементах, а не только на картинках.
- Ограничь насыщенность и добавь максимум 1-2 акцента.
- Закрепи цвета в Figma как стили, чтобы макеты не разъезжались.
- Используй чеклист перед публикацией, чтобы не ловить проблемы на поздних этапах.
Если ты делаешь продуктовые материалы, презентации или визуальные наборы, практическая палитра помогает быстрее собирать дизайн из готовых блоков. Например, ты можешь взять структурированный шаблон и «подкрутить» цвета под свой бренд-персонаж, а не начинать с нуля.
Кому-то подходит подход «палитра первой, контент второй», а кому-то проще начать с готовых работ и потом подстроить цветовую систему. В любом случае твоя палитра должна пережить тест на читаемость.
Хочешь мягкую подсказку с правильной стартовой точкой для типографики и структуры? Посмотри Logo Font & Lettering Bible как основу для согласованности букв и акцентов в визуальной системе.
FAQ: теория цвета и палитры в Figma
Сколько цветов нужно в рабочей палитре?
Для большинства макетов хватает 3-5 ролей. Ты используешь один цвет для фона, один для основного текста, один-два акцента и семейство нейтральных для линий и подложек. Так палитра остается управляемой.
Что важнее: гармония по кругу или контраст?
Контраст важнее. Гармония по кругу помогает визуальной согласованности, но без читаемости текста палитра не работает в интерфейсе. Сначала ты обеспечиваешь различимость, затем настраиваешь акценты.
Как понять, что акцент «не дотягивает»?
Ты замечаешь это, когда пользователь не сразу находит кнопку или ссылку. Проверь акцент в карточках, на разных фонах и рядом с заголовками. Чаще всего не хватает разницы по светлоте или насыщенности.
Можно ли делать палитру из одного любимого цвета?
Да. Выбери главный оттенок и строй нейтральные и акценты через изменение светлоты и ограничение насыщенности. Такая палитра получается цельной и проще масштабируется на разные экраны.
Как быстрее всего поддерживать палитру в Figma?
Создай стили и используй их в компонентах. Не переключай цвета руками в каждом макете. Когда стили исправлены, все экраны обновятся вместе, и ты не получишь «случайные» оттенки между блоками.
Если тебе хочется развить навык дальше, выбери один тип макетов, например презентации или лендинги, и повторяй один и тот же алгоритм палитры на каждом проекте в течение 4-6 итераций. Ты заметишь рост быстрее, чем от разрозненных подборов.
Мягкий следующий шаг. собери палитру под свой текущий проект в Figma и сделай один экран-прототип по ролям. Если захочешь, подстроим ее под твой контент и формат.
