Безкоштовний онлайн-генератор кольорових палітр

Готові колірні схеми для веб-дизайну, 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 & Warm
Sunset Paradise
Warm Autumn
Coral Reef
Golden Hour
Terracotta
Burnt Orange
Ocean & Cool
Deep Ocean
Arctic Ice
Mint Fresh
Lavender Dream
Aquamarine
Northern Lights
Nature & Earth
Forest Green
Desert Sand
Mountain View
Spring Meadow
Olive Grove
Earthy Clay
Modern & Bold
Neon Nights
Cyber Purple
Electric Pop
Bold Contrast
Synthwave
Cyberpunk
Pastel & Soft
Soft Pastels
Baby Blue
Peach Cream
Mint Candy
Cotton Candy
Dreamy Rose
Monochrome
Grayscale
Warm Gray
Cool Gray
Blue Mono
Green Mono
Purple Mono
Вибрана палітра Material Blue
Експорт
Перевірка контрасту WCAG
AA: — AAA: —
Приклад тексту

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

Контраст: 21:1
Типи колірних схем
Complementary (Доповнюючі)

Опис: Кольори навпроти один одного на колірному колі. Високий контраст.

Використання: CTA кнопки, акценти, виділення

Analogous (Аналогові)

Опис: Сусідні кольори на колірному колі. Гармонійний вигляд.

Використання: Блоги, портфоліо, органічні бренди

Triadic (Тріада)

Опис: Три кольори під кутом 120°. Збалансована різноманітність.

Використання: Landing pages, ігрові інтерфейси

Monochromatic (Монохромні)

Опис: Відтінки одного кольору. Елегантний мінімалізм.

Використання: Преміум бренди, корпоративні сайти

Часті питання
Що таке гармонійна колірна палітра?

Гармонійна палітра — це набір кольорів, що приємно виглядають разом та створюють збалансовану композицію. Вона базується на принципах колірного кола.

Скільки кольорів має бути в палітрі?

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

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

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

Чи можна використовувати палітри комерційно?

Так, всі палітри з бібліотеки можна вільно використовувати у комерційних та особистих проектах.

Як обрати ідеальну колірну палітру для вашого проекту

Колір — один з найпотужніших інструментів у дизайні. Правильно підібрана палітра може підвищити впізнаваність бренду на 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). Яскраві контрасти привертають увагу та демонструють сміливість.

E-commerce: теплі палітри (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 калькулятори не є професійною консультацією і не можуть бути єдиною основою для прийняття важливих рішень. Для точних розрахунків та порад рекомендуємо звертатися до профільних спеціалістів.

Адміністрація сайту не несе відповідальності за можливі помилки або збитки, пов'язані з використанням результатів розрахунків.