Ключові висновки
- Використання назв кольорів: CSS надає 145 назв кольорів для легкого та зручного для початківців вибору кольорів, але варіанти обмежені та можуть не відповідати точним потребам дизайну.
- Шістнадцяткові коди кольорів: шістнадцяткові коди пропонують широкий вибір кольорів і точні налаштування, хоча вони можуть бути менш інтуїтивно зрозумілими для використання та запам’ятовування.
- Значення кольорів RGB і RGBA: RGB дозволяє точно керувати кольором за допомогою числових значень, а RGBA додає прозорість. Важливо забезпечити доступні поєднання кольорів.
Кольори є одними з найпоширеніших атрибутів CSS, які відіграють важливу роль у формуванні візуальної ідентичності веб-сайту, настрою та взаємодії з користувачем. CSS пропонує безліч варіантів використання кольорів, кожен з яких адаптований до конкретних потреб і вподобань дизайну.
Хоча легко не помітити важливість визначення кольору, ваш вибір може суттєво вплинути на зовнішній вигляд вашого веб-сайту. Вивчення відмінностей між різними методами та способів їх практичного застосування та поєднання покращить вашу здатність створювати візуально привабливі веб-сайти.
1. Використання назв кольорів
CSS надає зручний спосіб визначення кольорів за допомогою імен, і доступно 145 варіантів. Ці назви кольорів варіюються від простих «червоний», «зелений» і «синій» до більш конкретних відтінків, таких як «кораловий» або «лавандовий».
Використання іменованих кольорів є простим: ви вибираєте назву кольору, як-от «red», і використовуєте її у властивості CSS, яка підтримує значення кольорів. Такі властивості включають очевидний колір і колір фону, а також колір рамки, колір контуру та тінь тексту, серед інших.
Назви кольорів зручні, коли вам потрібен тимчасовий колір для створення прототипу або ви хочете, щоб ваш код був легким для читання. Ось синтаксис:
color_property: color_name;
У цьому випадку просто замініть color_name на конкретний колір, який ви бажаєте використовувати. Наприклад, якщо ви хочете встановити червоний колір тексту абзацу, напишіть:
p {
color: red;
}
Це надасть вашим абзацам червоний колір тексту:
Плюси: їх легко читати та розуміти у вашому коді CSS. Вони зручні для початківців, добре працюють у різних браузерах і зручні для швидкого створення ідей.
Мінуси: вони мають обмежені можливості та можуть не запропонувати точні відтінки, які вам потрібні, що обмежує креативність дизайну. Крім того, вони не завжди можуть відповідати суворим вимогам доступності, а підтримка в старіших системах може відрізнятися.
2. Шістнадцяткові коди кольорів
Шістнадцяткові коди кольорів, які часто називають «шістнадцятковими кодами», є найпоширенішими методами визначення кольорів у веб-дизайні. Ці коди складаються з шестисимвольних комбінацій цифр і літер (0-9, AF), що представляють суміш червоного, зеленого та синього (RGB) компонентів кольору.
Хоча вони прості у використанні, зрозуміти, як вони працюють, може бути складно. Ви можете глибоко зануритися в шістнадцяткові коди, щоб краще зрозуміти. Ось базовий приклад використання шістнадцяткових кодів у CSS:
color: #RRGGBB;
У цьому форматі RR, GG і BB представляють червоний, зелений і синій компоненти відповідно. Кожен компонент може варіюватися від 00 (без інтенсивності) до FF (максимальна інтенсивність). Наприклад, якщо ви хочете встановити колір фону заголовка веб-сайту на певний відтінок синього, ви можете використати такий шістнадцятковий код:
header {
background-color: #336699;
}
Це призведе до насиченого синього кольору:
Ви також можете використовувати скорочення, якщо кожен із трьох компонентів повторює один і той же символ двічі. Ви можете записати наведений вище приклад так:
header {
background-color: #369;
}
Плюси: шістнадцяткові коди кольорів надають широкий діапазон варіантів кольорів, що дозволяє генерувати детальні та налаштовані відтінки. Вони пропонують плавний контроль над вибором кольорів, що робить їх ідеальними для складних дизайнерських вимог.
Мінуси: хоча шістнадцяткові коди є потужними, вони можуть бути менш інтуїтивно зрозумілими, ніж іменовані кольори. Ви також можете зіткнутися з проблемою запам’ятовування певних значень кольорів. На щастя, доступні інструменти для пошуку шістнадцяткових кодів кольорів, які ви зустрічаєте, що робить процес більш керованим.
3. Значення кольорів RGB і RGBA
Подібно до шістнадцяткових кодів, цей формат дозволяє вказувати кольори за їх червоними, зеленими та синіми компонентами. Цього разу, однак, ви можете використовувати більш зручні цілі числа.
Значення кольорів RGB
Значення кольорів RGB є другим найбільш часто використовуваним методом визначення кольорів у CSS. «RGB» позначає червоний, зелений і синій, виражений як функція CSS із дужками після неї. У дужках ви призначаєте значення для кожного колірного каналу в діапазоні від 0 до 255. Це дозволяє контролювати інтенсивність червоного, зеленого та синього кольорів, які ви хочете використовувати.
Ось синтаксис:
rgb(red_value, green_value, blue_value);
Замініть red_value, green_value і blue_value відповідними числовими значеннями. Наприклад, ви можете отримати білий, чорний і червоний кольори, як показано на цьому зображенні:
Коли ви встановлюєте для всіх трьох каналів кольорів (червоний, зелений і синій) максимальне значення 255, це призводить до найвищої інтенсивності для кожного каналу, створюючи білий колір:
.white-box {
color: rgb(255, 255, 255);
}
Коли ви встановлюєте для всіх трьох каналів кольору мінімальне значення 0, це означає відсутність кольору в кожному каналі, що призводить до чорного.
.black-box {
color: rgb(0, 0, 0);
}
Встановлення для червоного каналу максимального значення 255, зберігаючи мінімальне значення інших каналів 0, створює червоний колір:
.red-box {
color: rgb(255, 0, 0);
}
Значення кольорів RGBA
RGBA функціонує так само, як RGB, єдина відмінність полягає в включенні альфа-значення. Буква «A» в RGBA означає альфа, що визначає рівень прозорості або непрозорості для вибраного кольору. Значення 0 означає повну прозорість, що робить колір повністю невидимим, а значення 1 означає повну непрозорість, що робить колір повністю видимим.
RGBA особливо корисний, коли ви хочете створити елементи з різними рівнями прозорості, наприклад напівпрозорі фони або вицвілий текст. Повний синтаксис:
color: rgba(red_value, green_value, blue_value, alpha_value);
Тут red_value, green_value і blue_value представляють канали кольорів, як у RGB, а alpha_value визначає рівень прозорості.
div {
background-color: rgba(0, 128, 0, 0.5);
}
У цьому прикладі значення альфа 0,5 призначає 50% прозорості зеленому кольору, дозволяючи вмісту під ним проглядатися:
Переваги: RGB і RGBA дозволяють точно керувати кольорами, полегшуючи вибір точних відтінків і створення візуально привабливого дизайну. Вони сумісні з різними веб-браузерами, забезпечуючи узгодженість вибраних вами кольорів.
Мінуси: завдання полягає в забезпеченні доступних комбінацій кольорів. Дуже важливо звернути увагу на коефіцієнти контрастності, головним чином під час роботи з прозорістю в RGBA. Рекомендації WCAG можуть допомогти вам переконатися, що ваш дизайн доступний.
4. Значення кольорів HSL і HSLA
HSL — скорочення від Hue, Saturation і Lightness — це ще одна функція CSS, яка визначає кольори. Подібно до RGB, HSL використовує числові значення для представлення кольорів, але робить це інакше. Ви можете бути знайомі зі значеннями HSL із компонентів інтерфейсу користувача в програмах для розробки та інших місцях.
Відтінок: це представляє сам колір за допомогою градусів на колірному колі в діапазоні від 0 до 360. Уявіть собі це як вибір точки на колі, де кожен градус відповідає різному кольору. Наприклад, 0 і 360 градусів для червоного, 120 градусів для зеленого і 240 градусів для синього.
Насиченість: Насиченість визначає яскравість або інтенсивність кольору. Він визначає відношення кольору до сірого, при цьому 0% означає повністю відтінки сірого (ненасичений), а 100% – повністю насичений (яскравий і чистий).
Яскравість: Яскравість означає, наскільки яскравим чи темним виглядає колір. Це пов’язано з положенням кольору в спектрі між чорним (0%) і білим (100%). Значення 50% відповідає нормальному кольору, тоді як значення нижче 50% темніють колір, а значення вище 50% освітлюють його.
Крім HSL, існує HSLA, де буква «А» означає «альфа». Це схоже на «A» в RGBA і означає прозорість.
Ось синтаксис:
color: hsl(hue_value, saturation_percentage, lightness_percentage);
Використовуючи цей синтаксис, замініть hue_value, saturation_percentage і lightness_percentage на конкретні значення, які ви хочете для кожного компонента. Наприклад:
div {
background-color: hsl(120, 100%, 50%);
}
У цьому прикладі колір фону елемента div встановлено на яскравий зелений за допомогою значень HSL. 120 означає відтінок (зелений), 100% — повну насиченість, а 50% встановлює збалансований рівень освітленості.
Плюси: HSL і HSLA пропонують універсальні обчислення кольорів за допомогою спеціальних властивостей CSS. Вони дуже сумісні з сучасними браузерами та дозволяють легко регулювати яскравість кольорів.
Мінуси: Вивчення HSL передбачає розуміння кольорознавства, наприклад відтінків і насиченості, що може бути складнішим, ніж звичні кольори RGB.
Використання потужності кольорів CSS
Існує більше методів, які ви можете перевірити, і поки ви досліджуєте різні формати для визначення кольорів у CSS, пам’ятайте, що ви маєте повноваження формувати зовнішній вигляд свого веб-сайту, настрій і взаємодію з користувачем.
Ваш вибір формату кольорів — будь то прості назви кольорів, шістнадцяткові коди, RGB або HSL — може вплинути на те, як аудиторія сприйме ваш сайт. Отже, експериментуйте, вивчайте та знаходьте визначення кольорів, які найкраще відповідають вашим цілям дизайну.
