Розщеплено-комплементарні vs тріадичні палітри: практичний посібник дизайнера

Обидві ці схеми дають вам три кольори, обидві «привабливі» в підручниковому сенсі, і обидві рекомендують на одному диханні в кожній шпаргалці з теорії кольору в інтернеті. Саме це розмиття і є причиною, чому люди обирають неправильну. Я випустив достатньо UI та брендової роботи, щоб сказати вам: на практиці вони поводяться дуже по-різному — одна з них робоча конячка, на якій можна збудувати цілий інтерфейс, інша — петарда, блискуча в правильному місці й головний біль усюди ще.

Тож розберімо їх насправді: геометрію, настрій, математику контрасту й чесні компроміси. Наприкінці ви маєте вміти подивитися на проєкт і знати, до якої з них тягнутися.

Геометрія: де кожна схема сидить на колі

Усе починається з кутів. Стандартне колірне коло — це 360 градусів, і обидві схеми вибирають із нього три відтінки — просто вибирають різні.

Тріадична палітра бере три відтінки, розставлені рівномірно з інтервалом 120 градусів. Оберіть базу, стрибніть на 120 градусів, стрибніть ще на 120 — і ви майже там, звідки почали. Три точки утворюють рівносторонній трикутник. Червоний, жовтий, синій — класичний приклад, первинна тріада, але цей трикутник можна повернути до будь-якого стартового відтінку й зберегти рівномірне розставлення.

Розщеплено-комплементарна палітра починається так само, як ви будували б комплементарну пару: знаходите відтінок прямо навпроти на колі, на 180 градусах. Але замість цього точного протилежного ви відступаєте й берете два відтінки, що сидять обабіч нього — приблизно за 30 градусів у кожен бік. У термінах кутів ви тримаєте базу й додаєте відтінки на +150 і +210 градусах. Результат — вузький рівнобедрений трикутник, перекошений, а не рівномірно врівноважений.

Саме ця єдина структурна різниця — рівний трикутник проти перекошеного — і є вся історія. Вона зумовлює все решта.

Що насправді робить перекошений трикутник

Оскільки два акцентні відтінки розщеплено-комплементарної схеми згруповані близько один до одного (вони лише за 60 градусів один від одного), вони читаються як споріднена пара. Ваш базовий колір стоїть сам по собі на дальньому боці кола, дивлячись на обидва. Тож ви майже задарма отримуєте чітку ієрархію: один домінантний колір, два підтримувальні, що відчуваються як родичі.

Тріадична дає протилежне. Три відтінки, кожен за 120 градусів від двох інших, означають, що жоден колір не привілейований геометрично. Вони рівні. Це чудово для енергії й жахливо для ієрархії, бо в інтерфейсі чи макеті щось має бути найгучнішим, а тріадична палітра не вирішить це за вас. Вам доведеться нав'язувати домінування вручну через пропорцію — старе правило 60-30-10 стає обов'язковим, а не опційним.

Це і є практична розвилка. Якщо ви хочете вбудований провідний колір — розщеплено-комплементарна вручає вам його. Якщо ви хочете три кольори, що б'ються як рівні, і готові бути арбітром — тріадична ваша схема.

Контраст і настрій, простими словами

Розщеплено-комплементарна успадковує більшу частину пробивної сили справжньої комплементарної пари — базовий відтінок усе ще стоїть навпроти своїх акцентів, тож ви зберігаєте те тепло-проти-холоду напруження, що змушує комплементарні схеми «вистрілювати». Але розщеплення комплемента на два пом'якшує зіткнення. Чиста комплементарна пара на кшталт червоного й зеленого може некомфортно вібрувати, коли розташована край-до-краю; зсув до червоного проти синьо-зеленого й жовто-зеленого знімає гостроту, зберігаючи високий контраст. Це високий контраст без візуального дзижчання. Настрій схиляється до впевненого й трохи витонченого.

Тріадична за природою гучніша й грайливіша. Три насичені відтінки на повну силу відчуваються енергійними, юними, інколи цирковими — згадайте LEGO або старіший брендинг Microsoft і Google з опорою на сміливі первинні кольори. На повній насиченості вона швидко може скотитися в дитяче чи хаотичне. Рішення майже завжди — притлумити її: скиньте насиченість, обіприться на один відтінок, а два інші трактуйте як акценти, і нехай нейтральні несуть більшу частину полотна.

