ГоловнаІнструменти дизайнуГенератор палітри кольорів

Генератор палітри кольорів

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

Про цей інструмент

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

Як користуватися

  1. Оберіть базовий колір за допомогою піпетки.
  2. Виберіть тип гармонії, наприклад комплементарну або тріаду.
  3. Перегляньте п'ять згенерованих зразків.
  4. Натисніть «Копіювати як CSS-змінні», щоб вставити палітру у свою таблицю стилів.

Корисно знати

  • Комплементарні кольори розташовані на колірному колі на відстані 180°, а кольори тріади — через 120°.
  • Аналогові палітри складаються із сусідніх відтінків (приблизно через 30°) і зазвичай справляють спокійне, цілісне враження.
  • Розщеплена комплементарна схема поєднує базовий відтінок із двома відтінками обабіч його доповнювального (±30°), що дає контраст із меншою напругою.
  • Монохромні палітри зберігають один відтінок і змінюють лише насиченість та світлість.
  • Генератор працює в HSL, де відтінок обертається без зміни світлості кольору.

Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.

Поширені запитання

Що таке комплементарна палітра кольорів?

Комплементарна палітра поєднує відтінок із протилежним йому на колірному колі (на відстані 180°), як-от синій і помаранчевий. Серед усіх гармоній вона дає найсильніший контраст.

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

Більшість інтерфейсів використовує один основний колір, один-два акцентні та набір нейтральних. Гармонія з п'яти кольорів — хороша відправна точка, яку можна скоротити або доповнити світлими й темними варіантами.

Чим тріада відрізняється від тетради?

Тріада використовує три відтінки, рівномірно розташовані через 120°. Тетрада — чотири відтінки через 90°, що утворюють на колі квадрат: вона багатша, але її складніше збалансувати.

Чи можна використати палітру в CSS або Tailwind?

Так. Скопіюйте палітру як користувацькі властивості CSS і звертайтеся до них через var() або вставте hex-значення в кольори теми Tailwind.