Подбирать сочетающиеся цвета на глаз - долго и рискованно. Этот генератор применяет классические гармонии цветового круга - те же соотношения оттенков, что изучают в теории цвета, - поэтому каждая палитра математически выверена, а не подобрана наугад. Кликните по любому образцу, чтобы скопировать его hex-код, или скопируйте всю палитру как готовые CSS-переменные. Всё работает на стороне клиента: без аккаунта, без загрузки файлов и без слежки за вашими фирменными цветами.
Бесплатный генератор цветовой палитры
Работает прямо в браузере - без загрузки файлов и регистрации.
Гармония
CSS-переменные
Что такое генератор цветовой палитры?
Генератор цветовой палитры строит согласованную цветовую схему из одного базового цвета по теории цветового круга. Выберите или впишите hex-цвет, укажите тип гармонии - комплементарную, аналоговую, триадную или монохромную - и он мгновенно рассчитает подходящие цвета с копируемым hex-кодом для каждого. Всё считается прямо в браузере.
Как пользоваться
- 1Задайте базовый цвет. Кликните по палитре цвета, чтобы выбрать визуально, впишите hex-код вида #6366f1 или нажмите «Случайный» для нового старта.
- 2Выберите гармонию. Переключайтесь между комплементарной, раздельно-комплементарной, аналоговой, триадной, тетрадной, монохромной схемами, а также оттенками и тонами. Палитра пересчитывается мгновенно.
- 3Скопируйте цвета. Кликните по любому образцу, чтобы скопировать его hex-код, или нажмите кнопку «Копировать», чтобы забрать всю палитру как CSS-переменные.
Кому пригодится
- Веб-дизайнеры, которые начинают сайт с одного фирменного цвета: получают аналоговые или раздельно-комплементарные пары для фона, кнопок и акцентов.
- Фронтенд-разработчики, которым нужен стартовый набор дизайн-токенов: копируют палитру как CSS-переменные и сразу вставляют в таблицу стилей.
- Маркетологи и авторы презентаций, подбирающие цвета графиков, соцсетей или слайдов под цвет логотипа без дизайнерских программ.
- Иллюстраторы и любители, исследующие оттенки и тона одного цвета, чтобы выстроить глубину, блики и тени в работе.
Вопросы и ответы
Этот генератор цветовой палитры бесплатный?
Да - на 100% бесплатно, без регистрации, без водяных знаков и без ограничений. Создавайте и копируйте сколько угодно палитр для личных или коммерческих проектов.
Мои цветовые данные куда-то загружаются?
Нет. Палитра полностью считается в вашем браузере на обычном JavaScript. Ваши фирменные цвета, вводимые значения и клики никогда не отправляются на сервер.
Что такое комплементарный цвет?
Комплементарный цвет находится прямо напротив базового на цветовом круге - это поворот оттенка на 180 градусов. Комплементарные пары вроде синего и оранжевого дают самый сильный контраст, поэтому их часто используют для кнопок призыва к действию на фоне фирменного цвета.
В чём разница между аналоговой и триадной палитрой?
Аналоговая палитра использует соседние оттенки (в пределах примерно 30 градусов от базового), поэтому выглядит спокойно и целостно. Триадная палитра берёт три оттенка с шагом в 120 градусов, создавая яркую сбалансированную схему с большим контрастом между цветами.
Что такое оттенки и тона?
Оттенки (shades) затемняют базовый цвет, сдвигая светлоту к чёрному; тона (tints) осветляют его к белому. Оба сохраняют тот же тон и насыщенность, поэтому идеально подходят для состояний наведения, границ и фоновых слоёв одного фирменного цвета.
Сколько цветов должно быть в палитре сайта?
Распространённое правило - 60-30-10: один доминирующий цвет примерно на 60% интерфейса, второстепенный - на 30%, и акцентный - на 10%. Начните с гармонии из 3-5 цветов здесь, затем добавьте оттенки и тона каждого для состояний и поверхностей.
Почему палитра почти не меняется для серого или чёрного цвета?
У серого, чёрного и белого нулевая насыщенность, поэтому у них нет оттенка, который могли бы вращать гармонии - поворот ничего даёт то же самое нейтральное значение. Стройте нейтральную шкалу через режимы светлоты: тона для чёрного или тёмно-серого, оттенки для белого или светло-серого, монохромный режим - для среднего серого.