Генератор цветовых схем

Q: Можно ли вводить базовый цвет в разных форматах?

Да. Поле ввода автоматически понимает HEX-коды (#6366F1), значения rgb(99,102,241) и hsl(239,84%,67%), а также числа через пробел.

01 Зачем нужен генератор цветовых схем StyleDa

Четыре главные задачи, которые инструмент решает мгновенно для дизайнеров, верстальщиков и владельцев бизнеса:

6 классических правил гармонии

Подбирайте 4–5 идеально сочетающихся цветов без глубоких знаний теории цвета: монохромная, аналоговая, комплементарная, сплит, триада и тетрада.

Живой предпросмотр макета

Справа отображается интерактивный мини-сайт (шапка, меню, заголовок, кнопка, текст и карточки), который моментально перекрашивается в выбранную вами палитру.

Экспорт HEX и CSS-переменных

Копируйте HEX-коды одним кликом по карточке, всем списком через запятую или в виде готового блока переменных :root { --primary... } для вставки в стили Tilda.

Генератор идей «Случайный цвет»

Один клик по кнопке «Случайный» создаёт свежий, сочный базовый оттенок и пересчитывает все 6 гармоничных палитр — лучший способ найти вдохновение.

02 Быстрый старт: Как пользоваться (Пошагово)

Подбор палитры для нового сайта или бренда состоит из 3 простых шагов и занимает не более 30 секунд:

Задайте базовый цвет палитрой, кодом или кнопкой «Случайный»

Слева вверху расположен цветной квадрат с текущим базовым цветом и его HEX-кодом. Нажмите на иконку цветового круга, чтобы выбрать главный цвет визуально, или вставьте в поле ввода код любого формата: #6366F1, rgb(99,102,241) или hsl(239,84%,67%). Совет StyleDa: нажимайте кнопку «Случайный» несколько раз — это самый быстрый способ подобрать красивый и нестандартный акцентный оттенок для вашего будущего сайта.

Выберите тип цветовой схемы и оцените предпросмотр макета

Переключайтесь между 6 вкладками-схемами: Монохромная, Аналоговая, Комплементарная, Раздельно-комплементарная, Триада или Тетрада. Под каждой вкладкой отображается подсказка о том, какое настроение и контраст создаёт эта схема. Рекомендация StyleDa: обязательно посмотрите на интерактивный мини-макет сайта справа — он сразу покажет, достаточно ли выделяется продающая кнопка и гармонируют ли шапка, текст и карточки между собой.

Скопируйте HEX-коды или готовый блок CSS-переменных

Нажмите на карточку любого цвета в палитре (например, «Основной», «Контрастный», «Дополнительный», «Тёмный» или «Светлый»), чтобы мгновенно скопировать его HEX-код в буфер обмена. Кнопка «Скопировать все» сохраняет весь список кодов через запятую. Лайфхак для Tilda: используйте кнопку «Скопировать CSS», чтобы получить готовый блок переменных :root { --primary: #...; } и вставить его в глобальные стили вашего проекта на Tilda.

03 Какую схему выбрать под вашу задачу

Практические рекомендации дизайнеров по выбору схемы под тип и настроение сайта:

Монохромная и Аналоговая

Монохромная (5 тонов одного цвета) создаёт спокойный, строгий и премиальный стиль. Аналоговая (соседние цвета на круге) даёт мягкую, естественную гармонию, идеально подходящую для сфер здоровья, спа и экологии.

Комплементарная и Сплит

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

Триада и Тетрада

Триада (3 равноудалённых цвета) создаёт яркий, энергичный и запоминающийся сайт. Тетрада (4 цвета по прямоугольнику) даёт богатую, выразительную палитру для крупных интернет-магазинов и фестивалей.

04 Часто задаваемые вопросы (FAQ)

Ответы на популярные вопросы о количестве цветов, интеграции с Tilda и безопасности:

Сколько цветов входит в одну цветовую схему?

Каждая предложенная палитра содержит от 4 до 5 цветов. Это идеальное количество для полноценного сайта: основной цвет бренда, контрастный цвет для целевых кнопок, дополнительный оттенок для иконок/плашек, а также тёмный и светлый цвета для текста и фонов блоков.

Что делать, если предложенная палитра не подходит по настроению?

Просто смените базовый цвет на палитре или нажмите кнопку «Случайный» — сервис мгновенно пересчитает всю схему и обновит предпросмотр макета сайта. Также попробуйте переключаться между вкладками схем (например, монохромная и комплементарная схемы одного и того же цвета создают совершенно разную атмосферу).

Как быстрее всего перенести цвета в мой проект на Tilda?

Кликните по карточке нужного цвета, чтобы скопировать его HEX-код, и вставьте его в настройки цвета кнопки или фона блока Tilda. Либо нажмите «Скопировать CSS» и добавьте этот блок в T123 на вашем сайте, чтобы управлять стилями через CSS-переменные.

Можно ли вводить базовый цвет в разных форматах?

Да. Поле ввода автоматически понимает HEX-коды (#6366F1 или 6366F1), значения rgb(99,102,241) и hsl(239,84%,67%), а также числа через пробел.

Это бесплатный инструмент? Куда отправляются данные?

Да, 100% бесплатно и без ограничений. Сервис работает локально на клиентском JavaScript в вашем браузере. Никакие данные на серверы студии StyleDa не отправляются.