Генератор цветовых палитр
Создавайте красивые палитры из 5 цветов на основе любого базового цвета с помощью шести правил гармонии - комплементарной, аналоговой, триадной, раздельно-комплементарной, тетрадной и монохромной. Закрепляйте отдельные цвета, которые вам нравятся, и пересоздавайте остальные одним щелчком. Экспортируйте палитру как пользовательские свойства CSS, переменные SCSS или конфигурацию Tailwind CSS. Полностью приватно, 100% бесплатно и без регистрации.
Base Colors
Harmony Rules
Primary
Light
Complement
Dark Comp
Accent
CSS Custom Properties
:root {
--primary: #3c83f6;
--secondary: #92b5ed;
--accent: #f6af3c;
--complement: #c37c09;
--neutral: #0563fa;
}Quick Copy
Почему стоит использовать наш генератор цветовых палитр?
- Мгновенное создание палитр: генератор цветовых палитр моментально создаёт палитры из 5 цветов на основе любого базового цвета по шести правилам гармонии - комплементарной, аналоговой, триадной, раздельно-комплементарной, тетрадной и монохромной. Измените базовый цвет или правило гармонии, и палитра обновится сразу, без нажатия кнопок.
- Закрепляйте и пересоздавайте цвета: закрепляйте отдельные понравившиеся цвета и пересоздавайте остальные одним щелчком. Генератор сохраняет закреплённые цвета и применяет новые гармонические вариации к незакреплённым, давая полный творческий контроль над итоговой палитрой.
- 100% приватно - без загрузки: вся генерация палитр происходит локально в вашем браузере. Ваши цветовые значения никогда не покидают устройство и не отправляются на сервер - безопасно для клиентских проектов и закрытых дизайн-систем.
- Бесплатно и без ограничений: создавайте неограниченное число палитр без регистрации, подписки и лимитов использования. Генератор цветовых палитр полностью бесплатен навсегда, без рекламы, перекрывающей интерфейс. Экспорт в CSS, SCSS или Tailwind - бесплатно.
Что такое генератор цветовых палитр?
Генератор цветовых палитр создаёт набор гармоничных цветов из одного базового цвета по устоявшимся правилам цветовой теории. Вместо ручного подбора каждого цвета вы вводите базовый цвет, и генератор использует гармонические отношения - например, комплементарные (противоположные оттенки на 180°), аналоговые (соседние оттенки) или триадные (равномерно распределённые оттенки) - чтобы получить сбалансированную палитру из 5 цветов. Наш генератор цветовых палитр также позволяет закреплять отдельные понравившиеся цвета и пересоздавать остальные, давая полный творческий контроль.
Как работает наш генератор цветовых палитр
- Введите базовый цвет: укажите значение HEX (например, #3B82F6), воспользуйтесь выбором цвета или нажмите на один из примеров. Генератор цветовых палитр использует этот цвет как основу палитры.
- Выберите правило гармонии: доступны шесть типов - комплементарная, аналоговая, триадная, раздельно-комплементарная, тетрадная и монохромная. Каждое правило даёт другую палитру из 5 цветов на основе вашего базового цвета за счёт конкретных угловых соотношений оттенков.
- Закрепите, пересоздайте и экспортируйте: нажмите на значок замка у любого цвета, чтобы сохранить его при пересоздании. Нажмите «Пересоздать», чтобы обновить незакреплённые цвета новыми вариациями. Когда результат устроит, экспортируйте палитру как пользовательские свойства CSS, переменные SCSS или конфигурацию Tailwind CSS - вся обработка выполняется локально в браузере.
Шесть правил гармонии с пояснениями
- Комплементарное: базовый цвет + его точная противоположность на цветовом круге (180° друг от друга) плюс три акцентных варианта. Даёт максимальный контраст - идеально для смелых, привлекающих внимание дизайнов и элементов призыва к действию.
- Аналоговое: пять соседних цветов на круге (±30° и ±60°). Создаёт плавные, гармоничные переходы - идеально для градиентов, фонов и дизайнов, вдохновлённых природой.
- Триадное: три равномерно распределённых цвета (с интервалом 120°) с акцентными вариантами. Яркое и сбалансированное - отлично подходит для универсальных палитр с ролями основного, вторичного и акцентного цвета.
- Раздельно-комплементарное: базовый цвет плюс два цвета, соседних с его комплементом (±30° от комплемента). Высокий контраст с меньшим напряжением, чем у чистого комплементарного, - безопасный выбор для большинства проектов.
- Тетрадное (прямоугольник): четыре цвета с интервалом 90°, образующие две комплементарные пары. Богатое и сложное - идеально для изысканных многоцветных дизайнов, но требует аккуратного баланса.
- Монохромное: один оттенок в пяти уровнях светлоты от самого светлого к самому тёмному. Элегантно и целостно - всегда отлично работает для чистых профессиональных дизайнов.
Как выжать максимум из закрепления и пересоздания
Функция закрепления и пересоздания - самый мощный инструмент в генераторе цветовых палитр. Начните с генерации палитры по предпочитаемому правилу гармонии, затем закрепите цвета, которые кажутся правильными, - обычно это основной цвет бренда и уже выбранные акцентные цвета. Нажмите «Пересоздать», чтобы получить новые вариации незакреплённых цветов, при этом закреплённые останутся точно такими же. Такой итеративный процесс позволяет за секунды изучить десятки вариантов палитры, не теряя работу. Когда всё устроит, используйте панель экспорта, чтобы скопировать палитру в предпочитаемом формате: CSS для веб-проектов, SCSS для рабочих процессов на Sass или конфигурацию Tailwind для проектов с Tailwind CSS.
Часто задаваемые вопросы
Генератор цветовых палитр создаёт набор гармоничных цветов из одного базового цвета по правилам цветовой теории. Вместо ручного подбора каждого цвета вы вводите один базовый HEX-цвет и выбираете правило гармонии - комплементарное, аналоговое, триадное, раздельно-комплементарное, тетрадное или монохромное - и генератор мгновенно создаёт сбалансированную палитру из 5 цветов. Наш генератор также позволяет закреплять отдельные цвета и пересоздавать остальные.
Нажмите на значок замка у любой цветовой ячейки, чтобы закрепить её. Закреплённые цвета не меняются при нажатии «Пересоздать». Это позволяет сохранить основной цвет бренда или любимый акцент, исследуя разные варианты для остальных цветов. Нажмите на замок снова, чтобы снять закрепление.
Комплементарное использует противоположные цвета (180° друг от друга) для максимального контраста. Аналоговое использует соседние цвета для плавных переходов. Триадное использует равномерно распределённые цвета (с шагом 120°) для яркого баланса. Раздельно-комплементарное использует базовый цвет плюс два соседних с его комплементом, давая высокий контраст с меньшим напряжением. Тетрадное использует две комплементарные пары для богатой сложности. Монохромное использует один оттенок с разной светлотой для элегантной целостности.
Используйте раздел «Экспорт палитры» в нижней части инструмента. Выберите между пользовательскими свойствами CSS (переменные :root), переменными SCSS ($префикс) или форматом конфигурации Tailwind CSS. Нажмите «Копировать», чтобы скопировать код в буфер обмена, и вставьте его прямо в файлы проекта.
Да. Вся генерация палитр выполняется на 100% на стороне клиента в вашем браузере. Ваши цвета никогда не отправляются на сервер, не сохраняются и никуда не передаются. Генератор цветовых палитр полностью приватен и обрабатывает всё локально на вашем устройстве.
Да. Генератор цветовых палитр на 100% бесплатен: без регистрации, без платных функций и без ограничений по использованию. Создавайте неограниченное число палитр, закрепляйте и пересоздавайте сколько нужно и экспортируйте в любой формат без ограничений.
Палитру можно экспортировать в трёх форматах: пользовательские свойства CSS (:root { --primary: #hex; ... }), переменные SCSS ($primary: #hex; ...) и конфигурация Tailwind CSS (module.exports = { theme: { extend: { colors: { ... } } } }). В каждом формате используются описательные имена переменных по роли цвета.
Генератор палитр применяет правила гармонии автоматически, но с помощью закрепления можно оставить понравившиеся цвета и пересоздать остальные. Для более тонкой настройки скопируйте значения HEX любой цветовой ячейки и используйте их в предпочитаемом инструменте дизайна, либо комбинируйте палитры разных правил гармонии, закрепляя цвета из каждой.