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

Telegraf. Design у партнерстві з LG UltraWide TM підготував найцікавішу із найкорисніших добірок ресурсів, які допоможуть прокачати себе у кольорі.

Чим відрізняються ці всі кадри? Сюжетом, настроєм, рівнем напруги… кольором. Колір — один із основних інструментів, який створює настрій або підсилює сюжет. І це стосується не лише кіно, а дизайну загалом. Кожен із цих кадрів має свій набір залучених у роботу кольорів — палітру. І ми використали їх, аби показати 4 класичних поєднання— основні колірні гами, які є базою для майже будь-якої палітри.

Кадр із фільму Blade Runner 2049 ілюструє монохромну гаму. Усе відбувається в межах одного кольору — змінюються лише параметри яскравості, насиченості та відтінку. Така гама дозволяє передати спокій, урівноваженість, очікування, меланхолію.

Кадр із фільму Blade Runner 2049 (Дені Вільньов, 2017)

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

Кадр із фільму “The Truman Show” (1998), Color Studies ( Sara Cwynar) та Марк Ротко у монохромній гамі

Кадр із фільму Grand Hotel Budapest — приклад аналогової чи спорідненої гами. Використовуються відтінки «сусідніх кольорів» у веселці, які перетікають один в одного.

Кадр із фільму Grand Hotel Budapest (Вес Андерсон, 2014)

Як правило, це два кольори (зелений+жовтий, синій + зелений, червоний+фіолетовий). Хоча може бути й більше (блакитний+зелений+жовтий) — залежить від автора.

Ця гама найчастіше зустрічається у природі (зелений+блакитний). Тому вона дуже приємна оку — є відчуття натуральності та спокою. А якщо вміло поєднати жовтий та зелений — з’являється ефект вінтажності.

Аналогова гама у фільмі Hobbit (Пітер Джексон, 2012), пейзажі Вінсента ван Гога, вебсайт номінант Awwwards

Кадр із фільму Amelie — класичний приклад контрастної, чи комплементарної гами. Вона «ризикованіша», ніж попередні дві, адже поєднує кольори найбільш контрастні один до одного. Контраст передає чи підкреслює конфлікт та напруженість, додає енергійності та активності.

Кадр із фільму Amelie (Жан-П’єр Жене, 2001)

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

Комплементарна гама “Once upon a Time in Hollywood”(2019), Анрі Матісс та емблема баскетбольного клубу Lakers

І останній кадр — із фільму Joker — це приклад тріадної гами. Найкласичніші поєднання: червоний+жовтий+синій і помаранчевий+зелений+фіолетовий та їх відтінки.

Гама цікава (і складна) тим, що з одного боку кольори частково комплементарні один до одного, але не максимально контрастні між собою. Ця гама також здатна передавати конфліктність, задає пульсацію кольору і ритміку. Хоча з нею потрібно бути обережним та регулювати рівень конфлікту (контрасту) в залежності від цілей роботи.

Обкладинка книги Жуля Верна (Carlo Giovani), рекламний постер Barilla (Maïté Franchi) у тріадній гамі

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

Шведський бренд Vörda (by north TM), ілюстрації для Directory of Illustration (Blu Blu Studios), кампанія Create Don’t Hate від Instagram

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

Колір грає на емоціях. Потрібен екшн — додайте контрасту, потрібна спокійніша атмосфера — підфарбуйте всю стрічку ближче до монохромної чи аналогової гами. Наприклад, найпопулярніший кольорокоректор у фільмах — так званий Teal-Orange (зеленувато-блакитний + помаранчевий). Помаранчеві відтінки (від насиченого до кремового, залежить від настрою фільму) додаються у яскраві і світлі ділянки картинки, а зеленувато-блакитні — в тіні. Синьо-зелено-блакитний та «навколо помаранчеві» відтінки знаходяться на протилежних боках колірного кола, і саме через це виглядають найбільш контрастно.

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

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

Спектр 007. База теорії кольору

Ісаак Ньютон забетонував основу всієї теорії кольору, коли йому вдалось за допомогою призми розщепити світло на колірний спектр. Цей спектр потім «удосконалювали» в своїх теоріях Йоганн Гете, Філіп Отто Рунге, Мішель Шеврель, Йоганес Іттен (якщо ви маєте намір ґрунтовно розібратись у кольорі, запам’ятайте ці прізвища).

