🎛 ICC-профілі: чому кольори макета змінюються на різних екранах

Створюєте макет у Figma, зберігаєте у PNG — у Safari кольори виглядають яскраво, у Chrome — вже бляклі, а на телефоні ще й по-іншому. Це типовий ефект ICC-профілів. Це такі невидимі інструкції, які підказують пристроям, як показувати колір. Якщо профілю немає або браузер його ігнорує, той самий макет виглядає по-різному.

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

→ Display P3 — сучасний профіль, створений для кіно та професійних екранів. Дає ширшу гаму, глибші відтінки червоного і зеленого. Але браузери та програми не завжди його коректно зчитують.

Саме тому Safari може показувати кольори яскравіше, ніж Chrome: перший працює з ICC-профілями, другий часто їх ігнорує.

Щоб уникнути подібного, перед експортом перевіряйте профіль кольору. У Figma PNG можуть зберігатися з Display P3 навіть без попередження. Краще експортувати з налаштуванням sRGB або використовувати оптимізатори типу TinyPNG, які автоматично переводять профіль у стандартний.

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

На курсі «Історія теорії кольору та колірні моделі» пояснюємо, як працюють профілі й що робити, щоб макети виглядали однаково на будь-якому екрані!

Навчання | Події | Instagram