Як користуватися колірним кругом для добору кольорів

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

Що таке колірний круг насправді

Зніміть оздобу — і колірний круг це просто відтінок, згорнутий у коло. Відтінок — це частина «який колір»: червоний, помаранчевий, той конкретний зелений світлофора. Оскільки видимий спектр зациклюється сам на себе (червоний переходить у фіолетовий, який переходить назад до червоного), має сенс зігнути його в кільце, а не в лінію. Тож кут круга — це відтінок, виміряний від 0° до 360°.

Ця єдина ідея — увесь фокус. Кожне правило гармонії, про яке ви чули — комплементарне, тріадне, аналогове — насправді просто інструкція про кути. «Комплементарне» означає «йди на протилежний бік». «Тріадне» означає «крокни на третину навколо, тричі». Щойно ви засвоюєте, що круг — це 360-градусний регулятор для відтінку, названі правила стають тим, що ви можете зробити руками, а не термінами, які зубрите.

Первинні, вторинні, третинні — і пастка RYB

Ось де більшість пояснень тихо вам брешуть. Класичний круг, який ви малювали в школі, — це круг RYB: первинні — червоний, жовтий, синій; вторинні (змішування двох первинних) — помаранчевий, зелений, фіолетовий; третинні (змішування первинного із сусіднім вторинним) — проміжні відтінки на кшталт червоно-помаранчевого чи синьо-зеленого. Ця модель описує, як змішується фізичний пігмент. Це те, як поводиться фарба, і це справді корисно за мольбертом.

Але ваш екран не змішує фарбу. Він змішує світло, а світло адитивне: первинні — червоний, зелений і синій, а вторинні — блакитний (cyan), пурпуровий (magenta) і жовтий. Саме тому цифровий колірний круг — той, що всередині генератора колірних палітр і фактично кожного сучасного дизайнерського інструмента — побудований на геометрії RGB/HSL, а не RYB. Практичний наслідок постійно збиває людей: на крузі RYB комплемент червоного — зелений, а на крузі RGB/HSL комплемент червоного (0°) — блакитний (180°). Жоден не помилковий. Вони відповідають на різні питання. Якщо ви добираєте кольори для вебсайту, застосунку чи будь-чого, що світиться, довіряйте цифровому кругу — він передбачає, що зроблять пікселі.

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

Відтінок, насиченість, яскравість: читання круга у трьох вимірах

Плоске коло показує вам лише відтінок. Реальний колір потребує ще двох вимірів, і геніальність моделі HSL у тому, що вона кладе їх на той самий круг так, що це можна відчути.

• Відтінок — це кут. Згідно зі специфікацією CSS і MDN, червоний сидить на 0deg, жовтий на 60deg, зелений на 120deg, блакитний на 180deg, синій на 240deg, а пурпуровий на 300deg. Обертання навколо круга змінює, який колір ви маєте, і нічого більше.
• Насиченість — це відстань від центру. На ободі колір повністю насичений і яскравий. Потягніть до середини — і він стікає до сірого. У самому центрі кольору немає взагалі.
• Яскравість зазвичай є окремим повзунком (згори донизу, від чорного до білого), бо третю вісь на 2D-коло не накласти. Деякі інструменти замість цього вкладають значення в радіус. Так чи так, яскравість — це те, що робить hsl(210, 80%, 30%) глибоким темно-синім, а hsl(210, 80%, 85%) блідим небесним — той самий відтінок, та сама насиченість, інша яскравість.

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

Читання кожної гармонії як кута

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

• Комплементарна — за 180°. Одна база, одна навпроти на крузі. Максимальний контраст, максимальна енергія. Чудово для заклику до дії на спокійному тлі; виснажливо, якщо дозволити обом кольорам битися на повній насиченості по всьому макету.
• Аналогова — сусіди в межах приблизно ±30°. Уявіть #1B6CA8, #1B9AA8, #1BA87E: сині, що сповзають у бірюзу. Низьке напруження, дуже природне (це палітра більшості заходів сонця й лісів). Оберіть один домінувати, аби це не читалося як каша.
• Тріадна — три відтінки за 120°. Збалансовано й жваво. Класичне відчуття червоний-жовтий-синій живе тут, хоча на цифровому крузі тріо зсувається. Дайте одному вести, а двом іншим — підтримувати.
• Розщеплено-комплементарна — ваша база плюс два сусіди її комплемента замість самого комплемента. Ви зберігаєте пробивну силу контрасту, але пом'якшуєте лобове зіткнення. Це мій вибір за замовчуванням, коли комплементарна відчувається надто агресивною — я писав більше про цей компроміс у розщеплено-комплементарні vs тріадні палітри.
• Тетрадна — дві комплементарні пари, що утворюють прямокутник. Багато, але важко збалансувати; вам справді треба понизити три з чотирьох до акцентів.
• Квадратна — чотири відтінки, рівномірно розставлені за 90°. Як тетрадна, але симетрична, тож ще вимогливіша. Використовуйте ощадливо.
• Монохроматична — один відтінок, варійований лише насиченістю та яскравістю. Жодного обертання, лише рух уздовж радіуса й повзунка. Найбезпечніший, найузгодженіший варіант і чудове місце, аби почати, якщо палітра відчувається хаотичною.

Перемикайтеся між цими правилами в генераторі й спостерігайте, як точки клацають у нові положення на тому самому крузі. Бачити, як рухаються кути, вартісніше за будь-який обсяг зубріння.

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

Ось робочий процес, від початку до кінця:

• Спершу якір. Оберіть один відтінок, який мусить бути — фірмовий колір, фото продукту, настрій. Перетягніть точку до нього й занотуйте HSL.
• Обирайте зв'язок, а не кольори. Вирішіть, скільки напруження хочете. Спокійно й цілісно? Аналогова або монохроматична. Потрібна фокусна точка? Комплементарна або розщеплено-комплементарна. Дайте куту зробити вибір.
• Керуйте насиченістю й яскравістю, а не відтінком. Щойно відтінки розставлені, опирайтеся повторному обертанню. Натомість підкручуйте радіус і повзунок. Більшість «не тих» палітр правильні за відтінком і хибні за насиченістю.
• Призначте ролі. Ніколи не ділте кольори порівну. Домінантний, другорядний і малий акцент — правило 60-30-10 — найлегший спосіб не дати одному кольору цькувати решту.
• Перевірте контраст перш, ніж зобов'язуватися. Прекрасний зв'язок на крузі нічого не значить, якщо текст не читається. Прогоніть свою пару «текст і тло» через вбудований перевіряч WCAG; цільтеся щонайменше в 4.5:1 для основного тексту згідно з настановами W3C щодо контрасту. Я докопуюся до «чому» в поясненні контрастних співвідношень WCAG.

Круг обирає зв'язки. Насиченість, яскравість і пропорція перетворюють ці зв'язки на щось придатне до використання. Якщо хочете заглибитися в те, що ці поєднання насправді повідомляють, розуміння колірної гармонії в дизайні UI підхоплює там, де закінчується геометрія.

Помилки, які я бачу найчастіше

Два патерни, знову й знову. Перший — повна насиченість усюди, кожен колір викручений до обода. Круг радо подасть вам ідеальну тріаду, але якщо всі три на максимумі, результат вібрує. Потягніть більшість усередину. Другий — ставлення до названих правил як до законів. Це стартові точки. «Неправильний» кут, який ви зсунули на 10°, бо так виглядало краще, є кращим. Круг — інструмент для швидких, обґрунтованих перших ходів, а не правник, якому ви винні слухняність. Тягніть точку, довіряйте своїм очам і дайте показникам навчити вас словника по дорозі.