1.Спектр Ньютона (показує пропорції кожного з кольорів у світовому промені). 2. Колірне коло Гете (із пурпуровим кольором, якого Ньютон у спектрі не побачив). 3. Куля Рунге, враховує яскравість та насиченість кольорів.  4. Коло хіміка Мішеля Шевреля, створене для промислових потреб. 5. Колірне коло Іттена, засновника Баухауза та автора найпопулярнішої книги з теорії кольору.

Спектр є основою колірного кола і багато що пояснює. Кольори, які знаходяться один навпроти одного у колі — комплементарні (згадуємо гами). Вони мають найбільший контраст по відношенню один до одного, і вважається, що найбільше один одному пасують. Якщо їх змішати в ідеально рівних пропорціях — утворюється ідеальний сірий колір. Кольори, які знаходяться поруч у колі — аналогові. Рівновіддалені один від одного кольори (світло-помаранчевий, блакитний, пурпуровий) — основа для тріадної гами. Теплі кольори (у класичному розумінні) з правого боку кола, холодні — з лівого.

Ресурси, які допоможуть глибше розібратись у кольорі.

Статті:

• На Medium є канал Design Spot, де опубліковані короткі (відносно) статті, які дають досить систематизоване уявлення про теорію кольору: про базові поняття у кольористиці, про колірне коло, про класичну гармонійну взаємодію кольорів.
• Material Design — гайди й інструменти, що допомагають грамотно використовувати колір в інтерфейсах.
• Гайд по «людяному UI» від Apple.
• Серія матеріалів Guardian про історію кольорів.

«Колір у первинній своїй суті, коли існує один, не несе жодних значень. Але передає почуття та цінності залежно від місця, культури та часу. І водночас завжди викликає суб’єктивні емоції у кожної окремої людини».

Книги:

• «Мистецтво кольору», Йоганнес Іттен. Усі вище зазначені статті у більшості своїй посилаються на цю працю. Іттен — засновник школи Баухауз, об’єднав майже всі елементи прикладної теорії кольору, створив теорію 7 контрастів. У книзі розповідає про два різні підходи до розуміння кольору, описує як об’єктивні принципи, так і суб’єктивні розуміння кольору. У відкритому доступі є спрощена версія книги Іттена під назвою «Елементи кольору» (англійською).
• «Взаємодія кольору», Джозеф Альбертс. «Колір — найбільш відносний візуальний засіб у мистецтві», — говорив Джозеф Альбертс, який навчався, а після і викладав, у Баухаузі (до того, як у Німеччині запанував Гітлер). Уся книга обертається навколо цієї думки. Пояснюється, звідки береться «теплий синій» і «холодний жовтий».
• «Сприйняття кольору», Стівен Девіс. Книга об’єднує погляди психологів, філософів, комп’ютерних вчених та художників задля дослідження природи сприйняття кольору людиною. По суті це підручник, мета якого поглибити розуміння кольору через міждисциплінарну взаємодію. Доступна на Amazon.
• «Таємне життя кольору», Кассія Сен-Клер. Книга розповідає незвичайні історії про 75 різнобарвних відтінків — про руде волосся, синій період Пікассо, вплив коричневого на військову справу, як білий захищав від чуми. Розуміння кольорів у розрізі розвитку цивілізації людства.
• «Мистецтво та візуальне сприйняття», Рудольф Арнгейм. Автор фанат зв’язку мистецтва з психологією. А ця книга — класика, що розглядає цю тему.
• Серія книг «Історія кольору» та «Кольори наших споминів», Мішель Пастуро. Це історія людства, що обертається навколо кольорів. Описується, як різні народи у різні епохи сприймали кольори та їх значення. Книги «Чорний»,«Синій»,«Зелений»,«Червоний» можна знайти на Yakaboo.
• Color Mania. Створена групою дизайнерів, книга дає глибоке розуміння 9 основних кольорів (кожному присвячений окремий розділ). Містить багато яскравих прикладів — графічний дизайн, роботи ілюстраторів, пакування, брендинг, дизайн інтер’єру та інше. Є на Amazon.
• «Pantone: ХХ століття у кольорі». Книгу створили науковці з Інституту Pantone. Зібрано понад 200 витворів мистецтва, виробів, продуктів, що були створені у ХХ столітті, проаналізовані модні тенденції та зіставлені з 80 різними офіційними палітрами Pantone. Книга також доступна на Amazon.
• Щоденник Фріди Кало. Останні 10 років художниця вела щоденник, в якому писала різними кольорами. Кожен колір передавав окрему емоцію. Щоденник продають на Amazon.

