Выбор идеальной цветовой комбинации может быть сложной задачей для многих дизайнеров. Даже с учетом множества онлайн-ресурсов, которые помогают подобрать цветовые палитры, трудно определить, сколько и какого цвета нужно использовать, а также как и когда правильно распределить цвета в дизайне.
В этой статье, вдохновленной Толулопой Сабой и Дэном Ромеро, я расскажу, как создать цветовую палитру, начиная с одного цвета, и легко применять цвета в своих проектах, используя проверенное правило 60–30–10.
Несколько важных факторов при выборе цвета
При выборе цвета важно учитывать не только его визуальные качества, но и психологию цвета, а также его влияние на восприятие вашего дизайна. Используя цвет в нужных пропорциях, вы можете создать атмосферу элегантности, добавить динамики или вызвать нужную эмоцию у пользователя. Например, с помощью правильной цветовой схемы можно передать образ игривой молодежности или же передать серьезность и строгость.
Знания о психологии цвета помогут вам направлять эмоции пользователей и побуждать их к нужным действиям.
Еще один совет: чтобы создать наилучшую палитру, стоит использовать яркие и насыщенные цвета, которые сделают ваш дизайн более выразительным и привлекательным.
Правило 60–30–10
Правило 60–30–10 — это простое и универсальное правило, заимствованное из дизайна интерьера, которое поможет вам легко создать гармоничную цветовую схему. Суть правила заключается в следующем: основной цвет занимает 60% пространства, вторичный цвет — 30%, а акцентный цвет — 10%.
Создание палитр
Для применения правила 60–30–10 нам нужна подходящая цветовая палитра. Вы можете создать свою палитру, начиная с одного цвета, используя два основных метода. Один из них — это настройка значений насыщенности (S) и яркости (L), другой — изменение только яркости, чтобы получить более светлый или темный оттенок (цветовая схема HSL).
Первая техника
Первый шаг — выбрать наш основной цвет. С его помощью мы можем создать наши вторичные и акцентные цвета.
Чтобы создать вторичный цвет, мы дублируем наш основной цвет, затем устанавливаем значение насыщенности (S) в диапазоне от 5 до 10 и сохраняем значение яркости (L) в диапазоне от 90 до 95.
Последний шаг — создать наш акцентный цвет, установив значение оттенка (H) на 50, а значение яркости (L) — в диапазоне 70–80.
Теперь применяем эти цвета в дизайне. Основной цвет используем в 60% проекта (например, как фоновый цвет или для основных элементов). Вторичный цвет — в 30% (для элементов второго уровня, текста, значков). Акцентный цвет — на кнопках призыва к действию (CTA) и других акцентных элементах.
Прелесть этого правила в том, что вы можете экспериментировать, меняя пропорции и вариации цвета, создавая интересные и уникальные решения!
Вторая техника
Также можно создать совершенно другую палитру, изменяя только значение яркости исходного цвета.
Мы создаем наш вторичный цвет, устанавливая значение яркости в диапазоне 20–30, а наш акцентный цвет — устанавливая значение яркости в диапазоне 80–90.
Это позволит вам создать более разнообразные палитры, сохраняя гармонию в дизайне.
Раскройте потенциал в веб-дизайне!
Мечтаете не просто изучить основы, а стать востребованным профессионалом? Тогда приглашаю вас на мой авторский курс «Обучение веб-дизайну: от новичка до эксперта».
Что вас ждет на курсе:
- Полное погружение во все этапы создания интерфейсов и сайтов
- Практическая работа в Figma на реальных проектах
- Формирование сильного портфолио для уверенного старта
Начните создавать стильные и удобные цифровые продукты и прокладывайте путь к успешной карьере веб-дизайнера уже сегодня! 🚀