Стаття
Колірні інструменти для вебу: hex, палітри та доступність
Підбір кольорів для сайту здається простим рівно до зустрічі з hex-кодами, трійками RGB і кутами HSL, що описують те саме по-різному. У статті розглядається, як ці формати пов’язані між собою, як перетворити один фірмовий колір на придатну палітру і як домогтися, щоб результат лишався читабельним для людей, які бачать колір інакше.
Hex, RGB та HSL описують той самий колір
Колір на екрані змішується з червоного, зеленого та синього світла. Запис hex задає ці три канали шестисимвольним кодом, наприклад #2563eb, де кожна пара символів це один канал від 00 до ff. RGB записує ті самі три числа у десятковому вигляді, від 0 до 255, що читається легше, але нічого не додає. HSL заходить з іншого боку: він описує колір через тон (положення на колірному колі від 0 до 360 градусів), насиченість (наскільки він яскравий) та світлоту (наскільки близький до білого чи чорного). HSL це формат, до якого тягнуться дизайнери, коли хочуть посунути колір, адже підняти світлоту чи зсунути тон це одна інтуїтивна зміна, а не три пов’язані числа. Конвертер дозволяє переходити між усіма трьома, щоб прочитати значення в одному форматі і застосувати його в іншому.
Перетворення одного кольору на палітру
Одного фірмового кольору рідко вистачає. Робоча палітра зазвичай потребує основний колір, один чи два акценти та набір нейтральних сірих для тексту й фонів. Зв’язки між кольорами підкоряються простим правилам колірного кола: комплементарні кольори лежать навпроти один одного, аналогічні стоять поруч і дають спокійне відчуття, а тріадний набір рівномірно розподіляє три кольори для контрасту без дисонансу. Інструмент колірних схем застосовує ці правила до вашого вихідного кольору і видає відповідні hex-коди, тож обчислювати кути вручну не потрібно. Якщо у вас уже є зображення, настрій якого вам подобається, екстрактор палітри зчитує з нього домінувальні кольори, і це швидкий спосіб побудувати сайт на основі фотографії чи логотипа.
Контраст і дальтонізм
Палітра, що чудово виглядає на вашому екрані, усе одно може підвести читачів. Приблизно в одного з дванадцяти чоловіків і однієї з двохсот жінок є та чи інша форма порушення кольоросприйняття, найчастіше складність із розрізненням червоного та зеленого. Якщо єдина ознака помилки це червоний текст на зеленій кнопці, такі читачі його не помітять. Рішення не в тому, щоб уникати кольору, а в тому, щоб ніколи не покладатися лише на колір: супроводжуйте його значком, підписом чи формою і зберігайте достатній контраст за світлотою між текстом і його фоном. Симулятор дальтонізму показує, як ваша палітра виглядає за поширених типів кольоросприйняття, тож проблему можна впіймати до випуску, а не після скарги.
Робимо все це в браузері
Жоден із цих кроків не потребує сервера. Перетворення hex-коду, генерація схеми, зчитування кольорів із зображення та моделювання дальтонізму це невеликі обчислення, з якими браузер справляється миттєво. Це важливо, коли зображення, з якого ви берете пробу, це невипущений дизайн чи логотип клієнта: з цими інструментами файл лишається на вашому пристрої і нічого не завантажується. Ви отримуєте той самий результат, що й від онлайн-сервісу, не передаючи макет. Конвертер кольору, генератор колірних схем, екстрактор палітри та симулятор дальтонізму працюють локально і так само діють офлайн після завантаження сторінки.
OKLCH та ширші колірні простори
Hex, RGB і HSL описують кольори в межах гами sRGB, яку екрани використовують вже багато років. Новіші дисплеї відображають більше, і CSS тепер може досягти цього за допомогою функції color() та простору Display P3, який додає насичені зелені та червоні відтінки, які sRGB не може відтворити. Більш суттєва зміна - це OKLCH: спосіб запису кольору через яскравість, хроматичність і відтінок, який відповідає тому, як людське oko насправді сприймає освітленість. У HSL жовтий і синій з однаковою 50% яскравістю виглядають зовсім по-різному: жовтий сприймається яскравим, синій - темним. У OKLCH, якщо зафіксувати яскравість і змінювати лише відтінок, суб'єктивна освітленість залишається стабільною. Це дає змогу на практиці будувати палітру, де кожен відтінок відповідає одному й тому самому цільовому показнику контрасту, якщо зафіксувати одне число, замість того щоб вручну підбирати кожен колір.
Інструменти з цієї статті
- Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV та CMYK. Включено перевірку контрасту WCAG. Без завантаження.
- Генератор колірних схемГенеруйте комплементарні, аналогові, тріадні, тетрадні та монохроматичні палітри з базового кольору. Без завантаження.
- Витягувач колірної палітриВитягуйте домінантні кольори із зображення як зразки HEX. Копіюйте будь-який колір. Без завантаження.
- Симулятор дальтонізмуСимулюйте протанопію, дейтеранопію, тританопію та ахроматопсію на зображенні. Без завантаження.
Поширені запитання
У чому різниця між hex та RGB?
Це два способи записати той самий колір. Hex пакує канали червоного, зеленого та синього у шестисимвольний код за основою 16, тоді як RGB перелічує ті самі три канали десятковими числами від 0 до 255. #ff0000 і rgb(255, 0, 0) це той самий червоний. Hex компактний і часто трапляється у CSS та файлах дизайну, RGB читається з першого погляду легше, а переведення між ними нічого не змінює в самому кольорі.
Як зрозуміти, чи читабельні мої кольори для користувачів із дальтонізмом?
Проженіть палітру через симулятор дальтонізму, який перемальовує ваші кольори так, як їх побачила б людина з кожним поширеним типом кольоросприйняття. Стежте за парами, що зливаються в один відтінок, особливо за червоними та зеленими. Найнадійніша звичка це ніколи не використовувати колір як єдину підказку: підкріплюйте його текстом, значком чи візерунком і зберігайте чітку різницю за світлотою між переднім планом і фоном, щоб зміст уцілів, навіть якщо тон зник.