Веб-Дизайн для дітей: колір

14

Від автора: ласкаво просимо в урок по темі Веб-Дизайн для дітей. У даній статті мова піде про кольорах. Ми поринемо в теорію, дізнаємося про різних способах застосування кольорів у нашому CSS, значення певних кольорів, а також розглянемо, як же вибрати ідеальну кольорову схему для нашого сайту.

Теорія кольору

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

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

Трохи термінології

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

Відтінки

Відтінок (більше або менше) це колір об’єкта. Коли ми вживаємо слова «червоний» або «жовтий», ми говоримо про їх відтінках.

Насиченість

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

Веб-Дизайн для дітей: колір

Яскравість або освітленість

Яскравість говорить нам про те, наскільки зображення світле або темне. Шкала від чорного (нульова яскравість) до білого (абсолютна яскравість).

Колірне коло

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

Веб-Дизайн для дітей: колір

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

Ліве колесо автомобіля нижче показує вже більше кольорів: кольори третього рівня. Вони отримані змішуванням основних кольорів з вторинними. Наприклад, синій і фіолетовий дадуть нам темно блакитно-фіолетовий.

Веб-Дизайн для дітей: колір

Система Веб-Кольорів

Існує кілька колірних систем (способів опису кольорів), але тільки одна підходить для мережі.

RGB

RGB означає «Червоний Зелений Синій» і описує, як ми бачимо кольори на електронних дисплеях. Ці три кольори можна комбінувати для створення інших. Вище ми перелічили всього три кольори, але кожен з відтінком від 0 до 255.

Веб-Дизайн для дітей: колір

body {
background: rgb(138,138,226);
}

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

Веб-Дизайн для дітей: колір

За цим посиланням можна переглянути набір з 500 певних кольорів у формі RGB і HEX.

HSL

HSL розшифровується як «Відтінок Насиченість Яскравість», значення формується з трьох чисел у відповідному порядку. Ми можемо отримати той же жовто-помаранчевий фон сторінки з допомогою HSL замість HEX і RGB:

body {
background: hsl(43,100%,57%);
}

Перше значення 43 означає кут на колірному колі. Так ми отримуємо відтінок. Червоний колір можна отримати 0 або 360-ти градусах, а зелений на 120 градусів, синій – 240.

Веб-Дизайн для дітей: колір

Друге значення – відсоток насиченості кольору, 100% в нашому випадку це повна насиченість. Останнє значення, яскравість, визначає наскільки світлим чи темним буде відтінок. 100% — білий, 0% — чорний, що між цими значеннями їх комбінацією.

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

Назви кольорів

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

body {
background: green;
}

Повний список цих квітів можна подивитися тут.

Замітка з приводу інструментів конвертації

Якщо нам коли-небудь знадобиться перевести ШІСТНАДЦЯТКОВЕ значення кольору в RGB або HSL (або навпаки!), в мережі є кілька витончених інструментів на цей випадок, наприклад rgb.to і Colorrrs.

Значення кольору

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

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

Жовтий

Веб-Дизайн для дітей: колір

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

Веб-Дизайн для дітей: колір

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

Червоний

Веб-Дизайн для дітей: колір

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

Веб-Дизайн для дітей: колір

У веб-дизайні червоний часто використовується в якості «скасування дії або помилки. Цей насичений колір добре привертає увагу користувача, його можна використовувати, як чудовий акцентний колір. Надмірне використання червоного може призвести до накопичення сайт, буде складно визначити, що дійсно важливо.

Синій

Веб-Дизайн для дітей: колір

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

Веб-Дизайн для дітей: колір

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

Вибір колірної палітри

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

Веб-Дизайн для дітей: колір

На зображенні вище представлений інший погляд на колірну палітру на нашому сайті уроків Tuts+Town:

Веб-Дизайн для дітей: колір

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

Поєднання і Контраст кольорів

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

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

Веб-Дизайн для дітей: колір

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

Інструменти з вибору колірної палітри

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

Coolors

Coolors.co один з найбільш легких інструментів по вибору палітри з доступних в мережі на сьогодні.

Веб-Дизайн для дітей: колір

Сервіс надає нам набір відмінних колірних палітр, які можна редагувати клавішею пробілу.

Adobe Color

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

Веб-Дизайн для дітей: колір

Adobe Color дозволяє так само зберегти улюблені панелі і переглядати популярні, раніше вибрані.

Загальні поради

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

Контраст

Контраст настільки важливий, що якщо ви сумніваєтеся, краще піти з безпечного шляху; навіть якщо це трохи «нудно»! До обов’язків дизайнера належить переконатися в тому, що це функціонально, просто у використанні і читабельно. Поганий контраст відразу ж відштовхне користувача від прочитання нашого приголомшливого контенту.

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

Кількість кольорів

Сервіси з підбору палітри кольорів, як Coolors, пропонують нам 5 кольорів. 5 кольорів дозволяють використовувати 2 домінуючих кольору і трохи менше для кнопок і посилань.

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

Загальні шаблони

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

Завершуємо

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