Вы собрали сайт на Тильде. Заголовки — фиолетовые, кнопки — синие, фон — в клеточку. Цвета не связаны между собой и не выполняют никакой логической роли — из-за этого страдает структура, а пользователь теряется на странице. Почему-то выглядит плохо. Цвета вроде бы яркие и красивые, но сайт напоминает дешёвый флаер с почтового ящика.
Почему так происходит? Потому что у цветов нет структуры. Чтобы сайт выглядел аккуратно и современно, важно подобрать не просто красивые оттенки, а выстроить между ними понятную иерархию. Вот как это сделать, даже если вы не дизайнер. Узнайте подробнее о правильном создании сайтов на Тильде у профессионалов этого направления.
Что такое цветовая схема и зачем она нужна
Цветовая схема — это не просто набор оттенков, а система. У каждого цвета в ней есть своя роль:
- цвет фона,
- основной текст,
- заголовки,
- кнопки,
- ссылки и акценты.
Если ролей больше, чем цветов, сайт выглядит пёстро. Если все цвета одинаково яркие — у пользователя расфокус, он не понимает, куда смотреть. Если цвета выполняют чёткие роли — сайт выглядит собранно и понятно.
Например:
- Серый или почти белый фон — для основного полотна сайта.
- Тёмно-серый или чёрный — для основного текста.
- Один насыщенный цвет — для кнопок и акцентов.
- Один дополнительный цвет — для фонов блоков или вторичных элементов.
Плохо: каждый блок окрашен в новый цвет, кнопки не отличаются от фона, ссылки незаметны.
Хорошо: цвета работают как подсказки: на что обратить внимание, где нажать, где читать.
Как выбрать цвета, которые смотрятся современно
Современные сайты обычно строятся на контрасте: светлый фон + тёмный текст + 1–2 акцента. Яркость, кислотные оттенки и радужные градиенты уже не в моде. Работают сдержанные, «грязные» цвета, которые ближе к природе: оливковый, тёплый бежевый, глубокий синий.
Вот как собрать такую палитру — ниже пример одной из типовых цветовых схем:
Фон: #FAFAFA (айвори)
Основной текст: #1F1F1F (тёмно-серый)
Акцент: #3778C2 (индиго)
Дополнительный: #D1E9FF (приглушённый голубой)Теперь — как это собрать самому:
- Фон:
#FAFAFA(айвори) или#F5F5F5(светлый серый) - Основной текст:
#1F1F1F(тёмно-серый) - Акцент:
#3778C2(индиго) или#2F855A(тёмно-зелёный) - Дополнительный:
#D1E9FFили#F0F4F8
А как же чёрный фон? Это работает, если вы делаете сайт для арт-проекта или портфолио. Но даже там нужен контраст и структурность. Светлый текст, минимализм, отсутствие лишних цветов — вот как его спасти.
Где взять готовые палитры — и как использовать их в Тильде
Если нет желания или опыта подбирать цвета вручную — используйте готовые схемы. Есть сервисы, где дизайнеры уже подобрали оттенки, проверили их на контраст и сочетаемость:
- coolors.co
- happyhues.co
- tailwind.ink
Там вы можете:
- выбрать палитру по ключевому цвету,
- посмотреть, как она выглядит на сайте,
- скопировать HEX-коды.
Дальше:
- Откройте настройки проекта в Тильде.
- Перейдите в «Шрифты и цвета».
- Вставьте свои цвета в поля фона, текста, ссылок, кнопок.
Можно также задать цвета вручную в каждом блоке — но лучше использовать глобальные настройки, чтобы всё выглядело единообразно.
Частые ошибки при работе с цветами
- Слишком много цветов.
Кажется, что «весело», но выглядит как ярмарка. 3–4 цвета — максимум. - Отсутствие иерархии.
Если кнопка того же цвета, что и заголовок — непонятно, где кликать. - Низкий контраст.
Светло-серый текст на светлом фоне — неудобно читать. Особенно на мобильных. - Слишком яркий текст.
Красный, синий или зелёный текст раздражает глаз. Текст — это фон, не крик. - Нет системы.
Если вы каждый раз вручную задаёте новый цвет кнопке — через 10 блоков всё развалится.
Как протестировать цветовую схему на реальном сайте
- Пройдитесь по сайту как обычный пользователь. Где останавливаетесь? Видно ли, где кликать?
- Проверьте контраст: WebAIM Contrast Checker. Вставьте код текста и фона, получите оценку.
- Посмотрите сайт на телефоне. Всё ли читается? Не рябит ли?
- Покажите другу. Если он говорит «глаза не режет» — вы близки к цели.
Цвет — это не украшение, а инструмент. Хорошая палитра — это не набор «любимых» цветов, а чёткая система: что на что контрастирует, что выделяет главное, а что помогает не мешать.
Не хотите возиться — возьмите готовую палитру. Хотите разобраться — начните с фона, добавьте акцент, проверьте контраст. И не забывайте: лучше три цвета, чем семь — но с понятными ролями.
- Используйте 3–4 цвета: фон, текст, акцент, дополнительный.
- Задавайте роли цветам: не более одного цвета на один смысл.
- Проверяйте читаемость на всех экранах.
- Лучше простое, чем кричащее.
- Всё, что можно — настраивайте глобально в «Шрифтах и цветах».
