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

Генерируйте гармоничные палитры на основе теории цвета — комплементарные, триадические, аналогичные и другие

Поделиться:
Click any color swatch to copy its hex code
Copied!

Зачем использовать генератор цветовых палитр?

Выбор сочетающихся цветов требует знания теории цвета — комплементарных, аналогичных, триадических и разделённых комплементарных отношений. Делать это вручную с цветовым колесом медленно. Наш генератор использует математику HSL для автоматического вычисления гармоничных палитр из любого базового цвета, позволяя дизайнерам и разработчикам создавать профессиональные схемы за секунды.

🎨

6 режимов гармонии

Комплементарный, триадический, аналогичный, разделённый комплементарный, тетрадический и монохроматические оттенки

👁️

Предварительный просмотр образцов в реальном времени

Нажмите любой образец, чтобы мгновенно скопировать его шестнадцатеричный код в буфер обмена

📋

Экспорт CSS-переменных

Экспортируйте всю палитру как пользовательские CSS-свойства, готовые к вставке в таблицу стилей

Как создать палитру за 3 шага

1

Выберите основной цвет

Используйте выбор цвета или введите шестнадцатеричный код для установки начального/фирменного цвета

2

Выберите тип гармонии

Выберите комплементарный, триадический, аналогичный или другую гармонию, подходящую для вашего дизайна

3

Скопируйте и используйте

Нажмите образец, чтобы скопировать его hex, или используйте 'Скопировать как CSS-переменные' для экспорта всей палитры

Случаи использования цветовых палитр

🌐

Веб-дизайн

Создайте полную цветовую систему для сайта на основе основного цвета бренда

🏢

Фирменный стиль

Разработайте профессиональную цветовую палитру бренда с основным, дополнительным и акцентными цветами

📱

UI/UX-дизайн

Создавайте доступные и визуально согласованные цвета для кнопок, текста и фонов приложений

📊

Визуализация данных

Генерируйте отличительные цвета категорий для диаграмм, таблиц и информационных панелей

Лучшие практики цветового дизайна

✓ Проверяйте цветовой контраст (WCAG)

Убедитесь, что пары текст/фон соответствуют соотношению контраста WCAG AA (4,5:1 для обычного текста) для доступности.

✓ Ограничивайте палитру

Придерживайтесь 3-5 цветов: 1 основной, 1 дополнительный, 1-2 акцента и нейтральный. Больше цветов создаёт визуальный беспорядок.

✓ Учитывайте психологию цвета

Синий = доверие/профессионализм, Зелёный = рост/успех, Красный = срочность/энергия, Жёлтый = оптимизм. Согласуйте палитру с посланием бренда.

✓ Тестируйте в тёмном режиме

Создайте вариант тёмного режима, скорректировав значения яркости. Чисто чёрный (#000) и чисто белый (#fff) редко идеальны — используйте почти чёрный и почти белый.

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

Что такое комплементарная цветовая схема?
Комплементарные цвета расположены напротив друг друга на цветовом колесе (например, синий и оранжевый, красный и зелёный). Они создают высокий контраст и визуальную энергию — идеально для CTA-кнопок и акцентов.
Когда использовать аналогичную цветовую схему?
Аналогичные схемы используют 3 соседних цвета на цветовом колесе. Они создают гармоничные и спокойные дизайны с небольшим контрастом — идеально для фонов, градиентов и мягкого дизайна интерфейса.
Что такое HSL по сравнению с RGB и Hex?
Все три представляют один и тот же цвет в разных форматах. Hex (#6366f1) используется в CSS. RGB (99, 102, 241) задаёт каналы красного/зелёного/синего. HSL (237°, 84%, 67%) использует оттенок, насыщенность, яркость — гораздо более интуитивно для создания гармоничных палитр.
Как создать цветовую палитру для тёмного режима?
Для тёмного режима значительно уменьшите яркость ваших цветов (например, Я:60% → Я:30%) и поменяйте роли текста/фона. Сохраняйте похожий оттенок и насыщенность, но корректируйте яркость так, чтобы цвета оставались читаемыми на тёмных фонах.