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

Создавайте красивые палитры из 5 цветов. Закрепляйте понравившиеся цвета и нажимайте пробел, чтобы сгенерировать заново.

#3C79D4
rgb(60, 121, 212)
hsl(216, 64%, 53%)
#706269
rgb(112, 98, 105)
hsl(330, 7%, 41%)
#ACFCB3
rgb(172, 252, 179)
hsl(125, 93%, 83%)
#B98A0C
rgb(185, 138, 12)
hsl(44, 88%, 39%)
#E30203
rgb(227, 2, 3)
hsl(360, 98%, 45%)
или нажмите пробел

Экспорт как:

:root {
  --color-1: #3c79d4;
  --color-2: #706269;
  --color-3: #acfcb3;
  --color-4: #b98a0c;
  --color-5: #e30203;
}

Что такое генератор цветовых палитр?

Генератор цветовых палитр создаёт случайные палитры из 5 цветов для веб-дизайна, графического дизайна, иллюстраций и брендинга. Каждый образец показывает свои hex, RGB и HSL значения, а отдельные цвета можно закреплять при перегенерации остальных.

Инструмент полностью работает в вашем браузере, без регистрации и аккаунта. Палитры можно экспортировать как CSS-свойства, значения конфигурации Tailwind или простой список hex — готовые к вставке в ваш проект.

Как сгенерировать цветовую палитру

Создание палитры — быстро и интуитивно:

  • Нажмите «Сгенерировать» или клавишу пробела, чтобы создать новую случайную палитру из 5 цветов.
  • Нажмите на любой образец, чтобы скопировать его hex-код в буфер обмена.
  • Наведите курсор на образец и нажмите иконку замка, чтобы закрепить этот цвет.
  • Снова нажмите пробел — изменятся только незакреплённые цвета, что позволяет строить сочетания вокруг любимых цветов.
  • Используйте раздел «Экспорт», чтобы скопировать палитру в нужном формате.

Форматы экспорта

Инструмент поддерживает три формата экспорта для лёгкой интеграции в ваш рабочий процесс:

  • CSS-переменные — генерирует блок :root со свойствами, которые можно добавить в любую таблицу стилей.
  • Tailwind — создаёт объект colors, готовый для вашего файла tailwind.config.js.
  • Список hex — простой список значений hex, разделённых переводами строк, удобный для дизайн-инструментов и документации.

Советы по созданию отличных палитр

  • Закрепите один-два цвета, соответствующих вашему бренду, затем генерируйте, чтобы найти дополняющие акценты.
  • Смотрите на значения светлоты HSL, чтобы обеспечить хороший контраст между цветами текста и фона.
  • Для доступных дизайнов сочетайте цвета с контрастным соотношением минимум 4.5:1 для текста.
  • Сгенерируйте несколько палитр и сохраните понравившиеся для сравнения перед выбором.

Частые сценарии использования

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

Часто задаваемые вопросы

Как сгенерировать цветовую палитру?+
Нажмите «Сгенерировать» или клавишу пробела, чтобы создать случайную палитру из 5 цветов. Если цвет понравился, нажмите на иконку замка, чтобы закрепить его, затем сгенерируйте снова — изменятся только незакреплённые цвета.
Можно ли экспортировать палитру как CSS-переменные?+
Да. Используйте раздел «Экспорт» внизу инструмента, чтобы скопировать палитру как CSS-свойства, значения для конфигурации Tailwind или простой список hex. Нажмите «Копировать экспорт», чтобы скопировать результат в буфер обмена.
Как закрепить цвет в палитре?+
Наведите курсор на образец цвета и нажмите иконку замка в правом верхнем углу. Закреплённые цвета остаются неизменными при генерации новых палитр, позволяя строить сочетания вокруг уже понравившихся цветов.
Какие форматы цветов показываются для каждого образца?+
Каждый образец отображает свой hex-код, значения RGB и HSL. Нажмите на любой образец, чтобы мгновенно скопировать его hex-код в буфер обмена.
Можно ли использовать эти палитры для сайта или приложения?+
Да. Палитры генерируются случайно и бесплатны для использования в любых целях. Экспортируйте их как CSS-переменные или значения конфигурации Tailwind и вставьте прямо в свой проект.
Есть ли горячая клавиша для генерации новых палитр?+
Да. Нажмите пробел, чтобы мгновенно сгенерировать новую палитру. Это позволяет быстро перебирать сочетания, пока не найдёте подходящее.

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

Генератор CSS-градиентовГенератор тенейЦвет из изображенияУдаление водяных знаков с фото

Генератор цветовых палитр — Бесплатные онлайн-генератор цветовых палитр, случайная цветовая палитра, генератор цветовых схем, создание цветовой палитры, сгенерировать палитру онлайн, css цветовая палитра, палитра tailwind, цветовая схема сайта. Без регистрации. Работает в вашем браузере.