Усе про колір. Робота з кольором

Підбір гармонійних кольорів

Додати до моєї бази знань

Колір Компетенція Робота з колоьором

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

Колірний круг

Якщо спектр скрутити у вигляді трубки, то отримана фігура носитиме назву колірний круг (мал. 1). За допомогою колрного круга зручно підбирати кольори і маніпулювати ними. Круг має два основні параметри — відтінок і насиченість. Відтінок вимірюється в градусах, як це не звучить дивно. 0 і 360 градусів відповідає червоному кольору, від нього і йде відлік. Насиченість позначає видиму яскравість, або інтенсивність кольору.

Більш зручніше описати особливості колірного круга за допомогою кола, поділеного на шість рівних сегментів (мал. 2).

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

З колірним кругом, представленим на мал. 2, зв'язані наступні особливості:

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

Колірна модель HSB

Заснована на представленні кольору людиною, модель HSB описує колір трьома основними характеристиками (мал. 1).

Відтінок (Hue). Відтінком називають промені світла, відбиті від об'єкту або прошедшим крізь нього. На колірному крузі виражається в градусах від 0° до 360°.

Насиченість (Saturation). Позначає видиму яскравість, або інтенсивність кольору. Насиченість визначає кількість сірого кольору у відтінку, вимірюється у відсотках від 0% (сірий) до 100% (повна насиченість). На колірному крузі насиченість показана параметром Би (мал. 1), збільшуючись від центру круга до країв.

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

За допомогою Photoshop можна змінювати колір, варіюючи значеннями цих параметрів.

Контрастні кольори

Контрастні кольори знаходяться на протилежних сторонах колірного круга або отстоят один від одного на 180° і утворюють білий колір при їх змішенні.

Необхідний додатковий колір можна побудувати в моделі RGB або HSB. Спочатку розглянемо використання моделі RGB для підбору контрастного кольору.

Використання моделі RGB

1. Вибираємо будь-який потрібний колір, до якого підберемо контрастний, наприклад, помаранчевий #FFCC33 (255, 204, 51 в RGB).

2. Ми знаємо, що контрастні кольори при змішуванні утворюють білий колір. Отже, якщо від кожної компоненты білого кольору (число 255) відняти відповідний компонент вибраного кольору, отримаємо його контрастну пару.

3. В результаті математичних операцій отримуємо наступні параметри: 0 (255-255), 51 (255-204) і 204 (255-51). Після перекладу з десяткової системи в шістнадцятиричну маємо колір (255-255) 33CC.

Використання моделі RGB незручно і наведено лише для прикладу. Простіший спосіб підбору контрастних кольором пов'язаний з моделлю HSB.

Використання моделі HSB

1. Вибираємо будь-який потрібний колір (мал. 3), наприклад, все той же помаранчевий #FFCC33 (45, 80, 100 в HSB).

2. Перший параметр, позначений буквою H, є відтінком кольору або кутом на колірному крузі. Оскільки контрастні кольори розташовані на колірному крузі в 180° один від одного, легко отримати потрібний колір додавши (або віднявши) до значення відтінку число 180 (мал. 4).

3. Вводимо значення 225 в полі відтінку (45+180) і отримуємо новий колір (225, 100, 80 в HSB). Відмітьте, що змінюється лише один параметр, всі інші залишаються колишніми.

Зауваження
Контрастні кольори, хоч і вважаються гармонійними, але дуже «різкі» для сприйняття. Виключенням є пара чорно-білий і жовто-синій кольори. В основному, контрастні пари застосовуються в рекламі для залучення уваги. На сайті з великою кількістю текстової інформації подібні поєднання краще не використовувати.

Нюансові поєднання

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

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

1. Вибираємо будь-який потрібний колір (мал. 5), наприклад, темно-синій (мал. 5) 0080 (240, 100, 50 в HSB).

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

3. Вийде наступне (мал. 6).

Ще один спосіб підбору нюансовых поєднань надають готові кольори Pantone, для їх вибору існує кнопка Custom, показана на мал. 7.

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

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

Висновок

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

У комп'ютерних програмах кольору зручніше будувати за допомогою моделі HSB, в якій колір представлений у вигляді трьох компонент — відтінку, яскравості і насиченості. Модель HSB заснована на колірному крузі, тому значення відтінку відповідає куту на цьому крузі. Узявши за основу первинний колір, останні кольори формуються зміною його значень відтінку, яскравості і насиченості.

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Колір

Головний розділ

Усе про колір. Робота з кольором