Палітри кольорів Інтернету

Що таке веб-палітри кольорів?

Кольори дуже важливі для веб-дизайнерів і графічних дизайнерів. Дизайнери описують кольори, які ми описуємо як синій, червоний та зелений у повсякденному житті за допомогою таких кодів, як #fff002, #426215. Незалежно від того, який тип проекту кодування ви виконуєте, ви, ймовірно, почнете працювати з кольорами в якийсь момент. Це буде особливо корисно, якщо ви навчитеся кодувати за допомогою HTML, як багато людей роблять для розробки веб-сторінок.

Що означає шістнадцятковий код у кольорах?

Шістнадцятковий код – це спосіб представлення кольору у форматі RGB шляхом поєднання трьох значень. Ці кольорові коди є невід’ємною частиною HTML для веб-дизайну та залишаються важливим способом представлення кольорових форматів у цифровому вигляді.

Шістнадцяткові кольорові коди починаються зі знака фунта або хештегу (#), за яким слідують шість літер або цифр. Перші дві літери/цифри відповідають червоному, дві наступні – зеленому, а дві останні – синьому. Значення кольору визначаються у значеннях між 00 і FF.

Числа використовуються, коли значення 1-9. Літери використовуються, коли значення більше 9. наприклад:

• А = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Шістнадцяткові коди кольорів та еквіваленти RGB

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

• Червоний = #FF0000 = RGB (255, 0, 0)
• Зелений = #008000 = RGB (1, 128, 0)v
• Синій = #0000FF = RGB (0, 0, 255)
• Білий = #FFFFFF = RGB (255 255 255)
• Слонової кістки = #FFFFF0 = RGB (255, 255, 240)
• Чорний = #000000 = RGB (0, 0, 0)
• Сірий = #808080 = RGB (128, 128, 128)
• Срібло = #C0C0C0 = RGB (192, 192, 192)
• Жовтий = #FFFF00 = RGB (255, 255, 0)
• Фіолетовий = #800080 = RGB (128, 0, 128)
• Помаранчевий = #FFA500 = RGB (255, 165, 0)
• Бордовий = #800000 = RGB (128, 0, 0)
• Фуксія = #FF00FF = RGB (255, 0, 255)
• Лайм = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Блакитний = #008080 = RGB (0, 128, 128)
• Оливкова = #808000 = RGB (128, 128, 0)
• Темно-синій = #000080 = RGB (0, 0, 128)

Чому кольори веб-сайту важливі?

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

Наприклад, Beamax, компанія, що виробляє проекційні екрани, помітила значне збільшення кліків на червоні посилання на 53,1% порівняно з синіми.

Кольори мають величезний вплив не тільки на кліки, але й на впізнаваність бренду. Дослідження, присвячене розумовому впливу кольорів, показало, що кольори підвищують впізнаваність бренду в середньому на 80%. Наприклад, коли ви думаєте про Coca-Cola, ви, напевно, уявляєте яскраві червоні банки.

Як вибрати колірну схему для веб-сайтів?

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

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

Тепер «Як вибрати колірну схему для веб-сайтів та веб-додатків?» Давайте розглянемо це крок за кроком:

1. Виберіть основні кольори.

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

Нижче ми навели кілька прикладів для вас:

• Червоний: означає хвилювання або щастя.
• Помаранчевий: позначає дружній, веселий час.
• Жовтий колір означає оптимізм і щастя.
• Зелений: означає свіжість і природу.
• Синій: означає надійність і впевненість.
• Фіолетовий: представляє відомий бренд з історією якості.
• Браун: Це означає надійний продукт, яким може користуватися кожен.
• Чорний означає розкіш або елегантність.
• Білий: відноситься до стильних, зручних продуктів.

2. Виберіть додаткові кольори.

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

3. Виберіть колір фону.

Виберіть колір фону, який буде менш «агресивним», ніж ваш основний колір.

4. Виберіть колір шрифту.

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

Найкращі палітри кольорів для веб-дизайнерів

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

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

1. Палеттон

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

2. Безпечний колір

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

Використовуючи веб-програму Color Safe, ви гарантуєте, що ваш сайт відповідає інструкціям WCAG і є повністю доступним для всіх.

3. Adobe Color CC

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

4. Атмосфера

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

5. 0-255

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

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

Найкращі палітри кольорів для Інтернету

На наступних сайтах використовуються різноманітні веб-палітри кольорів. Їх ретельно відбирають за емоціями, які вони викликають, і емоціями, які вони передають.

1. Одопод

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

2. Око Торі

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

3. Сирний набір для виживання

Червоний є надзвичайно популярним кольором для палітри кольорів веб-сайту. Він може передати багатий поєднання емоцій, роблячи його універсальним. Як ви можете побачити на веб-сайті Cheese Survival Kit, він особливо ефективний при використанні в малих дозах. Червоний пом’якшується більш нейтральними кольорами, а синій допомагає із CTA та іншими областями, де компанія хоче привернути увагу відвідувача.

4. Ahrefs

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

Найчастіші запитання про кольори

1. Який колір найкращий для веб-сайту?

Синій, безумовно, найбезпечніший вибір, оскільки він є найпопулярнішим кольором з 35%. Однак, якщо всі ваші конкуренти використовують синій колір, можливо, має сенс «відрізнити» вашу пропозицію та бренд. Але ви повинні переконатися, що ви не перевантажите відвідувачів.

2. Скільки кольорів має мати веб-сайт?

Врахуйте, що 51% брендів мають монохромні логотипи, 39% використовують два кольори, і лише 19% компаній віддають перевагу повнокольоровим логотипам. Звідси ви можете побачити, що веб-сайти з 1, 2 та 3 кольорами мають більше сенсу, ніж намагатися створити веб-сайт із кольорами веселки. Однак такі бренди, як Microsoft і Google, вірять у перевагу роботи з більшою кількістю кольорів, оскільки вони використовують принаймні 4 однотонні кольори у своїх дизайнах.

3. Де використовувати кольори?

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