Колір фону. Колірний фон та насиченість

Чи не вибираєте кольори для свого інтерфейсу, які напружують очі користувача?

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

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

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

Почнемо з теорії.

Яскравість Vs. Насиченість

Яскравість та насиченість – це різні властивостікольори. Перше - це скільки білого або чорного кольору змішується в даному кольорі, в той час як другий відноситься до кількості сірого кольору.

Збільшення яскравості значить, що насиченість зменшується теж. Коли ви зменшуєте насиченість, ви повертаєте колір у відтінок сірого. Коли ви збільшуєте яскравість, ви збільшуєте кількість кольорових складників, але не робите колір сірим ().

Ви використовуєте колір у вашому інтерфейсі, що напружує очі користувача?

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

На яку колонку можна дивитися довше?

приклад. Уважно подивіться на кольори у зображенні зверху.

Лівий стовпець містить кольори з максимальною яскравістю та насиченістю. Правий стовпець містить кольори з яскравістю та насиченістю, що дорівнює 80%.

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

Яскравість проти насиченості

Яскравість (Brightness) і насиченість (Saturation) – це різні колірні властивості. Перша властивість означає, як багато білого чи чорного поєднується з кольором. Друга властивість - скільки сірого міститься в кольорі.

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

Зверху: збільшення яскравості – більше білого. Знизу: зменшення насиченості – більше сірого

Вплив кольору на увагу та збудження

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

Два інших дослідження – «Збудливий ефект кольорової насиченості» та «Колір та емоції» показали, що насичені кольори пов'язані з найбільшим збудженням. Відтінки (Hue) також впливають на збудження, але насиченість і яскравість надають сильний вплив.

Використовуйте яскраві та насичені кольори в кнопках

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

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

Зліва: фон яскравий та насичений. Тому вся увага до фону, а не до кнопки. Праворуч: кнопка використовує яскравий та насичений колір. Вона привертає увагу користувача

Використовуйте темний та менш насичений колір для фону

Краще робити колір фонутемніше і менш насиченим. Під час затемнення кольору зменшується вміст білого кольору. Тоді як зменшення насиченості збільшує кількість сірого кольору.

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

Ліворуч: неприємно для очей. Яскравий і насичений фон. Максимальна яскравість та насиченість на зображенні зліва. Справа: приємно для очей. Фон темний та менш насичений. Яскравість та насиченість нижче

Пошуки оптимального кольору фону

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

Спочатку виберіть основний відтінок та встановіть на ньому максимальну яскравість та насиченість. Значення відтінку зберігається і служить контрольною точкою регулювання яскравості і насиченості.

Продублюйте основний відтінок кольору (зразок), щоб створити чотири нових зразки кольору зі зниженим рівнем насиченості та яскравості.

Зменшіть рівень яскравості у двох створених зразків кольору. І зменшіть насиченість двох інших зразків. При регулюванні кольору використовуйте крок, кратний десяти.

Помістіть насичені зразки кольору ліворуч від початкового відтінку з яскравістю та насиченістю 100%. Праворуч розмістіть зразки кольору з мінімальною та максимальною яскравістю.

Тепер створіть другий ряд зразків кольору. Зменшіть яскравість та насиченість щодо першого ряду кольорів. При зменшенні значень використовуйте те саме значення для кожного набору зразків кольору.

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

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

Тепер у вас є вісім оптимальних кольорів з різними коефіцієнтами яскравості та насиченості.

Приклади хорошого та поганого кольору для використання у фоні сайту

Нижче наведено приклади сторінок, які приємні та неприємні для очей. Зверніть увагу, як довго ви можете дивитися на кожну сторінку в прикладах.

Зліва – поганий зелений (Panic або Prismic). Праворуч - гарний зелений (

Специфіка корекції контурної різкості повнокольорового зображення

1. Кольоровий тонта насиченість

2. Контурна різкість

3. Авто корекція

Колірний фон та насиченість

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

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

Така комп'ютерна модель кольору по своїй основі схожа на HSB (HSV). Але її основними параметрами є: тон, світло і насиченість. Якщо уявити колірну модель HSL як фігури, це буде подвійний (відбитий) шестигранний конус. Його основою, як і у HSB, служать базові кольори, а вершинами: білий колір, регульований насиченістю, і чорний, що характеризується світлом. Таким чином, колірна модель HSL є одним з найбільш яскравих прикладівінтуїтивних понять тону, насиченості та яскравості.

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

Інтерфейс корекції зображення у колірній моделі HSL на прикладі

Регулювання насиченості на прикладі програми Adobe Photoshop CS6

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

Нормальна колірна насиченість

Вихід за межі колірного охоплення

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

Розташування меню Контурна різкість

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

Інтерфейс контурної різкості

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

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

Колір фону веб-сторінки визначається за допомогою атрибуту bgcolor тега .

Приклад 1. Зміна кольору тла

Колір можна вказувати у шістнадцятковому значенні або на його ім'я.

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

Фоновий малюнок

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

Приклад 2. Додавання фонового малюнка

Якщо зображення менше розміруекрана монітора, воно буде розмножено по горизонталі та вертикалі.

Оскільки фоновий малюнок завантажується повільніше, ніж колір фону, може вийти, що текст не читатиметься деякий час, доки не відбудеться завантаження малюнків. Те саме може статися і при відключених у браузері малюнках. Тому рекомендується завжди задавати колір фону поряд з малюнком фоновим (приклад 3).

Приклад 3. Використання фонового малюнка та кольору фону

Фіксований фон

За замовчуванням, якщо використовується смуга прокручування, фоновий малюнок переміщується разом із вмістом веб-сторінки. Internet Explorer дозволяє зробити фон нерухомим за допомогою атрибуту bgproperties = "fixed " тега .

Приклад 4. Завдання фіксованого фону

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