Что такое Создание цветовых схем?

Color Scheme Creator генерирует полные цветовые палитры из одного базового цвета на основе правил теории цвета. Выберите монохроматическую, дополнительную, раздельно-дополнительную, двойную раздельную, триадную, тетрадную или аналогичную схему, отрегулируйте каждый оттенок, скопируйте ссылку для обмена или экспортируйте в виде CSS-переменных, конфига Tailwind или HEX-кодов.

Задайте любой базовый hex, и генератор выполнит классические повороты по цветовому кругу: 180 градусов для комплементарной схемы, 150 и 210 градусов для двух крыльев раздельно-дополнительной, 120 — для триады, 90 — для тетрады и небольшие шаги в обе стороны для аналоговой. Оттенки и осветления сохраняют тот же цветовой тон и смещают только яркость в HSL фиксированным шагом, поэтому каждый цвет получает аккуратную лестницу из пяти ступеней. Любой образец можно скопировать как HEX, rgb(), hsl() или oklch(); панель контраста оценивает каждый цвет к белому и чёрному по WCAG AA и AAA, а предпросмотр зрения одним кликом перерисовывает всю палитру через фильтры протанопии, дейтеранопии или тританопии. Скопируйте ссылку, чтобы сохранить палитру в закладки или передать коллеге без регистрации.

Как использовать

1. Выберите базовый цвет с помощью палитры или введите HEX-код.
2. Выберите тип схемы (монохроматическая, дополнительная, раздельно-дополнительная, двойная раздельная, триадная, аналогичная, тетрадная), чтобы сформировать палитру.
3. Скопируйте отдельные HEX-коды, экспортируйте всю палитру как CSS-переменные или скачайте в виде изображения со свотчами.

Когда использовать

• Превратить один фирменный hex в полную палитру для нового сайта или темы приложения.
• Проверить, есть ли у цвета логотипа чистый комплемент перед печатью мерча.
• Сгенерировать CSS-переменные, не открывая Figma или другой дизайн-инструмент.

Результат

Веб-разработчик выбрал основной синий цвет бренда (#3B82F6), сгенерировал триадную схему с дополнительными оранжевым и зелёным тонами, затем экспортировал палитру как CSS-свойства для дизайн-системы.

Частые вопросы

Чем триадная схема отличается от тетрадной?

Триадная использует три цвета через 120 градусов по кругу — получается сбалансированное трио. Тетрадная даёт четыре цвета в форме прямоугольника (две комплементарные пары): больше разнообразия, но визуально балансировать сложнее.

Когда использовать тёмные оттенки, а когда светлые?

Тёмные оттенки подходят для текста, рамок и hover-состояний на светлом интерфейсе. Светлые — для фонов, отключённых состояний и мягких акцентов. Большинство дизайн-систем требует обе шкалы из одного базового цвета.

Учитывает ли генератор контраст по WCAG?

Да — панель контраста под палитрой показывает коэффициент WCAG каждого цвета к белому и чёрному фону и значки прохождения или провала для AA и AAA. Порог 4.5:1 для обычного текста закрывает большинство задач интерфейса; переключите предпросмотр зрения на протанопию, дейтеранопию или тританопию, чтобы увидеть, как палитра выглядит для людей с особенностями цветовосприятия.

Почему аналоговая схема выглядит спокойнее, чем комплементарная?

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

Можно ли экспортировать в конфиг Tailwind или только в CSS-переменные?

Доступно и то, и другое. CSS-переменные вставляются прямо в :root таблицы стилей. Формат Tailwind оборачивает hex-значения в объект theme.extend.colors, который вставляется в tailwind.config.js.

Похожие инструменты