Кольори в CSS

9 червня 2022 р.182

Я знаю, що ви думаєте. Ціла глава про колір? Повірте мені, одного розділу важко. Колір — це цілий вимір і до того ж неймовірно потужний.

Всі кольори RGB

Колір — це колір, але не колір...

...для комп'ютерів

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

Коліри відображаються по-різному в різних браузерах.
Скріншоти не завжди захоплюють аналогічні кольори.
Браузери містять усі види помилок, пов'язаних з передачею кольору.

...і не для людського ока

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

Тип пристрою (ноутбук, настільний комп'ютер, мобільний телефон).
Відстань та кут перегляду.
Якість дисплея (кількість відображених кольорів, точність відтворення, підтримуваний кут огляду, максимальний контраст та ін.).
Умови освітлення (всередині або зовні, день або ніч, біля вікна чи ні, тощо. nbsp;д.).
Зір глядача (коригуючі лінзи , зорові порушення, дальтонізм).

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

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

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

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

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

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

Брендинг

Кольори настільки впливові, що єдиний колір може підказати бренд.

Чи можете ви вгадати бренд кожного пропонованого кольору? Наведіть вказівник, щоб побачити відповідь.

Facebook

Twitter

Coca-Cola

HubSpot

Стан

Bootstrap популяризував використання класів станів, пов'язаних з певним кольором.

Багато різних програм використовують це або схоже відображення:

#428bca=primary
#dff0d8=success
#d9edf7=info
#fcf8e3</sp an>=warning
#f2dede=danger

Єдино використовуючи #dff0d8 для повідомлення про успіх або #f2dede для вказівки небезпеки, ви закріплюєте шаблон, спрощуючи людям розуміння цієї ідеї в майбутньому.

Рух, увага

Інколи вам потрібно захопити увагу користувачів. Плавна зміна кольору фону або кольору тексту (або просто різка їх зміна) може виявитися чудовим шляхом для цього.

Просто ні про що

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

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

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

Codrops: Build a Color Scheme: The Fundamentals — чудовий огляд різних типів поєднань кольорів (монохромні, доповнюючі, трійки, четвірки, подібні);
Color Scheme Designer — чудовий інструмент для створення колірних схем з їх поєднаннями;
Adobe Kuler: Color Wheel — ще один інструмент для вибору колірної схеми.

Який колір ти маєш на увазі?

Я бачу одну типову помилку з кольором, яку роблять фронтенд-розробники при використанні сірого кольору (наприклад #ccc ), тоді як вони мають на увазі чорний з альфа-каналом (наприклад, rgba(0,0,0,0.2)).

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

Приклад

Кожен з білих блоків нижче містить box-shadow: 0 .125em .5em [колір] і до нього застосовується колір відповідної колонки.

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

Вибір хорошого кольору тексту за промовчанням

Браузер встановлює колір тексту за замовчуванням як #000. Я думаю, що більшість людей сприймає це інтуїтивно. Підсвідомо в думках вони міркують приблизно так: чорнило чорне; документи друкуються чорнилом; Інтернет є набором цифрових документів; Отже, цифровий текст має бути чорним. Це абсолютно розумно і на більшості хороших сайтів колір тексту чорний. Але як альтернатива в багатьох ситуаціях краще використовувати сірий (наприклад #333). І у цього є ряд переваг.

Різкий контраст чорного на білому може створити візуальні артефакти або збільшити навантаження на очі (зворотне теж вірно — це досить суб'єктивно, але все ж таки варто відзначити).
li>
Ви хочете «зберегти» #000 для акцентів або виділень. Це, мабуть, більш вагома причина.</li> </ul> Ви можете подумати: але ж щойно показали приклад, де запропонували використовувати чорний з альфа-каналом замість сірого в ситуаціях, коли колір фону може змінитися. так чому б замість цього не встановити колір тексту за умовчанням як <code class="color">rgba(0,0,0,0.8) ?
Ви будете праві і це, безумовно, варіант. Основною перевагою є те, що не виникне конфлікту з текстом на тлі відмінному від білого (як у прикладі із зеленим тлом вище). Але я б не рекомендував це повсюдно з двох причин:
1. Коли встановлюється color зі значенням альфа від 0 до 1 браузер WebKit не дотримується значення за замовчуванням -webkit-font-smoothing: subpixel-antialiased і ви не отримаєте субпіксельного згладжування тексту (буде так, наче ви встановили -webkit-font-smoothing: antialiased).
 Який алгоритм згладжування «краще» залежить від ситуації і це досить суб'єктивно. Але виразно помітно, що субпіксельне згладжування є зв'язкою великих проблем, оскільки: 1) WebKit на Маках з ретиною не застосовує субпіксельне згладжування (тому ймовірно, і майбутні дисплеї високої роздільної здатності не будуть) і 2) популярна блог-платформа Medium.com (відома своєю гарною друкаркою) застосовує webkit-font-smoothing: antialiased до всіх документів.
2. Продуктивність може трохи знизитися. Пам'ятайте, що ви питаєте з браузера складовий текст і все, що за ним. Це може бути оптимізовано в WebKit, але не думаю, що десь ще. Виберіть хороший набір кольорів та дотримуйтесь його! Насправді.Якщо виглядає дивно, нічого страшного.
 
 Кілька сайтів зі сміливою роботою з кольором
 Подальше читання
 колір
 
 Автор та редактори
 Автор: Адам Шварц
 Останнє змінення: 08.07.2015
 Редактори: Клім Щербаков