«[Коричневий] — колір молі, листя стає землею

[Жовтий] божевілля хвороба страх частина сонця і щастя

[Синій ] електрика та чистота любові

[Чорний] ніщо не є чорним — взагалі ніщо

[Оливкова] листя, смуток, наука, вся Німеччина — цей колір

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

Відеоматеріали: курси, програми та ролики

• Курс від Pixar на Khan Academy. Один із найвідоміших у світі виробників анімації створив курс, який підвищить розуміння кольору, аби більш вдало використовувати його для передачі емоцій та почуттів. Разом із тим тут можна детально розібратись, як колір визначається частково фізикою світла, а частково тим, як працює мозок. Пояснюється все максимально просто.

• Урок «Що таке колір» на TED. Короткий і дуже зрозумілий, дотепно анімований.
• Лекція «Кольорознавство» у Projector Євгена Демченка, head of digital design на «1+1». Євген говорить про основи теорії кольору, фізику та біологію сприйняття кольору, а також про контраст, первинні та похідні кольори і т.д. Доступ до лекції платний — 150 грн. Також її можна подивитись, оформивши підписку на онлайн-бібліотеку школи.
• Color Harmony. How Color Vision Works. Чорно-біле короткометражне кіно про те, як людське око сприймає колір. Нехай і парадоксально, але це відео дуже зрозуміло пояснює, як ми бачимо кольори і чому. А ще це можливість подивитись, як знімали у старому «справжньому» Голлівуді.

• «Мозок із Девідом Ігелманом». Перша частина фільму BBC розповідає про те, як наш мозок сприймає кольори.
• Серія програм BBC: History of Art in Three Colours: Золотий (Gold), Синій (Blue), Білий (White) і Modern Masters (2010): 4 епізоди про Енді Ворхола, Пікассо, Матісса та Далі.

На кого дивитись аби надихатись кольором. Вибір редакції.

Вес Андерсон ( Wes Anderson). Режисер, у якого можна повчитися не лише колірним гамам та палітрам, а й полюбуватися «пунктиком» ідеальної композиції в кадрі. Готель “Grand Hotel Budapest” та “Moonrise Kingdom” — його роботи.

Анрі Матісс (Henri Matiss). Ходять чутки, що якщо розібратись у картинах французького художника, можна опанувати колір повністю і назавжди.

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

Є книга «Загублене інтерв’ю Матісса» (можна придбати у друкованому вигляді англійською). Художник дав інтерв’ю під час Другої світової війни, де широко розповідає про своє бачення кольору у творчості. А тут редактор книги обговорює інтерв’ю з швейцарським критиком:

Олафур Еліассон (Olafur Eliasson). Другий епізод серіалу The Design of Art (Netflix), присвячений цьому дизайнеру.

Olafur Eliasson

Ден Флавін (Dan Flavin) — американський митець-мінімаліст, який робив кольорові інсталяції із флуоресцентних ламп.

Дизайн Memphis — група дизайнерів з 1980-х, які творили в одному стилі — хаотичне поєднання яскравих кольорів та форм. Зараз «мемфісом» називають будь-чиї роботи, виконані у цьому стилі.

Річард Інгланд (Richard England) — архітектор родом із Мальти, який «будує кольором».

Гай Бурдін (Guy Bourdin) — французький фотограф із пристрастю до кольору та епатажу. Його роботи викладають в Instagram.

 

Посмотреть эту публикацию в Instagram

 

#guybourdin — © The Guy Bourdin Estate 2019 Courtesy of @louisealexandergallery

Публикация от Guy Bourdin (@guybourdinofficial) 27 Дек 2019 в 8:24 PST

Марія Примаченко — соковиті кольори української художниці-примітивістки не можуть не надихати.

Angelica Dass та проєкт про колір шкіри. Фотограф почала збирати портрети різних людей, аби протидіяти расизму і стерти саме поняття раси. На сьогодні в проєкт уже було залучено більше 4000 портретів, зроблених у 28 містах з 18 країн світу.

Інклюзивний колір.

У всіх людей різна «роздільна здатність» сприйняття кольорів. Але є відхилення, які викликають особливу увагу (а у випадку зі синестезією ще й інтерес).

