🎨

генератор палитры

Создавайте красивые цветовые палитры на основе базового цвета. Экспорт в CSS, HEX или JSON.

Инструменты дизайна Работает локально Данные не отправляются
палитра HSL комплементарная дизайн
Базовый цвет
Тип палитры
Количество (только для монохроматической): 5
5
Формат экспорта
Предпросмотр палитры
Экспорт

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

Создавайте красивые цветовые палитры на основе базового цвета. Выбирайте комплементарные, аналоговые, триадные или монохроматические схемы и экспортируйте в CSS, HEX или JSON.

Как использовать генератор палитры

  1. Выберите базовый цвет, от которого будете отталкиваться.
  2. Выберите стиль палитры, например комплементарный, аналогичный или монохромный.
  3. Просмотрите созданные образцы цвета и при необходимости скорректируйте базовый цвет.
  4. Скопируйте значения HEX, которые хотите повторно использовать в дизайн-системе или макете.

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

🎨
выбор цвета
Преобразуйте цвета между HEX, RGB, HSL и CMYK
 🌈
генератор градиентов CSS
Создавайте линейные и радиальные градиенты CSS с предпросмотром в реальном времени
 ⚖️
проверка контраста WCAG
Проверяйте коэффициенты цветового контраста WCAG AA и AAA для доступности
Понимание цветовых палитр ▾
Пример
Ввод Создание комплементарной палитры на основе базового синего цвета:
Результат Комплементарный цвет расположен прямо напротив на цветовом круге, создавая высококонтрастное, яркое сочетание.
Типичные сценарии использования
  • Создавайте цветовые системы интерфейса на основе базового брендового цвета
  • Создавайте дополнительные акцентные цвета для диаграмм или иллюстраций
  • Изучите варианты палитры перед передачей в дизайн
  • Быстро создавайте цветовые наборы для постов в соцсетях или слайдов
Часто задаваемые вопросы
Как выбрать подходящий тип гармонии?

Используйте комплементарную схему для смелых высококонтрастных дизайнов. Аналоговую — для мягких, целостных UI-тем. Триаду — когда нужны три сбалансированных акцентных цвета. Монохромную — когда важны простота и элегантность.

Проверяет ли палитра контраст для доступности?

Этот инструмент предназначен для генерации цветовой гармонии. Для проверки контраста по WCAG используйте инструменты Contrast Checker или WCAG AA Checker на этом сайте.

Можно ли экспортировать палитру в Figma или CSS?

Да — используйте экспорт в CSS, чтобы получить готовые к вставке CSS-переменные, или копируйте значения HEX по отдельности для вставки в любой инструмент дизайна.

Зачем нужен ползунок количества монохромных оттенков?

При использовании монохромного типа можно управлять количеством создаваемых светлых и тёмных оттенков (3–10). Это даёт детализированную шкалу оттенков серого или цветную шкалу для работы.