Генератор цветовой палитры
Six harmony types: Дополнительный, Аналогичный, Триадный, Split, Тетрадный, Монохромный.
Как пользоваться генератором палитры в generatorsconverters.com
Этот генератор цветовой палитры начинается с базового HEX-цвета. Вы выбираете цвет через системный color picker или вводите значение в формате #RRGGBB, а скрипт сразу пересчитывает RGB, HSL и набор гармоничных оттенков. В интерфейсе доступны шесть схем: complementary, analogous, triadic, split, tetradic и mono. Это не случайный набор красивых прямоугольников, а практическая модель подбора цветов по углу тона в HSL. Поэтому инструмент удобен, когда нужно быстро получить палитру для сайта, кнопки, дашборда, презентации, брендового баннера или прототипа без запуска графического редактора.
Дополнительная схема помогает найти контрастный акцент: базовый цвет остаётся главным, а противоположный оттенок можно использовать для кнопки, бейджа или ссылки. Аналогичная схема мягче, потому что берёт соседние тона и подходит для спокойных интерфейсов. Триадная и тетрадная схемы дают более насыщенную композицию, где важно заранее проверить иерархию: один цвет должен быть основным, второй поддерживающим, остальные лучше оставить для небольших акцентов. Монохромная схема меняет светлоту одного тона и полезна для фонов, границ, hover-состояний и нейтральных карточек.
Сгенерированные значения можно копировать по одному или сразу как список HEX-кодов. Кнопка CSS export создаёт блок переменных :root, который удобно вставить в stylesheet или дизайн-систему. После копирования проверьте контраст текста и фона, особенно для малых подписей и кнопок. Палитра показывает цветовые отношения, но не гарантирует доступность: для интерфейса всё равно стоит сравнить светлоту, состояние disabled, тёмную тему и реальные изображения рядом с цветами.
Как выбирать итоговую схему
Для практической работы начинайте не с количества цветов, а с роли каждого оттенка. Один цвет используйте как основной фон или брендовый тон, второй — как действие, третий — как вторичный акцент, остальные оставьте для графиков, рамок и hover. Если палитра нужна для интерфейса, проверьте её на светлой и тёмной поверхности, а также рядом с серыми нейтральными цветами. Для презентации можно брать более яркие сочетания, но для формы, таблицы или панели управления лучше уменьшить насыщенность и оставить больше контраста между текстом и фоном.
Если сомневаетесь между двумя схемами, создайте обе и сравните их на реальном компоненте: заголовок, обычный текст, кнопка, ссылка и фон страницы. Абстрактная палитра может выглядеть хорошо сама по себе, но только пример интерфейса показывает, хватает ли контраста, не спорят ли акценты между собой и подходит ли настроение проекта.
Для брендовой работы сохраните выбранную базу отдельно, чтобы позже восстановить палитру и не смешивать разные версии макета.
Как строятся гармонии
Генератор палитры берет базовый HEX-цвет, переводит его в HSL и строит наборы по углам цветового круга. Complementary использует противоположный оттенок, analogous берет соседние цвета, triadic делит круг на три части, split выбирает два оттенка рядом с комплементарным, tetradic строит четыре точки, а mono меняет светлоту одного оттенка. Каждый swatch можно скопировать, а всю палитру можно выгрузить строкой или CSS-переменными `:root`. После выбора обязательно проверьте контраст текста и фона.
Комментарии