Тінти, шейди й тони простими словами

У моїй першій реально випущеній палітрі було рівно п'ять кольорів, і чотири з них були тим самим синім. Я не планував це так — я просто весь час потребував «трохи світлішої версії оцього для тла картки» і «темнішої для рамки» і «чогось приглушеного для неактивної кнопки». Те, що я насправді робив, не маючи для цього словника, — це створював тінти, шейди й тони. Щойно я вивчив, що ці три слова описують три точні операції, робота з палітрою перестала бути спробами навмання й стала чимось ближчим до арифметики.

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

Спершу однореченнєві визначення, потім нюанс

Ось визначення, оголені до кістки:

• Тінт — це відтінок плюс білий. Він стає світлішим і лагіднішим. Червоний стає рожевим.
• Шейд — це відтінок плюс чорний. Він стає темнішим і глибшим. Червоний стає бордовим.
• Тон — це відтінок плюс сірий. Він стає приглушеним і запиленим, без обов'язкового значного посвітлішання чи потемніння. Червоний стає цегляним або трояндовим.

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

Тож ментальна модель — не «тінт = світліший, шейд = темніший, тон = приглушений» як три не пов'язані ефекти. Це один ефект — розведення чистого відтінку нейтраллю — побачений із трьох напрямків. Саме це переосмислення дає клацнути наступній ідеї.

Світлість і насиченість — це два різні регулятори

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

Саме тому HSL — це колірна модель, яку варто вивчити. HSL означає hue, saturation і lightness (відтінок, насиченість і світлість) і розщеплює колір на три числа, які можна налаштовувати по одному:

• Відтінок (hue) — це кут на колірному колі, 0–360°. Червоний близько 0, зелений біля 120, синій біля 240. Тінти, шейди й тони зазвичай лишають відтінок у спокої — ви не змінюєте, що це за колір, лише наскільки він чистий і світлий.
• Насиченість (saturation) — це 0–100%. На 100% колір на повній інтенсивності; на 0% це чистий сірий без жодного відтінку взагалі. Це ваш регулятор хроми.
• Світлість (lightness) — це 0–100%. На 0% ви отримуєте чорний незалежно від відтінку, на 100% — білий незалежно від відтінку, а 50% — приблизно там, де живе чиста, яскрава версія кольору.

З цим словником три операції стають точними. Тінт — це переважно підвищення світлості до 100%. Шейд — це переважно зниження світлості до 0%. Тон — це переважно зниження насиченості до 0%, тримаючи світлість приблизно там, де вона є. Довідник MDN із нотації HSL — хороше місце, щоб підтвердити синтаксис, якщо ви хочете записати їх як CSS.

Одна точна виноска, бо на ній спотикаються. «L» у HSL — це lightness (світлість), а не «value» чи «brightness». Є споріднена модель, HSB/HSV, де третій канал — це value (яскравість), і вона поводиться інакше — у HSB 100% value при повній насиченості дає вам яскравий чистий колір, тоді як у HSL 100% lightness завжди дає білий. Якщо ви колись витягали колір із Photoshop (який використовує HSB), а він виглядав не так у CSS (який використовує HSL), причина саме в цій неузгодженості. Для побудови тональних шкал HSL — дружніша модель саме тому, що світлість чисто йде від чорного до білого.

Як освітлити чи затемнити колір, не зруйнувавши його

Тепер практична частина, бо тут є правильний і неправильний спосіб.

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

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

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

Побудова чистої монохроматичної шкали з одного відтінку

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

Дозвольте мені побудувати одну вручну, щоб ви побачили логіку. Почніть із базового синього на відтінку 217, доволі повній насиченості, середній світлості — назвемо його #2563EB. Тепер згенеруйте градацію, проводячи світлість від дуже світлого до дуже темного, тримаючи відтінок біля 217 і піднімаючи насиченість на обох краях:

• #EFF4FE — найсвітліший тінт. Ледь помітний синьо-білий. Тло сторінки чи секції.
• #DBE6FD — м'який тінт для тонких заливок і смугастого чергування.
• #B9CDFB — світлий тінт для рамок і розділювачів.
• #7DA2F6 — середньо-світлий крок, гарний для ореолів наведення й вторинних заливок.
• #2563EB — база. Ваш основний колір бренду, той, із якого зроблені кнопки.
• #1D4FC4 — на крок нижче. Природний стан наведення для тієї основної кнопки.
• #163C96 — глибший шейд для станів активний/натиснутий і сильних рамок.
• #0F2A6B — темний шейд для заголовків на світлому тлі або поверхонь у темній темі.
• #0A1C45 — найтемніший шейд. Майже-чорний, усе ще безпомилково синій.

