Без завантаження, 100% локально, без облікового запису

Генератор колірних схем

Оберіть базовий колір і отримайте повну палітру, комплементарну, аналогову, тріадну, тетрадну чи монохроматичну. Копіюйте будь-який зразок як HEX, RGB чи HSL. Нічого не залишає ваш браузер.

Як працює Генератор колірних схем

Генератор колірних схем будує повні колірні палітри з єдиного базового кольору, який ви обираєте: комплементарний (протилежний на колірному колі), аналогічний (суміжні відтінки), тріадний (три рівномірно розміщені), тетрадний (чотири відтінки у двох комплементарних парах) та монохроматичний (різна яскравість та насиченість того самого відтінку). Уся логіка палітри виконується у браузері; ніщо з введеного не покидає пристрій.

Кожна згенерована палітра показує зразки з готовими для копіювання значеннями HEX та RGB. Це дає дизайнерам відправну точку, засновану на теорії кольорів, а не на здогадках. Оскільки генератор підтримує роботу в офлайн-режимі після початкового завантаження сторінки, можна вільно експериментувати з фірмовими кольорами під час зустрічі з клієнтом без мережевого підключення. Введіть базовий колір у будь-якій нотації, яку маєте, HEX, RGB або HSL, і кожен згенерований зразок повертається в усіх трьох, щоб ви могли скопіювати той, якого очікує ваш інструмент дизайну.

Автор: Bastien Sulyan

Генератор колірних схем: покрокова інструкція

  1. Виберіть базовий колір за допомогою вибирача кольорів або введіть HEX-значення.
  2. Виберіть тип гармонії з вкладок: комплементарна, аналогічна, тріадна, тетрадна або монохроматична.
  3. Кольорові зразки палітри з'являються миттєво з їхніми значеннями HEX та RGB.
  4. Клацніть будь-який зразок, щоб скопіювати його HEX-значення в буфер обміну.
  5. Відрегулюйте базовий колір для дослідження варіацій та спостерігайте, як оновлюється вся палітра.

Поширені сценарії використання

  • Дизайнер, що починає нову фірмову ідентичність, вибирає основний колір та генерує тріадну палітру для пропозиції клієнту трикольорових комбінацій.
  • Розробник, що будує темну тему, використовує монохроматичну палітру для генерування діапазону відтінків і тонів з єдиного фірмового кольору.
  • Творець контенту вибирає аналогічну палітру для підбору акцентних кольорів для презентації, що відчуваються цілісними без різкого контрасту.
  • UI-дизайнер використовує комплементарну палітру для визначення акцентного кольору з високим контрастом, що виділяється на фоні основного фірмового кольору.

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

Як працює комплементарна палітра?

Комплементарний колір є відтінком, що безпосередньо протилежний базовому кольору на колірному колі HSL, відстоючи від нього на 180 градусів. Розміщення комплементарних кольорів поруч створює максимальний контраст. Інструмент показує базовий колір та його доповнення, плюс світліші та темніші варіанти кожного.

У чому різниця між тріадними та тетрадними палітрами?

Тріадна палітра використовує три відтінки, рівномірно розміщені на відстані 120 градусів один від одного на колірному колі. Тетрадна палітра використовує чотири відтінки на відстані 90 градусів один від одного, утворюючи дві комплементарні пари (також звана подвійною комплементарною або квадратною палітрою). Тетрадні палітри є складнішими і вимагають ретельного балансування пропорцій, щоб уникнути візуального шуму.

Чи зберігаються або надсилаються вибрані кольори будь-куди?

Ні. Генерація палітр є арифметикою на HSL-представленні базового кольору: обертання кута відтінку на фіксовану величину, зміщення яскравості та насиченості. Кожне обчислення виконується локально у браузері; нічого не надсилається на жоден сервер.

Чи можна експортувати палітру як CSS-файл або файл дизайн-токенів?

Інструмент наразі показує зразки з копійованими значеннями HEX та RGB. Для повного експорту CSS custom properties або JSON дизайн-токенів скопіюйте значення вручну в файл токенів або CSS проекту. Кнопка спеціального експорту може бути додана в майбутньому оновленні.

Чи відповідає цей генератор якомусь формальному стандарту теорії кольорів?

Обчислення палітри використовують стандартні формули обертання відтінку в колірному просторі HSL, що є конвенцією більшості веб-дизайнерських інструментів. Точна перцептивна рівномірність HSL має обмеження порівняно з LAB або OKLCH, але обертання HSL виробляють палітри, що відповідають очікуванням конвенцій колірного кола дизайнерів.

Схожі інструменти

Тримайте все локально, досліджуйте додаткові інструменти.

Усі інструменти розробника