Підбирати кольори, що поєднуються, навмання - марна трата часу. Цей генератор застосовує класичні гармонії кольорового кола - ті самі співвідношення відтінків, які вивчають у теорії кольору, - тож кожна палітра математично узгоджена, а не вгадана на око. Клацніть на будь-якому зразку, щоб скопіювати його hex-код, або скопіюйте всю палітру як готові CSS-змінні. Все працює на боці клієнта: без акаунта, без завантаження файлів і без стеження за вашими фірмовими кольорами.
Безкоштовний генератор кольорової палітри
Працює повністю у вашому браузері - без завантаження на сервер і без реєстрації.
Гармонія
CSS-змінні
Що таке генератор кольорової палітри?
Генератор кольорової палітри будує узгоджену кольорову схему з одного базового кольору за теорією кольорового кола. Виберіть або впишіть hex-колір, оберіть тип гармонії - комплементарну, аналогову, тріадну чи монохромну - і він миттєво розрахує узгоджені кольори з hex-кодом для кожного, готовим до копіювання. Усе працює прямо у браузері.
Як користуватися
- 1Задайте базовий колір. Клацніть на палітрі кольору, щоб обрати візуально, впишіть hex-код на кшталт #6366f1 або натисніть «Випадковий» для нового старту.
- 2Оберіть гармонію. Перемикайтеся між комплементарною, роздільно-комплементарною, аналоговою, тріадною, тетрадною, монохромною схемами, а також відтінками й тонами. Палітра перераховується миттєво.
- 3Скопіюйте кольори. Клацніть на будь-якому зразку, щоб скопіювати його hex-код, або натисніть кнопку «Копіювати», щоб узяти всю палітру як CSS-змінні.
Кому це знадобиться
- Веб-дизайнери, що починають сайт з одного фірмового кольору: отримують аналогові чи роздільно-комплементарні пари для фону, кнопок і акцентів.
- Фронтенд-розробники, яким потрібен стартовий набір дизайн-токенів: копіюють палітру як CSS-змінні й одразу вставляють у таблицю стилів.
- Маркетологи й автори презентацій, що підбирають кольори графіків, соцмереж чи слайдів під колір логотипа без дизайнерських програм.
- Ілюстратори та любителі, які досліджують відтінки й тони одного кольору, щоб побудувати глибину, відблиски та тіні у роботі.
Часті запитання
Цей генератор кольорової палітри безкоштовний?
Так - на 100% безкоштовно, без реєстрації, без водяних знаків і без обмежень. Створюйте й копіюйте скільки завгодно палітр для особистих чи комерційних проєктів.
Мої кольорові дані кудись завантажуються?
Ні. Палітра повністю обчислюється у вашому браузері на звичайному JavaScript. Ваші фірмові кольори, введені значення та кліки ніколи не надсилаються на сервер.
Що таке комплементарний колір?
Комплементарний колір розташований прямо навпроти базового на кольоровому колі - це поворот відтінку на 180 градусів. Комплементарні пари на кшталт синього й помаранчевого дають найсильніший контраст, тому їх часто використовують для кнопок заклику до дії на тлі фірмового кольору.
У чому різниця між аналоговою та тріадною палітрою?
Аналогова палітра використовує сусідні відтінки (у межах приблизно 30 градусів від базового), тож виглядає спокійно й цілісно. Тріадна палітра бере три відтінки з кроком у 120 градусів, створюючи яскраву збалансовану схему з більшим контрастом між кольорами.
Що таке відтінки та тони?
Відтінки (shades) затемнюють базовий колір, зсуваючи світлоту до чорного; тони (tints) освітлюють його до білого. Обидва зберігають той самий тон і насиченість, тож ідеально підходять для станів наведення, меж і фонових шарів одного фірмового кольору.
Скільки кольорів має бути в палітрі сайту?
Поширене правило - 60-30-10: один домінантний колір приблизно на 60% інтерфейсу, другорядний - на 30%, і акцентний - на 10%. Почніть із гармонії з 3-5 кольорів тут, а потім додайте відтінки й тони кожного для станів та поверхонь.
Чому палітра майже не змінюється для сірого чи чорного кольору?
У сірого, чорного та білого нульова насиченість, тож у них немає відтінку, який могли б обертати гармонії - обертання нічого дає те саме нейтральне значення. Будуйте нейтральну шкалу через режими світлоти: тони для чорного чи темно-сірого, відтінки для білого чи світло-сірого, монохромний режим - для середнього сірого.