Перейти к содержимому
К
Версия сайта

Бесплатный онлайн-инструмент

Генератор цветовых палитр

Жмите «Сгенерировать» или пробел — получайте гармоничные палитры из 5 цветов. Удачный цвет фиксируется замком, клик по цвету копирует HEX.

или нажмите «Пробел»

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

  1. Нажмите «Сгенерировать» или клавишу пробел — инструмент подберёт палитру из 5 сочетающихся цветов.
  2. Понравился цвет — нажмите замок в его углу, и он останется на месте при следующих генерациях.
  3. Клик по цвету копирует его HEX-код. Кнопки внизу копируют всю палитру списком или готовыми CSS-переменными.
  4. Выберите схему в списке справа, если нужен конкретный тип гармонии: аналогичная, монохромная, комплементарная, триада или пастель.

Перевести выбранный цвет в RGB или HSL можно в конвертере HEX в RGB, подобрать сочетания к конкретному цвету — в инструменте «Сочетание цветов», а собрать из палитры оформление страницы — в цветовой схеме сайта.

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

Как работает генератор палитр?

Инструмент подбирает 5 цветов по законам цветового круга: случайная схема, аналогичная, монохромная, комплементарная, триада или пастель. Нажмите «Сгенерировать» или пробел — получите новую палитру, клик по цвету копирует его HEX-код.

Как сохранить понравившийся цвет?

Нажмите на замок в углу цвета — он зафиксируется и не будет меняться при следующих генерациях. Так можно оставить один-два удачных цвета и перебирать остальные.

Чем отличаются цветовые схемы?

Аналогичная — соседние оттенки на цветовом круге, выглядит спокойно и гармонично. Монохромная — один оттенок разной светлоты. Комплементарная — противоположные цвета, максимальный контраст. Триада — три равноудалённых оттенка. Пастель — мягкие светлые тона.

Как перенести палитру в проект?

Кнопка «CSS-переменные» копирует палитру готовым блоком :root с переменными --color-1…--color-5 — вставьте его в начало своего CSS. Кнопка «Скопировать все» отдаёт просто список HEX-кодов.

Сколько цветов должно быть в палитре сайта?

Классическое правило 60/30/10: основной цвет занимает 60% страницы, вторичный — 30%, акцентный — 10%. Палитры из 5 цветов хватает на фон, текст, два вспомогательных тона и акцент.