Палітра кольорів з кодами як основа дизайну. Що таке «безпечні» або Web Safe кольори для вебдизайну?

• CRO/UX

• 
  Редакторка блогу Webpromo
  Олена Гайдак

У кодуванні забарвлення, як і будь-яка інша частина алгоритму, передається спеціальним набором символів. Лише 216 уніфікованих відтінків коректно зображуються навіть на старих моніторах — це і є палітра безпечних кольорів. Саме тому вебдизайнери намагаються обмежуватися стандартним набором для уникнення небажаного кольоровідтворювання. Далі детальніше розкажемо про коди кольорів для створення сайту, як їх застосовувати та де знайти правильні назви.

Що таке кольори html?

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

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

1. HEX коди кольорів — 6-значне число, яке починається з символу «#». Число складається із трьох пар шістнадцяткових цифр. Кожна пара відповідає за насиченість одного з трьох кольорів — червоного, синього та зеленого.
2. RGB номери кольорів — абревіатура від назви трьох барв «Red-Green-Blue».

Які ще бувають коди кольору?

Кодування потрібних відтінків також використовують різні програми, наприклад Figma, Adobe Photoshop, програми для друку. Окрім наведеного вище html кольору, використовують й інші уніфіковані позначення:

• Англійські слова для прямого позначення потрібного відтінку (red, purple, blue, brown). Але так передати всю палітру неможливо.
• Модель HSV, яка базується на насиченості, тоні й значенні.
• Колірні координати CMYK — Cyan, Magenta, Yellow.

Палітра кольорів з кодами: де знайти та як застосовувати?

Кольорові відтінки необхідно класифікувати для передачі повної інформації про них. До того ж вони не однаково виглядають на різних ґаджетах, програмах і особливо — при перенесенні на різноманітні матеріали. 

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

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

Web safe кольори для вебдизайну

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

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

Вперше такий підхід застосували в браузері Netscape, який пізніше став основою для Mozilla Firefox. Палітра безпечних кольорів має однорідну структуру 6х6х6, в якій три кольорові складові Red-Green-Blue передаються за допомогою кодування 00, 33, 66, 99, CC, FF. 

Окремі інструменти, наприклад, Adobe Photoshop, і сьогодні пропонують дизайнерам лише web safe кольори, хоча з розвитком технологій обмеженість 216 тонами стала поступово зникати. Такий підхід зараз вже вважається дещо застарілим. 

Таблиця безпечних кольорів: коли й навіщо використовувати

Хоча сьогодні такий поділ здається неактуальним, звернути увагу на обрані 216 кольорів варто, якщо:

1. Ваш текст чи фон на сайті має забарвлення.
2. Ви створюєте картинки й дизайни, які доступні широкій аудиторії.
3. Вам потрібна кросбраузерна сумісність кольорів — коректне зображення у будь-якому браузері незалежно від оновлень.
4. Ваш сайт або дизайн мають елементи, сенсорне навантаження яких може змінитися внаслідок неправильної колірної передачі. 

Як обрати потрібні у безпечній палітрі кольорів?

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

Підпишись на гарячі

Маркетинг-новини

МАРКЕТОЛОГ 2.0 >

Підпишись на щомісячний

Дайджест новин

Червоний

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

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

Зелений

Символізує здоров’я, безпеку, природу, екологію, гармонію. Часто зустрічається в оформленні банків, для акцентування на екологічності, у сфері охорони здоров’я. 

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

Синій

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

Жовтий 

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

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

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

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