Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>29 июн 2022</li>

3 <li>0</li>

4 </ul><h2>Как выбрать и создать цветовую схему для сайта</h2>

5 Не можете выбрать подходящие оттенки для своего макета? Вам помогут сервисы для подбора цветовой схемы для сайта и наши рекомендации.

6 Иллюстрация: Оля Ежак для Skillbox Media

7 Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.

8 Цветовая схема - это набор нескольких оттенков, которые будут использоваться на сайте. Она поможет создать более продуманный и целостный дизайн, а ещё упростит и ускорит работу.

9 Чаще всего дизайнеры используют уже готовую палитру, опираясь на фирменный стиль, но, если его нет, нужно сделать схему самому. Лучше всего приступать к её созданию после того, как готов прототип, - в этом случае известно, какие элементы будут присутствовать на страницах и сколько оттенков может понадобиться.

10 Чтобы научиться подбирать красивые сочетания оттенков и улавливать гармонию, придётся потратить немало времени на самообучение. Если времени нет, а к работе нужно приступать уже сейчас, сосредоточьтесь на основах.

11 Изучите фирменные цвета конкурентов, а если их нет, обратите внимание на оттенки, используемые в смежной отрасли.

12 Попросите у клиента всю информацию о рекламных продуктах компании - если повезёт, вам выдадут брендбук и вопрос подбора цвета отпадёт сам собой.

13 Найдите как можно больше референсов: если боитесь выбирать оттенки самостоятельно, подборку можно отправить заказчику и обсудить с ним возможные решения.

14 Существует много разных инструментов для создания палитры. Мы выбрали восемь популярных - среди них есть сервисы и для начинающих дизайнеров, и для профессионалов.

15 <a>Adobe Color CC</a> - разработка компании Adobe, создавшей Photoshop, Illustrator и десяток других программ. У инструмента гибкие настройки.

16 В сервисе<a>Adobe Color CC</a>можно выбрать правило гармонии цвета и настраивать предложенную палитруСкриншот: сайт<a>Adobe Color CC</a>/ Skillbox Media<a>Colormind</a> - продвинутый сервис для создания цветовой схемы для сайта. Онлайн-инструмент генерирует палитру, позволяет тонко настраивать каждый оттенок, а также составляет подборку цветов на основе загруженного изображения.

17 В сервисе<a>Colormind</a>есть функция подбора цветов специально для сайтов и лендингов. Она находится в разделе Website Colors, там можно сгенерировать интересную цветовую схему, увидеть, как цвета будут выглядеть на элементахСкриншот: сайт<a>Colormind</a>/ Skillbox Media<a>Coolors</a> - бесплатный генератор цветовой палитры, который за считанные секунды создаёт хорошие варианты. Если предложенная системой подборка вам не нравится, можно сгенерировать новую, задать определённые цвета и заменить оттенки. У сервиса есть плагин для Figma.

18 В сервисе<a>Coolors</a>вы можете найти сотни готовых цветовых палитр, причём у каждой есть счётчик лайков: выбирайте популярные или сложные. Каждую схему можно использовать как есть или откорректировать под себя во встроенном генератореСкриншот: сайт<a>Coolors</a>/ Skillbox Media<a>Color Safe</a>понравится тем, кому небезразлична аббревиатура WCAG (<a>Руководство по обеспечению доступности веб-контента</a>, в которое входит много рекомендаций, помогающих сделать информацию на сайте доступной разным пользователям - например, когда нужно учесть особенности восприятия слабовидящих людей). В алгоритм подборщика встроены необходимые параметры, что удобно при работе над сайтами.

19 В начале работы на <a>Color Safe</a>вам понадобится указать оттенок фона, выбрать один из популярных шрифтов и выставить его размерСкриншот: сайт<a>Color Safe</a>/ Skillbox Media<a>Material Color Tool</a>был создан специально в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.

20 В сервисе<a>Material Color Tool</a>вы можете создавать цветовые схемы из Material-палитры или подбирать собственные оттенки в разделе CustomСкриншот: сайт<a>Material Color Tool</a>/ Skillbox Media<a>Colordot</a> - сервис для тех, кто не привык проводить часы в поисках идеального цвета и готов довериться интуиции. Оттенок подбирается, пока вы водите мышкой по экрану: стоит кликнуть, система запомнит цвет и предложит выбрать следующий.

21 Для минималистичного дизайна интерфейса остановитесь на схеме из трёх цветов - хотя сервис<a>Colordot</a>позволяет создавать палитры из множества оттенковСкриншот: сайт<a>Colordot</a>/ Skillbox Media<a>Colourcode</a>во многом похож на Colordot, но с более гибкими настройками и возможностью выбрать комбинацию оттенков по триадным, монохромным, аналоговым и другим цветам.

22 На сайте<a>Colourcode</a>можно составить схемы со светло-серыми или тёмно-серыми оттенкамиСкриншот: сайт<a>Colourcode</a>/ Skillbox Media<a>Material Design Palette</a>предлагает выбрать два основных оттенка для цветовой схемы для сайта, а потом показывает, как сочетание будет выглядеть на странице. Кроме того, сервис сразу же предлагает расширенную палитру.

23 Готовый набор цветов можно скачать в виде картинки или забрать как CSSСкриншот: сайт<a>Material Design Palette</a>/ Skillbox MediaЕсли хотите научиться лучше разбираться в цветах, обратите внимание на книги. Их по теории цвета очень много, мы рекомендуем следующие три.

24 1. Работа Иоханнеса Иттена "Искусство цвета" считается наиболее полным и масштабным исследованием теории цвета. Книга входит в список обязательных к прочтению для художников, дизайнеров и архитекторов.

25 "Искусство цвета" поможет узнать больше о теории цвета и гармонии оттенковИзображение: Издатель Дмитрий Аронов2. "Тайная жизнь цвета" Кассии Сен-Клер поможет понять, как оттенки меняют восприятие. В своей книге Сен-Клер рассказывает познавательные истории о цветовосприятии, приводит смелые и неожиданные примеры.

26 Из книги "Тайная жизнь цвета" можно узнать много интересных фактов о цветеИзображение: издательство "Бомбора"3. Сьюзан Уэйншенк выпустила уже две части книги "100 главных принципов дизайна". Работа автора посвящена не столько цвету, сколько приёмам, которые помогают удержать внимание пользователя и подтолкнуть его к нужным действиям.

27 "100 главных принципов дизайна" поможет понять, как удержать внимание пользователяИзображение: издательство "Питер"Сегодня мы затронули малую часть дизайнерской деятельности - есть ещё работа со структурой, подбор идеальной шрифтовой пары, создание интерфейса и множество других нюансов, в которых нужно разбираться. Стать крутым специалистом поможет курс "<a>Веб-дизайн с нуля до PRO</a>", а закрепить знания - часы практики и десятки созданных макетов.

28 <a>Курс с трудоустройством: "Профессия Веб-дизайнер" Узнать о курсе</a>