Зверніть увагу, що дає вам ця драбина. Кожен інтерактивний стан, потрібний кнопці, — спокій, наведення, активність — випадає з того самого відтінку, на три кроки світлості один від одного. Ви не вигадуєте нові кольори; ви крокуєте вниз по шкалі. Саме тому їх кодують як нумеровані токени (blue-50 через blue-900) у дизайн-системах. Якщо ви хочете заглибитися в перетворення такої градації на повторно використовувані змінні, створення масштабованих колірних токенів підхоплює рівно там, де це закінчується.

Кілька важко здобутих правил для самої шкали:

• Розводьте кроки світлості достатньо широко, щоб їх можна було розрізнити. Найпоширеніший монохроматичний збій — кроки, що сидять занадто близько; #2563EB поруч із #2C68EC — функціонально той самий колір, і ваш UI втрачає ієрархію. Сусідні кроки мають бути помітно різними з першого погляду.
• Кроки не мусять бути рівномірно розставлені. Людське око чутливіше до різниці серед світлих кольорів, тож світлий край градації зазвичай хоче тісніших приростів світлості, а темний край може взяти більші стрибки. Рівне розставлення у світлості часто виглядає нерівним для ока.
• Тримайте один сталий відтінок, але дозволяйте крихітні дрейфи. Зсув відтінку на градус-два між кроками — це нормально й часто виглядає краще; розмах на двадцять градусів означає, що ви покинули монохроматичну територію.

Де тони відпрацьовують своє місце в UI

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

Очевидний приклад — неактивні елементи керування. Неактивна кнопка не має бути світлішим синім (це читається як інший активний стан) — вона має бути притлумленим синім, знебарвленим до сірого, щоб ясно сигналізувати «зараз недоступно». Візьміть свій #2563EB і потягніть насиченість далеко вниз до сірого, тримаючи світлість помірною, — і ви отримаєте щось на кшталт #9AA6BF: усе ще ледь синій, очевидно інертний. Це тон, що робить рівно те, чого не можуть тінти й шейди.

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

Помилки, на яких я досі ловлю себе

• Плутанина тінту з тоном. Вони не взаємозамінні. Тінт червоного — це рожевий (світліший, усе ще доволі чистий). Тон червоного — це курний трояндовий (приглушений, схожа світлість). Тягніться до тінту, коли хочете світліше; тягніться до тону, коли хочете тихіше. Вибір неправильного — причина того, що «пом'якшений» колір іноді все одно відчувається голосним.
• Побудова всієї шкали на одній насиченості. Заморозьте насиченість на всю градацію — і світлий край стане блідим, а темний каламутним. Дозвольте насиченості дихати — вище на краях, часто найспокійніше посередині.
• Забування, що контраст існує. Прекрасна монохроматична градація нічого не каже вам про те, чи читабельний текст на ній. Кроки світлості, розставлені на три, усе одно можуть провалити коефіцієнти контрасту WCAG для основного тексту. Будуйте шкалу заради цілісності, потім перевіряйте фактичні пари текст-на-поверхні перевіркою контрасту. Цілісність і читабельність — це окремі задачі, і інструмент перевіряє другу за вас.
• Сприйняття монохроматичності як фінішної прямої. Тінти й шейди одного відтінку дають вам спокійну, єдину систему — але іноді вам потрібен акцент звідкись інде на колі. Монохроматична база плюс єдиний комплементарний акцент — одна з найнадійніших палітр, що існують, і саме там розуміння колірної гармонії окупається.

Усе зводиться до цього: відтінок — це лише відправна точка. Тінти, шейди й тони — це три способи розтягнути цю одну відправну точку в повну робочу палітру — світліше з білим, темніше з чорним, тихіше із сірим — а HSL дає вам регулятори, щоб робити це свідомо, а не випадково. Оберіть відтінок, який вам подобається, відкрийте монохроматичне правило й проведіть повзунок світлості від краю до краю. До моменту, коли ви побудуєте одну хорошу дев'ятикрокову градацію вручну, ви вже ніколи не дивитиметеся на «набір кольорів» так само. Це майже завжди один колір, одягнений у дев'ять вбрань.