Вибір кольору

Усі кольори на цій сторінці подано в sRGB — типовому колірному просторі вебу з кінця 1990-х, коли його підтримали браузери. Екран змішує червоне, зелене та синє світло, і кожен канал має 256 рівнів (0–255), що дає 16 777 216 можливих кольорів. RGB записує ці три числа безпосередньо; HEX записує ті самі три числа в шістнадцятковій системі, по дві цифри на канал, тож #FF6600 — це червоний 255, зелений 102, синій 0. Скорочений запис із трьох цифр подвоює кожну цифру: #F60 — це #FF6600.

HSL і HSB (також HSV) описують ті самі кольори так, що їх легше підлаштовувати вручну. Відтінок — це кут на колірному колі: 0° червоний, 120° зелений, 240° синій. Різниця — в останньому числі. В HSL світлота 100% завжди дає білий, а 50% — найчистіший варіант відтінку; в HSB яскравість 100% дає чистий відтінок, а для білого потрібна насиченість 0%. Дизайнерські застосунки, як-от Photoshop і Figma, використовують HSB у своїх піпетках, а CSS нативно розуміє hsl(), тому вище наведено обидва формати.

Екрани додають світло, а принтери віднімають його фарбами: блакитною, пурпурною, жовтою та чорною. Ці дві системи охоплюють різні діапазони кольорів, які називають гамами. Дуже насичені кольори екрана, як-от яскраво-зелений RGB, електричний синій чи неоновий помаранчевий, лежать поза межами того, що можуть відтворити друкарські фарби, тому в друку вони виглядають тьмянішими, ніж на моніторі.

Значення CMYK тут отримано простим математичним перетворенням без профілю ICC. Для приблизного завдання цього досить, а для друкарні — ні. Друкарня конвертує з профілем для свого паперу й машини, наприклад FOGRA39 у Європі або GRACoL у США, і той самий колір RGB за різними профілями дасть різні відсотки фарб. Для друку надсилайте значення RGB або HEX разом із профілем, який вимагає друкарня.

WCAG 2.1 порівнює відносну яскравість двох кольорів: світліший плюс 0,05, поділений на темніший плюс 0,05. Результат — від 1:1 (однакові кольори) до 21:1 (чорний на білому). Рівень AA вимагає щонайменше 4.5:1 для звичайного тексту і 3:1 для великого, тобто 18 пунктів або 14 пунктів напівжирного; рівень AAA підвищує це до 7:1 і 4.5:1. Елементи інтерфейсу, як-от межі полів уведення та піктограми, мають мати 3:1 щодо оточення за критерієм успіху 1.4.11.

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

Палітра із зображення зчитує ваш файл через canvas браузера, стискає його до 200 пікселів по довшій стороні й групує схожі пікселі методом медіанного розрізу, який описав Пол Гекберт у 1982 році: діапазон кольорів раз по раз ділиться за найширшим каналом, доки не залишиться шість груп, і середнє кожної групи стає зразком. Прозорі пікселі ігноруються, тож логотип на прозорому тлі дає кольори самого логотипа.

Коли кольори відомі, плоский логотип часто краще мати у векторі. Конвертер зображень у SVG трасує його у форми, що зберігають ці точні кольори, а якщо ви робите шапку каналу, зміна розміру банера YouTube підганяє макет до 2560 × 1440 з урахуванням безпечної зони.