Одна заувага щодо точності, яку варто наголосити, бо вона людей збиває з пантелику: жодна зі схем не гарантує доступного контрасту тексту. Співвідношення відтінків стосуються гармонії, а не читабельності. Два кольори можуть бути ідеальними розщепленими комплементами й усе одно провалити перевірку контрасту, бо контраст залежить від відносної яскравості, а не від кута відтінку. Завжди звіряйте текстові й інтерфейсні пари з мінімумами контрасту WCAG 2.1 — 4.5:1 для звичайного тексту, 3:1 для великого — незалежно від того, яку гармонію ви обрали.

Опрацьовані приклади з hex-кодами

Зробімо це конкретним. Почнімо обидва рази з однієї бази — синій приблизно на 220 градусах кола, #2563EB — щоб ви чітко побачили різницю.

Тріадична обертає цей синій на 120 і 240 градусів, приземляючись на червоному й зелено-жовтому:

• Базовий синій: #2563EB
• +120 градусів, пурпурово-червоний: #EB2563
• +240 градусів, жовто-зелений: #63EB25

Це яскраво, врівноважено й, відверто, забагато на повній силі. У реальному продукті я тримав би синій домінантним, скупо використовував би червоний для заклику до дії, а зелений лишив би для станів успіху — ніколи всі три на однаковій гучності.

Розщеплено-комплементарна тримає синій і замість його прямого комплемента (помаранчевого десь на 40 градусах) бере два відтінки, що його фланкують:

• Базовий синій: #2563EB
• +150 градусів, теплий жовто-помаранчевий: #EBA225
• +210 градусів, червоно-помаранчевий: #EB4F25

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

Якщо хочете оминути ментальну арифметику, вставте базовий hex у генератор колірних палітр, перемикайтеся між тріадичним і розщеплено-комплементарним режимами гармонії й спостерігайте, як акценти рухаються по колу в реальному часі. Спостереження за тим, як трикутник перебудовує сам себе, навчає різниці швидше за будь-яку діаграму.

Як побудувати кожну на практиці

Для розщеплено-комплементарної мій робочий процес такий: зафіксуйте базу як ваш фірмовий чи первинний колір, згенеруйте два розщеплення, а потім одразу приглушіть або освітліть акценти на 10–20 відсотків, щоб вони підтримували, а не конкурували. Розподіляйте ролі одразу — база провідна, один акцент — ваш первинний колір дії, другий акцент — для вторинного наголосу чи візуалізації даних. Додайте майже нейтральний, виведений із базового відтінку (дуже приглушений тон того синього), для фонів — і у вас готова цілісна система.

Для тріадичної дисципліна — це пропорція. Оберіть домінантний відтінок і зобов'яжіться, щоб він ніс 60-плюс відсотків площі поверхні. Сильно стягніть два інші вниз за насиченістю — тріадична схема за 40–60 відсотків насиченості виглядає навмисною й зрілою, тоді як ті ж відтінки на 100 відсотках виглядають як магазин іграшок. Опирайтеся спокусі використовувати всі три з однаковою вагою будь-де, окрім навмисного, грайливого акцентного моменту.

То яку ж обрати?

Тягніться до розщеплено-комплементарної, коли:

• Вам потрібен очевидний домінантний колір і чиста ієрархія з мінімумом метушні.
• Ви будуєте UI, дашборди, SaaS чи будь-що, де важать стабільність і спокійно-впевнений настрій.
• Ви хочете комплементарний контраст без різкої вібрації справжньої протилежної пари.

Тягніться до тріадичної, коли:

• Робота виразна — дитячі бренди, ігри, ілюстрація, події, редакційні акценти.
• Ви справді хочете три кольори порівнянної важливості й контролюватимете баланс через пропорцію.
• Енергія й грайливість — це і є суть, і у вас є дисципліна притлумлювати й арбітрувати.

Чесно, у щоденній інтерфейсній роботі я тягнуся до розщеплено-комплементарної значно частіше. Вона дає мені 80 відсотків візуального інтересу тріадичної з, можливо, 20 відсотками няньчення. Тріадична — захопливіший інструмент, але захоплення — це і витрата, і вигода; воно вимагає стриманості, на яку в багатьох проєктів немає простору. Обирайте ту, чия поведінка за замовчуванням збігається з енергією, яку ваш проєкт справді може собі дозволити.