Керівництво для роботи з кольором у веб-розробці. Частина перша. Змішування кольорів, їх значення і властивості


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Розповідає Сара Драснер


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

Змішування кольорів

Дуже важливо зрозуміти, що використати кольори на комп’ютері так само, як у дитинстві, не вийде через змішування кольорів. Коли Ви були дітьми, у вас була фарба. Фарба і чорнило принтера складаються з пігментів – маленьких часток, які змішуються і утворюють видимий колір. Це субтрактивна схема формування кольору. Чим більше кольору Ви додасте, тим темніше буде колір. Базові кольори – блакитний, пурпурний і жовтий, але за їх змішування відповідно до субтрактивної схеми Ви отримаєте чорний.

На комп’ютері (чи будь-якому моніторі) Ви працюєте зі світлом, тобто при змішуванні всіх кольорів Ви отримаєте білий. До того, як Ісаак Ньютон провів свій знаменитий експеримент з призмою, люди вважали, що колір знаходиться всередині об’єктів, а не поглинається ними і відбивається від них. Ньютон же використав призму і довів, що яскраве світло – це лише суміш декількох кольорів, отримавши веселку. Проте окремі барви веселки вже не розділилися, і це показало, що призма не містила кольору. Така схема називається адитивною.

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

У моніторів є декілька режимів відображення, які визначають те, як ми сприймаємо зображення. Зазвичай це називають глибиною кольору. Саме глибина кольору визначає кількість відображуваних кольорів. Якщо глибина дорівнює 1 біту, нам доступні лише два кольори – чорний і білий. Глибина, яка дорівнює двом бітам, дає 4 кольори, і так далі до 32, хоча звичайні монітори підтримують глибину кольору до 24, що дає нам 16 777 216 кольорів (True Color і альфа-канал).

True Color (істинний колір) називається так, тому що людське око здатне розрізняти близько 10 млн кольорів, і 24-бітової глибини для цього достатньо. Червоний, зелений і синій кольори займають по 8 бітів, а ті, що залишилися використовуються для прозорості (альфа-канал).

Давайте скористаємося цією інформацією і розглянемо доступні нам властивості кольору.

Колірні значення

RGB-значення

Наприкінці попереднього розділу між рядків було сказано, що означає rbga (x, x, x, y);, проте, варто розібратися в цьому докладніше. Якщо ми працюємо з RGB-моделлю, то розділяємо колір на три канали зі значеннями від 0 до 255.

x is a number from 0-255y is a number from 0.0 to 1.0rgb (x, x, x); or rgba (x, x, x, y);
Example: rbga (150, 150, 150, 0.5);

Hex-значення

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

Як Ви знаєте, байт – це 8 бітів, тобто кожен шістнадцятковий колір задається 1 байтом. Кожен байт задається числом від 00 до FF у шістнадцятковій системі числення, або числом від 0 до 255 в десятковій. Таким чином, чорний колір задається числом #000000, а білий – #FFFFFF.

Якщо розряди попарно повторюються, то їх можна скоротити, наприклад, (-000-0-)FFFF стане #0ff. Така система запису дуже зручна для розуміння і запису, а також для використання в програмуванні. Якщо ж Ви працюватимете з кольором на глибшому рівні, варто розглянути систему HSL.

HSL-значення

HSL працює майже так само, як і RGB, але замість кольорів вона задає тон, насиченість і світлість.

3D-модель HSL

Тон обертається на 360°, а насиченість і світлість набувають значення від 0 до 1.

x is a number from 0 - 360y is a percentage from 0% to 100%z is a number from 0.0 to 1.0hsl (x, y, y); or hsla (x, y, y, z);Example: hsla (150, 50%, 50%, 0.5);

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

HSL також буде розглянута в наступній статті.

Іменовані кольори

Розробникам також доступні іменовані кольори. Проте з ними непросто працювати через різницю в сприйнятті та їх неточність. Яскравим прикладом може служити те, що “dark grey” (темно-сірий) світліше, ніж “grey” (сірий). Є навіть гра, у якій треба вгадувати кольори. Раніше, наприклад, криваво-червоний колір називався chucknorris (зараз це підтримується тільки в HTML, наскільки я знаю). Так або інакше, набагато зручніше і професійніше використовуватиме препроцесори на кшталт Sass для зберігання кольорів у змінних.

Колірні змінні

Доцільною практикою є зберігання колірних змінних, але відмова їх використання, перевизначення їх читаними іменами. У CSS є нативні змінні:

:root { --brandColor: red;}body { background: var (--brandColor);}

Проте це зовсім нова фіча, і браузери від Microsoft на момент написання статті її не підтримують.

Препроцесори CSS також підтримують змінні, так що Ви можете створити змінні $brandPrimary і використати їх. Чи використати map:

$colors:  ( mainBrand: #FA6ACC, secondaryBrand: #F02A52, highlight:  #09A6E4);@function color ($key) { @if map - has - key ($colors, $key) { @return map - get ($colors, $key); } @warn "Unknown '#{$key}' in $colors".; @return null;}//_component.scss.element { background-color: color (highlight); // #09A6E4}

Пам’ятайте, що імена важливі. Абстрактні імена іноді потрібні, адже якщо Ви зміните змінну, яка раніше задавала синій колір, а тепер – помаранчевий, то Вам не доведеться перейменовувати всі інші змінні, або, ще гірше, вішати коментар типу $blue тепер помаранчевий”.

currentColor

currentColor – це дуже важливе значення. Воно враховує вкладеність, і використовується для перенесення кольору в тіні, границі й навіть фони.

Припустимо, Ви створили div і вкладений в нього div. Код нижче створить помаранчеву рамку для внутрішнього div:

.div - external { color: orange; }.div - internal { border: 1px solid currentColor; }

Це дуже корисно при роботі із системами іконок. Ви можете задати currentColor як значення за умовчанням, а потім використати необхідні CSS-класи для стилізації.

Препроцесори

Препроцесори CSS чудово підходять для роботи з кольором. Ось декілька посилань на документацію до різних функцій:

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

mix ($color1, $color2, [$weight]) adjust - hue ($color, $degrees) lighten ($color, $amount) darken ($color, $amount) saturate ($color, $amount)

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

Властивості кольору

Колір (color) як властивість CSS відноситься до кольору шрифту. Для заливки кольором великої області Ви використовуєте background - color, а у разі SVG-елемента – fill. Межа (border) – це межа навколо HTML-елемента, а stroke – її SVG-аналог.

Тіні

Властивості box - shadow і text - shadow набувають колірного значення. Текстові тіні приймають 2 або 3 значення (вертикальну і горизонтальну тіні і опціональный радіус блюра). Блокові тіні можуть приймати ще і опціональный радіус поширення. Також можна створити і внутрішні тіні. Ось відмінний сайт із демонстрацією.

Градієнти

Лінійні градієнти приймають напрям, точки зміни кольору і значення прозорості. Ось приклад:

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

Градієнти створюються і в SVG. Ми задаємо блок <linearGradient>, звертатися до якого ми будемо через ідентифікатор. Також можна задати і область.


 

Такі градієнти підтримують непрозорість, і це дозволяє створювати красиві ефекти.

Можна створювати і градієнтний текст, детальніше про це читайте тут.

Наступна частина про генерацію кольору і різні ефекти.

Переклад статті “A Nerd’s Guide to Color on the Web”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *