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

Готовые цветовые схемы для веб-дизайна, UI/UX и брендинга. Проверка контраста WCAG, экспорт в CSS/SCSS/Tailwind

Библиотека палитр
50+ палитр Проверка WCAG
Material Design
Material Blue
Material Red
Material Purple
Material Green
Material Amber
Material Teal
Популярные бренды
Spotify
Netflix
Slack
Discord
Dribbble
Figma
Трендовые палитры
Peach Fuzz
Digital Lavender
Cyber Lime
Quiet Luxury
Neo Mint
Viva Magenta
Закат и тёплые
Sunset Paradise
Warm Autumn
Coral Reef
Golden Hour
Terracotta
Burnt Orange
Океан и холодные
Deep Ocean
Arctic Ice
Mint Fresh
Lavender Dream
Aquamarine
Northern Lights
Природа и земля
Forest Green
Desert Sand
Mountain View
Spring Meadow
Olive Grove
Earthy Clay
Современные и яркие
Neon Nights
Cyber Purple
Electric Pop
Bold Contrast
Synthwave
Cyberpunk
Пастельные и нежные
Soft Pastels
Baby Blue
Peach Cream
Mint Candy
Cotton Candy
Dreamy Rose
Монохром
Grayscale
Warm Gray
Cool Gray
Blue Mono
Green Mono
Purple Mono
Выбранная палитра Material Blue
Экспорт
Проверка контраста WCAG
AA: — AAA: —
Пример текста

Проверьте читаемость текста на выбранном фоне.

Контраст: 21:1
Типы цветовых схем
Комплементарные

Описание: Цвета напротив друг друга на цветовом круге. Высокий контраст.

Применение: CTA-кнопки, акценты, выделение

Аналоговые

Описание: Соседние цвета на цветовом круге. Гармоничный вид.

Применение: Блоги, портфолио, органические бренды

Триадные

Описание: Три цвета под углом 120°. Сбалансированное разнообразие.

Применение: Landing pages, игровые интерфейсы

Монохроматические

Описание: Оттенки одного цвета. Элегантный минимализм.

Применение: Премиум-бренды, корпоративные сайты

Частые вопросы
Что такое гармоничная цветовая палитра?

Гармоничная палитра — это набор цветов, которые хорошо смотрятся вместе и создают сбалансированную композицию. Она основана на принципах цветового круга.

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

Оптимально 3-5 цветов: primary, secondary, accent, background и text. Больше цветов могут перегрузить дизайн.

Что такое контраст WCAG?

WCAG — стандарт доступности. Минимальный контраст текста 4.5:1 (AA) или 7:1 (AAA) обеспечивает читаемость для людей с нарушениями зрения.

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

Да, все палитры из библиотеки можно свободно использовать в коммерческих и личных проектах.

Как выбрать цвета для интернет-магазина?

Для e-commerce тёплые цвета (оранжевый, красный) стимулируют импульсивные покупки. Холодные (синий, зелёный) внушают доверие для обдуманных решений.

Какой формат экспорта выбрать?

CSS Variables для современных веб-проектов, SCSS для Sass, Tailwind для utility-first фреймворка, RGB/HSL для других технологий.

Как выбрать идеальную цветовую палитру для проекта

Цвет — один из самых мощных инструментов в дизайне. Правильно подобранная палитра может повысить узнаваемость бренда на 80% и существенно повлиять на конверсию. Этот сервис предлагает проверенные цветовые схемы для разных типов проектов.

Палитры известных брендов

Spotify использует насыщенный зелёный (#1DB954) на тёмном фоне — это создаёт ассоциации с энергией и свежестью. Netflix выбрал красный (#E50914) для максимального контраста и эмоционального воздействия. Slack применяет многоцветную палитру из 4 ярких цветов, подчёркивая идею разнообразия и коммуникации.

Эти палитры прошли многолетнее тестирование на миллионах пользователей — вы можете использовать их как надёжную основу для собственных проектов.

Трендовые цвета

Peach Fuzz — тёплый персиковый оттенок, создающий ощущение уюта и оптимизма. Идеален для lifestyle-брендов, wellness-приложений и e-commerce.

Digital Lavender — успокаивающий лавандовый, ассоциирующийся с технологиями и инновациями, оставаясь при этом мягким для восприятия.

Quiet Luxury — нейтральные бежевые и коричневые тона для премиум-брендов. Минимализм и элегантность без кричащих цветов.

Выбор палитры по типу проекта

Корпоративный сайт: монохромные палитры (Grayscale, Blue Mono) или Material Design. Профессиональный вид, лёгкая читаемость, универсальность.

Креативное портфолио: Modern & Bold (Neon Nights, Synthwave). Яркие контрасты привлекают внимание и демонстрируют смелость.

Интернет-магазин: тёплые палитры (Coral Reef, Golden Hour) стимулируют импульсивные покупки. Холодные (Deep Ocean, Mint Fresh) — для обдуманных решений.

Мобильное приложение: Material Design или палитры брендов (Figma, Discord). Проверены на доступность, работают в светлой и тёмной темах.

Доступность и контраст

Стандарт WCAG 2.1 требует минимальный контраст 4.5:1 между текстом и фоном. Это не просто формальность — около 8% мужчин и 0.5% женщин имеют нарушения цветовосприятия. Проверяйте каждую комбинацию перед использованием.

Уровень AA — минимум для коммерческих проектов. Уровень AAA — рекомендуется для государственных сайтов, медицинских и финансовых сервисов.

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

CSS Variables — самый современный подход. Цвета объявляются один раз и используются через var(). Легко менять тему без редактирования сотен строк кода.

SCSS — для проектов на препроцессорах. Переменные компилируются в обычный CSS.

Tailwind — готовый конфиг для utility-first фреймворка. Цвета сразу доступны как классы (bg-primary, text-accent).

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

Похожие калькуляторы

Предупреждение: все расчёты на этом сайте являются ориентировочными и предоставляются для ознакомления. Результаты могут отличаться от фактических в зависимости от индивидуальных условий, технических характеристик, региона, изменений в законодательстве и т.д.

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

Администрация сайта не несёт ответственности за возможные ошибки или ущерб, связанные с использованием результатов расчётов.