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

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

Що повертає інструмент вибору кольору?

Інструмент повертає числове представлення кольору, вибраного на колірному колі. Той самий видимий колір можна записати в кількох форматах, найчастіше в шістнадцятковому форматі, RGB, RGBA, HSL або HSLA.

Ці формати описують колір по-різному. У шістнадцятковому форматі та RGB задаються значення червоного, зеленого й синього каналів. HSL використовує тон, насиченість і світлість, що може спростити послідовне коригування кольорів. Формати з альфа-каналом також описують непрозорість.

• Шістнадцяткові значення складаються із символу решітки та шістнадцяткових цифр, наприклад #336699.
• RGB зазвичай задає кожен канал числом від 0 до 255, наприклад rgb(51, 102, 153).
• HSL описує кут колірного тону та відсоткові значення насиченості й світлості, наприклад hsl(210, 50%, 40%).
• RGBA та HSLA додають прозорість. Значення альфа-каналу 0 означає повну прозорість, а 1, повну непрозорість.

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

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

Вибери поле Колір, познач потрібну точку на колірному колі, а потім використай отримане значення у форматі, який підтримує твій застосунок. Уся обробка відбувається безпосередньо в браузері, а вибраний колір ніколи не завантажується на сервер.

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

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

Як читати результат

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

Синтаксис кольорів у CSS і структурованих даних має бути точним. Під час ручного редагування часто припускаються таких помилок:

• пропускають початковий символ решітки в шістнадцятковому значенні CSS;
• використовують п'ять або сім шістнадцяткових цифр, хоча стандартні шістнадцяткові формати не мають такої довжини;
• ставлять відсотки там, де реалізація RGB очікує числові значення каналів;
• забувають коми в застарілому синтаксисі RGB або поєднують несумісні старий і сучасний синтаксиси;
• копіюють значення з альфа-каналом у програму, яка приймає лише шестизначний шістнадцятковий формат;
• використовують десяткову кому, наприклад 0,5, хоча CSS вимагає десяткову крапку, наприклад 0.5.

Інструмент генерує значення кольорів, але не є універсальним валідатором CSS. Він не підтверджує правильність усієї декларації, документа JSON або файлу теми, тому синтаксичні помилки поза самим значенням кольору потрібно перевіряти відповідним парсером чи інструментом розробки.

Приклади перетворення кольорів

У шестизначному шістнадцятковому кольорі кожна пара цифр відповідає червоному, зеленому або синьому каналу. Наприклад, наведені нижче записи описують той самий непрозорий колір.

Шістнадцяткове значення #336699

Відповідник у RGB rgb(51, 102, 153)

Відповідник у HSL hsl(210, 50%, 40%)

Тризначний шістнадцятковий запис є скороченням. Кожна цифра повторюється, утворюючи шестизначне значення.

Скорочене шістнадцяткове значення #fff

Повний шістнадцятковий запис #ffffff

Відповідник у RGB rgb(255, 255, 255)

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

Який формат кольору вибрати?

Вибирай формат, який уже підтримує цільова система, якщо немає чіткої причини його змінювати. Шестизначний шістнадцятковий запис компактний і часто використовується у змінних CSS та файлах токенів дизайну. RGB зручний, коли програма безпосередньо показує значення каналів, а HSL підходить для створення споріднених кольорів шляхом зміни світлості або насиченості.

• Використовуй шестизначний шістнадцятковий формат для непрозорого вебкольору, коли важливі стислість і зрозумілість.
• Використовуй восьмизначний шістнадцятковий формат, лише якщо цільове середовище явно підтримує альфа-канал у такому записі.
• Використовуй RGB або RGBA для роботи з окремими червоним, зеленим і синім каналами.
• Використовуй HSL або HSLA для програмного створення варіантів теми на основі тону, насиченості чи світлості.
• Використовуй Конвертер кольорів, якщо значення вже є і його потрібно перетворити, а не вибирати новий колір візуально.

Не використовуй значення RGB з екрана як специфікацію для друку. Для комерційного друку можуть знадобитися значення CMYK, колірний профіль ICC, кольоропроба й узгодження з друкарнею. Саме лише математичне перетворення не гарантує, що надрукований колір відповідатиме зображенню на екрані з підсвічуванням.

Коли не потрібно вибирати або конвертувати колір?

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

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

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

Поширені запитання

Чи можна використовувати результат у змінних CSS?

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

Чому той самий колір інакше виглядає на іншому екрані?

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

Чи змінюється колір через великі або малі літери в шістнадцятковому записі?

Ні. Регістр шістнадцяткових цифр від A до F не має значення, тому #AABBCC і #aabbcc позначають той самий колір. Дотримуйся правил регістру, прийнятих у репозиторії, щоб уникати змін лише у форматуванні.

Чи може значення кольору містити літери з діакритичними знаками або символи не з латиниці?

Стандартні формати шістнадцяткових значень, RGB і HSL використовують цифри, літери та розділові знаки ASCII. Літери з діакритичними знаками й символи не з латиниці не належать до синтаксису цих числових форматів кольору. Вони можуть бути в назвах навколишніх змінних або метаданих, якщо це дозволяють відповідна мова та кодування файлу.

Прозорий колір означає відсутність кольору?

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

Чи потрібно округлювати десяткові значення каналів?

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