Дальтонізм vs дизайн. Якщо людина дальтонік, це не означає, що вона замість зеленого бачить синій та плутає кольори на світлофорі (хоча причина того, що червоний завжди вгорі, а зелений внизу — саме різні можливості кольоровідчуття). Найчастіше дальтонізм — це просто гірша здатність відрізняти відтінки. Люди бачать усе навколо, як на фото зі зниженою контрастністю. І це буває частіше, ніж здається (на планеті близько 330 млн людей із різними формами дальтонізму). Тому існують спеціальні інструменти, які допомагають дизайнерам враховувати особливості зору різних користувачів.

• Плагіни для Figma. Color Blind — дозволяє передивлятись дизайни у 8 різних типах колірного зору. Color Contrast Checker перевіряє коефіцієнт контрастності кольору всього видимого тексту в кадрі.
• Поради від Adobe, як зробити кращий дизайн для людей із дальтонізмом.
• Stark — симулятор, який дозволяє зрозуміти, як людина із дальтонізмом буде бачити той чи інший колір.
• Contrast Checker — інструмент для перевірки контрасту між двома кольорами. Аби перевірити, чи достатньо читабельним та зручним для будь-якого ока є текст, розміщений на кольоровому фоні.
• Онлайн-курс Projector зі створення інклюзивного дизайну вебсторінок (безкоштовний, старт 10 березня).
  Головне правило — дотримуватись стандартів контрастності між текстом та фоном (про це у темі #3).
• Виступ художника, який бачить усе в сірих тонах, на TED. Він «навчився чути» кольори.

А є люди, які можуть «чути» колір або «бачити» колір музики без усіляких пристроїв. У них синестезія — рідкісний неврологічний стан, через який стимуляції реакції одного органу чуттів викликає переживання в іншому. Це щось типу короткого замикання в мозку, коли ти у відповідь на звук бачиш його колір, або колір викликає у мозку звук. Існує понад 60 типів синестезії, один із найпоширеніших — саме аудіовізуальний. Нижче дуже яскравий мультиплікаційний документальний фільм про синестезію.

Окрім особливостей зору, здатність бачити відтінки дуже залежить від монітора, яким користується дизайнер, — і від його характеристик кольоропередачі, і від власне налаштувань. Нові монітори LG UltraWide враховують усі можливі побажання дизайнерів щодо яскравості, контрастності та здатності передавати відтінки кольорів під будь-яким кутом огляду. Ще монітор пропонує на 33% більше робочого простору (порівняно з 16:9 Full HD моніторами). Завдяки цьому можна працювати в Photoshop та одночасно відтворювати прев’ю зображень — усе на одному екрані.

Монітор LG UltraWide

Інструменти, що допоможуть працювати з кольором

Не варто ними нехтувати чи дивитися зверхньо. Часто онлайн-інструменти допомагають скерувати думки у правильному напрямку, чи можуть підказати колір — той самий контраст чи відтінок, який покращить весь дизайн. Водночас, не варто покладатись лише на генератори палітр. Це допоміжний інструмент.

Adobe Color Колірне коло для створення палітр — класичний інструмент. Обираєш точку на кольоровому колі, а далі обираєш тип палітри, який хочеться і вуаля.

Picular — Google для кольорів. Вводиш у пошук будь-який колір, навіть «колір пустелі в Дубаї» чи «колір малинового суфле» і сайт видає різні відтінки кольору.

Coolors. Швидкий генератор колірних поєднань. Програма встановлюється на комп’ютер для більш індивідуальних рішень. А на сайті уже є добірка найпопулярніших палітр.

У проєкту є інстаграм. Можна підписатись і щодня отримувати нові колірні комбінації.

Color Leap — знайти палітру, яка передавала б дух 60-х? Не питання. Тут зібрані 180 найпопулярніших колірних палітр, які використовувались протягом останніх 4000 років. Обираєш епоху, яка цікавить, і бачиш набір палітр, що її найкраще характеризують.

Site Palette — розширення для браузера, яке дозволяє генерувати комплексні палітри з сайтів, які ти переглядаєш. Корисний інструмент для дизайнерів та розробників інтерфейсів із вільним експортом колірної гами.

BrandColors — найбільша колекція офіційних колірних кодів понад 500 брендів.

Pigment — унікальність ресурсу в тому, що він допомагає генерувати свіжі та яскраві кольори, ґрунтуючись на освітленні, оточенні та насиченості пігмента.

HTML Color Codes — за допомогою колірної діаграми легко знаходити HTML-коди кольорів значення HEX, RGB та HSL для вебсайтів.

Найпростіший інструмент «піпетка» у Photoshop. Знайшов цікавий колір чи комбінацію — тицьни й збережи. Цей інструмент для тих, хто завжди включений знайти натхнення.