Один із найважливіших інструментів для створення дизайну вебсторінок — це керування кольором у CSS. Існує кілька способів визначення відтінків, кожен з яких має свої переваги та сфери застосування. Розуміння цих методів дозволяє розробнику створювати адаптивні та візуально привабливі інтерфейси.
1. Ключові слова (Назви кольорів)
Властивість color задає колір тексту елемента, а background-color — колір фону. У стандарт CSS включено 145 зарезервованих назв відтінків. Серед них є як базові (наприклад, black, blue, red), так і складні (наприклад, crimson, lawngreen, midnightblue).
Оскільки весь список назв запам’ятати важко, цей метод використовується рідко, переважно для швидких тестів або стандартних значень.
2. Модель RGB та RGBA
Більшість моніторів, смартфонів та телевізорів працюють за моделлю RGB (Red, Green, Blue). Будь-який відтінок створюється шляхом змішування трьох основних кольорів. Кожен параметр приймає значення від 0 до 255.
- Чорний колір:
rgb(0, 0, 0) - Білий колір:
rgb(255, 255, 255)
Система RGBA ідентична RGB, але має четвертий параметр — альфа-канал (від 0 до 1). Він визначає прозорість елемента, дозволяючи йому змішуватися з фоном.
3. Система HSL та HSLA
Для розуміння системи HSL уявіть колірне коло. Це найбільш інтуїтивний метод для дизайнерів, оскільки він базується на сприйнятті кольору людиною:
- Hue (Відтінок): кут на колірному колі (0–360°). 0 — червоний, 120 — зелений, 240 — синій.
- Saturation (Насиченість): у відсотках (0% — сірий, 100% — чистий колір).
- Lightness (Яскравість): у відсотках (0% — чорний, 50% — норма, 100% — білий).
Приклад фіолетового: hsl(315, 100%, 45%). Як і у випадку з RGB, додавання літери "a" (HSLA) дозволяє керувати прозорістю.
4. Шістнадцятковий код (HEX)
У CSS кольори найчастіше визначаються через HEX-коди, наприклад: #FF4500 (помаранчевий). Це шістнадцяткове представлення значень RGB. Кожна пара символів відповідає за свій канал: #RRGGBB.
Цей метод є стандартом для професійної верстки, оскільки дозволяє легко копіювати кольори з графічних редакторів (Photoshop, Figma). З 2026 року в CSS також широко підтримується восьмизначний HEX для задання прозорості (наприклад, #FF450080).
Порівняльна таблиця методів
| Метод | Формат | Переваги |
|---|---|---|
| Keywords | color: red; | Простота та зрозумілість. |
| HEX | #FF0000; | Компактність, стандарт для дизайну. |
| RGB(A) | rgba(255, 0, 0, 0.5); | Зручне керування прозорістю. |
| HSL(A) | hsla(0, 100%, 50%, 0.8); | Легко створювати гармонійні відтінки. |
Який спосіб обрати?
Вибір залежить від ваших цілей:
- Якщо потрібна прозорість — обирайте RGBA, HSLA або HEX із 8 символів.
- Для швидких експериментів з відтінками — HSL є найзручнішим завдяки колірному колу.
- При перенесенні дизайну з Figma чи Photoshop — використовуйте HEX.
Часті питання (FAQ)
Як зробити колір напівпрозорим у CSS?
Використовуйте функції rgba() або hsla(), де останній параметр (альфа-канал) встановлюється від 0 (прозорий) до 1 (непрозорий). Наприклад: rgba(0, 0, 0, 0.5) — напівпрозорий чорний.
Чи можна використовувати українські назви кольорів у CSS?
Ні, стандарт CSS підтримує лише англійські назви ключових слів (наприклад, green, silver). Для інших мов потрібно використовувати цифрові коди.
Яка різниця між HEX та RGB?
Це просто різні способи запису одного й того самого значення. HEX — це шістнадцяткова система, а RGB — десяткова. Комп'ютер сприймає їх однаково.
