Теорія кольору як підібрати гармонійну комбінацію кольорів для web-сайту

Learning to Use Color on Your Web Site

У житті ми часто зустрічаємо людей, які запросто роблять речі, незбагненні для інших. Наприклад, хтось може оволодіти грою на музичному інструменті за кілька днів, а іншому доводиться на це витрачати ціле життя. Ми ледь справляємося з правилами рідної мови, а хтось може вільно говорити на декількох іноземних. Хтось доторкнувшись до електрощита, здатний ударити струмом всіх оточуючих, а хтось вирішує проблему однією лівою. Часто зустрічається думка, що почуття кольору - щось вроджене, і цього неможливо навчитися. Але насправді, при наявності відповідних інструментів, а також переживши кілька "ударів електрострумом", навіть дальтонік може навчитися підбирати колірні схеми, які будуть радувати око. Так що для всіх вас, шановні Новомосковсктелі-дальтоніки, а також для всіх тих, хто кинув відвідувати заняття в ізостудії, коли дізнався, що там не буде голих моделей, ми публікуємо статтю про те, як вибирати кольору так само добре, як це робить професіонал, спираючись на базові знання про колір.

По-перше, давайте розберемося в термінології, щоб переконатися, що ви не втратите нитку міркувань в процесі читання статті. Всі ми знаємо, що первинними (primary) кольорами є червоний, жовтий і синій. Для того, щоб отримати вторинні (secondary) кольору, ми змішуємо один колір з іншим. Жовтий і червоний дають нам помаранчевий, червоний і синій - пурпурний / ліловий, а синій і жовтий - зелений. А що таке третинні (tetriary) кольору? Просто береться первинний колір і до нього додається сусідній вторинний. Це означає, що існує шість теоретичних квітів (по два кольори від кожного первинного кольору). Мал. А демонструє всі описані кольору у всій їх красі.

Мал. А. для того, щоб навчитися підбирати чудові колірні схеми,
для початку потрібно знати про три типи квітів.

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

Мал. В. зібравши воєдино первинні, вторинні і третинні кольори, ми отримуємо колірне коло.

Підбір кольорів за допомогою колірного кола

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

Мал. З: на колірному колі існує чотири можливих тріади кольорів

Але тріадами не варто обмежуватися. Можна вибрати і компліментарні (complementary) кольору, тобто ті кольори, які розташовані в колі прямо навпроти один одного - наприклад, червоний і зелений. Вони називаються комплементарними / доповнюють тому, що, будучи поміщеними поруч, вони роблять один одного яскравіше і жвавіше, див. Рис. D.

Мал. D. кольору, протилежні одна одній на колі, називаються комплементарними / доповнюють

На цьому етапі ми вже можемо приступити до більш складним комбінаціям. Наприклад, можна взяти дві пари комплементарних квітів, що називається "подвійний комплемент" (double complement). Скажімо, жовтий і пурпурний / ліловий, синій і помаранчевий. Інший схемою є альтернативний комплемент (alternate complement), коли комбінується тріада квітів з кольором, компліментарних одному з квітів тріади. Зелений, червоно-пурпурний, червоний і помаранчевий - приклад такої комбінації. Також існує "розщеплений комплемент" (split complement), коли береться колір, його комплементарний колір і два прилеглих до нього кольору.

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

Мал. Е. ці схеми вдихнуть життя в будь-який Web-сайт

Отже, ми перебрали всі можливі комбінації контрастують квітів. Тепер звернемося до двох типів схем, де використовуються родинні кольору - монохроматичної (monochromatic) і подібної (analogous). Монохроматичності набір квітів, як свідчить його назва, використовує один колір і всі його відтінки і варіації. При правильному використанні ця схема може надати Web-сайту акуратний, чистий вид. Подібна схема кольорів, з іншого боку використовує кольори, які розташовані по сусідству один з одним на колірному колі. Як можна судити по малюнку F. подібна схема дуже схожа на монохроматичну.

Мал. F. подібна схема дуже нагадує монохроматичну

Отже, все разом

Тепер, коли ми вивалили вам на голову стільки комбінацій кольорів, вважаємо своїм обов'язком дати кілька застережень. Перше і найголовніше: колірні схеми, згадані тут, самі по собі можуть і не спрацювати. Вам як і раніше доведеться дещо змінити в кольорах (насиченість та яскравість), щоб вони "вжилися". Наведені тут схеми - лише відправна точка, а не вершина майстерності. Адже, в кінцевому рахунку, вирішальним фактором буде Новомосковскемость тексту на Web-сайті та його зовнішній вигляд (look and feel). Щоб побачити, як кольори уживаються один з одним, дизайнери радять скористатися будь-якої графічної програмою, де є функція "шари", і порівняти різні варіанти схем, перемикаючись між ними. Наприклад, на рис. G, одні комбінації працюють нормально, в той час як інші вимагають додаткової обробки.

Мал. G. не всяка комбінація годиться в справу

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

Теорії кольору можна присвятити безліч випусків, але ми побоюємося скарг з боку тих, хто її вже знає. Якщо ви хочете навчитися більшому, відвідайте Web-сайт Color Matters (www.colormatters.com) *. Цей сайт охоплює такі теми, як колір і Web, колір і образотворче мистецтво, колір і наука, і навіть колір і їжа (неодмінно почитайте статтю про синіх спагетті!)

* Статті ресурсу Color Matters (www.colormatters.com) доступні на нашому сайті в англійському розділі Articles.