kostyl.dev
HTML & CSS

Кольори та фони в CSS

Глибоке занурення у колірні моделі CSS: hex, rgb, hsl, oklch, градієнти (linear, radial, conic), background-властивості, множинні фони, opacity, CSS-змінні для кольорових тем та prefers-color-scheme.

Кольори та фони в CSS

Чому кольори в CSS задають п'ятьма різними способами — і який з них правильний?

Відкрийте CSS будь-якого сайту, і ви побачите кольори задані як #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) — три різні записи одного й того самого кольору. Навіщо стільки форматів? Чи є серед них «правильний»? І чому дизайнери все частіше кажуть про загадковий oklch()?

Справа в тому, що кожна колірна модель дає різний рівень контролю та інтуїтивності. Hex — компактний, але нечитабельний. HSL — зрозумілий людині, але має проблеми з однаковістю яскравості. OKLCH — вирішує ці проблеми, але поки новий.

У попередній статті ми навчились оформлювати текст — шрифти, розміри, інтервали. Тепер додамо кольори та фони — те, що робить дизайн по-справжньому живим.

Теорія кольору та найкращі практики

Додавання кольору — це не просто «зробити красивіше». Колір передає настрій, керує увагою і забезпечує доступність інтерфейсу.

Контрастність та доступність (WCAG)

За стандартами Web Content Accessibility Guidelines (WCAG), текст повинен бути достатньо контрастним відносно фону, щоб його могли читати люди з вадами зору.

  • Мінімальний контраст (AA): 4.5:1 для звичайного тексту та 3:1 для великого тексту (від 18pt або 14pt bold).
  • Покращений контраст (AAA): 7:1 для звичайного тексту та 4.5:1 для великого.
Завжди перевіряйте контрастність ваших кольорів за допомогою інструментів на кшталт Coolors Contrast Checker або вбудованих у Chrome DevTools інструментів.

Правило 60-30-10

У веб-дизайні часто використовується правило пропорції кольорів:

  • 60% (Основний фон): Зазвичай нейтральний колір (білий, світло-сірий, темно-синій).
  • 30% (Вторинний колір): Колір для карток, хедерів, вторинних кнопок.
  • 10% (Акцентний колір): Найяскравіший колір для закликів до дії (CTA), головних кнопок, важливих посилань.

Семантика кольору

Користувачі звикли до певних паттернів:

  • 🔴 Червоний: Помилка, видалення, критична дія.
  • 🟡 Жовтий/Оранжевий: Попередження, очікування.
  • 🟢 Зелений: Успіх, підтвердження, збереження.
  • 🔵 Синій: Інформація, посилання, безпечні дії.

Властивість color (Колір тексту)

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

🔒localhost:3000
p {
    color: #333333;
}

Успадкування кольору

Властивість color успадковується (inherited). Це означає, що якщо ви задасте колір для <body>, всі текстові елементи всередині (заголовки, параграфи) отримають цей колір, якщо не мають свого власного.

body {
    color: #1e293b; /* Задає колір для всього тексту на сторінці */
}

Магічне значення currentColor

currentColor — це спеціальне ключове слово, яке приймає значення поточної властивості color елемента. Воно вкрай корисне для рамок, тіней або SVG-іконок. Якщо ви зміните color, всі властивості, що використовують currentColor, автоматично оновляться:

🔒localhost:3000
.alert {
    color: #dc2626;
    border: 1px solid currentColor; /* Рамка буде #dc2626 */
    box-shadow: 0 4px 6px currentColor; /* Тінь теж #dc2626 */
}

Колірні моделі CSS

Іменовані кольори (Named Colors)

CSS має 148 вбудованих кольорів із текстовими іменами:

🔒localhost:3000

Іменовані кольори зручні для прототипування, але не підходять для точного дизайну — ви обмежені 148 варіантами без можливості тонкого налаштування.

HEX — шістнадцяткова нотація

Найпопулярніший формат у CSS. Записується як #RRGGBB. Насправді це просто запис моделі RGB, але у шістнадцятковій (hexadecimal) системі числення (Base16). Кожна пара символів представляє градацію від 00 (мінімальна інтенсивність, 0 у десятковій системі) до FF (максимальна інтенсивність, 255 у десятковій).

Тобто #FF0000 означає максимум червоного і нуль зеленого та синього. #FFFFFF — коли всі три канали світяться на максимум, ми отримуємо білий. #000000 — відсутність світла, тобто чорний.

🔒localhost:3000
HEX — це запис кольору в RGB-моделі, просто у шістнадцятковій системі. #3b82f6 = R:59, G:130, B:246. Перевага — компактність. Недолік — неможливо «на око» зрозуміти, який це колір.

RGB та RGBA

Те саме, що HEX, але у десятковому записі — кожен канал від 0 до 255.

Як це працює фізично? Екрани пристроїв використовують адитивну колірну модель (Additive Color Mixing). Уявіть три ліхтарики (червоний, зелений, синій), що світять у темній кімнаті на одну точку. Якщо змішати їх усі на максимум rgb(255, 255, 255), ми отримаємо чисте біле світло. В свою чергу rgb(0, 0, 0) означає, що всі ліхтарики вимкнені (екран чорний). Це кардинально відрізняється від малювання фарбами на папері (субтрактивна модель CMYK), де змішування всіх кольорів створювало б брудно-чорний.

🔒localhost:3000

HSL та HSLA — кольори для людей

HSL (Hue, Saturation, Lightness) — колірна модель, яка створена спеціально для того, щоб бути інтуїтивно зрозумілою людині. Замість того, щоб вгадувати "скільки червоного і синього треба змішати для отримання рожевого", ми мислимо категоріями художника:

  1. Hue (Відтінок, 0-360): Де ми знаходимось на колірному колі? Вибираємо базовий відтінок: 0° (повний оберт 360°) — червоний, 120° — зелений, 240° — синій. Будь-що між ними — плавний перехід.
  2. Saturation (Насиченість, 0-100%): Наскільки колір "чистий"? 100% — це максимально яскравий, кричущий варіант червоного чи синього. Якщо ми зменшуємо насиченість ближче до 0%, ми ніби "вимиваємо" колір, перетворюючи його на тьмяно-сірий.
  3. Lightness (Яскравість, 0-100%): Скільки "чорної" чи "білої" фарби ми підмішали? 50% — це оригінальний чистий колір без домішок. Якщо зменшувати до 0%, колір темнішає аж до глухого чорного. Збільшуючи до 100% — ми перетворюємо його на чистий білий.
Loading diagram...
graph LR
    H["H — Hue (Відтінок)\n0°-360° на колірному колі\n0°=червоний 120°=зелений\n240°=синій 360°=червоний"] --> HSL["HSL-колір"]
    S["S — Saturation (Насиченість)\n0% = сірий\n100% = яскравий"] --> HSL
    L["L — Lightness (Яскравість)\n0% = чорний\n50% = чистий колір\n100% = білий"] --> HSL
    style H fill:#3b82f6,color:#fff
    style S fill:#f59e0b,color:#fff
    style L fill:#64748b,color:#fff
    style HSL fill:#10b981,color:#fff
🔒localhost:3000
🔒localhost:3000
HSL — найкращий формат для дизайн-системи. Потрібен темніший варіант того ж кольору? Зменшіть L (Lightness). Потрібен пастельний? Зменшіть S (Saturation) і збільшіть L. Потрібен прозорий? Додайте alpha. З HEX-кодами такі маніпуляції «на льоту» — неможливі.

OKLCH — майбутнє CSS-кольорів

oklch() — найновіша колірна модель у CSS, заснована на просторі кольорів Oklab. Вона вирішує головну проблему HSL: перцептивну нерівномірність.

Людське око біологічно сприймає різні кольори з різною інтенсивністю (наприклад, жовтий здається людському оку природно "світлішим" за синій). У HSL, якщо ви поставите однакову світлоту L: 50% для жовтого hsl(60, 100%, 50%) та синього hsl(240, 100%, 50%) — жовтий буде різати око, а синій здаватиметься занадто темним. OKLCH виправляє це завдяки математичній моделі, що імітує людський зір. Якщо ви фіксуєте яскравість (Lightness) в OKLCH, усі генеровані кольори виглядатимуть абсолютно однаково яскравими, дозволяючи програмно генерувати ідеально збалансовані та доступні колірні палітри без ручного підганяння.

🔒localhost:3000
L — Lightness
0..1
Яскравість від 0 (чорний) до 1 (білий). На відміну від HSL, яскравість перцептивно однакова для різних відтінків.
C — Chroma
0..0.4
Насиченість. 0 = сірий, 0.4 = максимально яскравий. Залежить від відтінку та дисплея.
H — Hue
0..360
Відтінок — кут на колірному колі, як у HSL.
OKLCH підтримується усіма сучасними браузерами (Chrome 111+, Firefox 113+, Safari 15.4+). Для проєктів, де потрібна підтримка старих браузерів, використовуйте HSL як фолбек.

Порівняння колірних моделей

ФорматПрикладІнтуїтивністьМаніпуляціїПідтримка
Namedsteelblue⭐⭐⭐❌✅
HEX#4682b4⭐❌✅
RGBrgb(70, 130, 180)⭐⭐❌✅
HSLhsl(207, 44%, 49%)⭐⭐⭐✅✅
OKLCHoklch(0.57 0.1 240)⭐⭐⭐✅✅✅ (сучасні)

CSS Custom Properties для кольорових тем

Замість хардкоду кольорів по всьому CSS, створіть систему через змінні:

:root {
    /* Основна палітра */
    --color-primary: hsl(217, 91%, 60%);
    --color-primary-light: hsl(217, 91%, 75%);
    --color-primary-dark: hsl(217, 91%, 40%);

    /* Нейтральні */
    --color-gray-50: hsl(210, 40%, 98%);
    --color-gray-100: hsl(210, 40%, 96%);
    --color-gray-200: hsl(214, 32%, 91%);
    --color-gray-500: hsl(215, 16%, 47%);
    --color-gray-700: hsl(215, 25%, 27%);
    --color-gray-900: hsl(222, 47%, 11%);

    /* Семантичні кольори */
    --color-success: hsl(142, 71%, 45%);
    --color-warning: hsl(38, 92%, 50%);
    --color-error: hsl(0, 84%, 60%);

    /* Текст та фон */
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-500);
    --color-bg: white;
    --color-bg-secondary: var(--color-gray-50);
    --color-border: var(--color-gray-200);
}

Використання:

🔒localhost:3000
body {
    color: var(--color-text);
    background-color: var(--color-bg);
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.alert-error {
    color: var(--color-error);
    border: 1px solid var(--color-error);
}
Чому HSL ідеальний для CSS-змінних? Маючи базовий колір hsl(217, 91%, 60%), ви автоматично отримуєте всю палітру — просто змінюючи L для відтінків (light/dark) та S для пастельних варіантів. HEX не дає такої гнучкості.

Темна тема через prefers-color-scheme

CSS дозволяє автоматично перемикати кольори відповідно до системних налаштувань користувача:

/* Світла тема — за замовчуванням */
:root {
    --color-text: hsl(222, 47%, 11%);
    --color-bg: hsl(0, 0%, 100%);
    --color-bg-secondary: hsl(210, 40%, 98%);
    --color-border: hsl(214, 32%, 91%);
    --color-primary: hsl(217, 91%, 60%);
}

/* Темна тема — автоматично */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: hsl(210, 40%, 96%);
        --color-bg: hsl(222, 47%, 11%);
        --color-bg-secondary: hsl(217, 33%, 17%);
        --color-border: hsl(215, 25%, 27%);
        --color-primary: hsl(217, 91%, 70%);
    }
}
🔒localhost:3000
prefers-color-scheme — це медіа-запит, що зчитує налаштування теми у системних параметрах (Windows, macOS, Android, iOS). Перевизначення змінних у :root — і весь сайт автоматично перемикає тему без жодного JavaScript. Детальніше про медіа-запити — у статті про адаптивний дизайн.

Фонові властивості

background-color

Задає суцільний колір фону:

🔒localhost:3000
.element {
    background-color: #f8fafc;
    background-color: hsl(210, 40%, 98%);
    background-color: transparent; /* Прозорий — значення за замовчуванням */
}

background-image

Фонове зображення — від файлів до градієнтів:

🔒localhost:3000
.hero {
    background-image: url('/images/hero-bg.jpg');
}

background-size

Як масштабувати фонове зображення:

🔒localhost:3000
ЗначенняПоведінка
coverМасштабує так, щоб покрити весь контейнер (може обрізатися)
containМасштабує так, щоб вміститися повністю (можуть бути порожні зони)
100% 100%Розтягує точно до розмірів контейнера (може спотворити пропорції)
200px 150pxТочний розмір у пікселях
autoОригінальний розмір зображення

background-position

Де розмістити фон усередині елемента:

🔒localhost:3000
.element {
    background-position: center; /* По центру */
    background-position: top right; /* Верхній правий кут */
    background-position: 50% 30%; /* 50% по X, 30% по Y */
    background-position: 20px 10px; /* 20px зліва, 10px зверху */
}

background-repeat

🔒localhost:3000
.element {
    background-repeat: repeat; /* Повторювати в обидва боки (за замовчуванням) */
    background-repeat: no-repeat; /* Не повторювати */
    background-repeat: repeat-x; /* Повторювати тільки горизонтально */
    background-repeat: repeat-y; /* Повторювати тільки вертикально */
    background-repeat: space; /* Повторювати з рівними проміжками */
    background-repeat: round; /* Повторювати, масштабуючи до цілого числа */
}

background-attachment

🔒localhost:3000
.parallax {
    background-attachment: fixed; /* Фон фіксований — ефект параллаксу */
    background-attachment: scroll; /* Фон прокручується разом з елементом (default) */
    background-attachment: local; /* Фон прокручується з вмістом елемента */
}

Скорочення background

Усе в одному рядку:

🔒localhost:3000
.hero {
    /* background: color image position/size repeat attachment */
    background: #0f172a url('/images/hero.jpg') center/cover no-repeat fixed;
}
Скорочення backgroundскидає всі невказані властивості до значень за замовчуванням. Якщо до скорочення був background-color: red, а в скороченні колір не вказано — він стане transparent. Будьте обережні при змішуванні скорочення з окремими властивостями.

Інтерактивний Playground варіантів фону

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

🔒localhost:3000

Градієнти

Градієнти — це плавні переходи між двома або більше кольорами.

Важливо розуміти: під капотом браузер розглядає та малює градієнт як повноцінне згенероване зображення, а не як заливку кольором. Саме тому градієнти завжди задаються через властивість background-image (або скорочення background), а не через background-color. Це дає нам величезну технічну перевагу — до градієнтів можна застосовувати усі властивості, що доступні для звичайних зображень: ми можемо задавати їм розмір (background-size), повторювати їх мов плитку (background-repeat) або маніпулювати їх позицією.

CSS підтримує три типи градієнтів:

linear-gradient() — лінійний градієнт

🔒localhost:3000
/* Напрямок + кольори */
.gradient {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
}

/* Кут у градусах */
.angled {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

/* Кілька кольорів із зупинками */
.multi {
    background: linear-gradient(to right, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}

/* Різкий перехід — «смужки» */
.stripes {
    background: linear-gradient(to right, #3b82f6 0%, #3b82f6 33%, #f59e0b 33%, #f59e0b 66%, #ef4444 66%, #ef4444 100%);
}

radial-gradient() — радіальний градієнт

🔒localhost:3000
/* Колове розповсюдження від центру */
.radial {
    background: radial-gradient(circle, #3b82f6, #1e293b);
}

/* Еліпс з іншою точкою початку */
.ellipse {
    background: radial-gradient(ellipse at top left, #f59e0b, transparent);
}

conic-gradient() — конічний градієнт

Кольори розповсюджуються по колу навколо центру:

🔒localhost:3000
conic-gradient() ідеально підходить для створення кругових діаграм (pie charts) та колірних коліс без JavaScript та SVG.

Множинні фони (Multiple Backgrounds)

CSS дозволяє накладати кілька фонів один на одного:

.hero {
    background:
        /* Шар 1 (верхній) — градієнт-оверлей */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7)),
        /* Шар 2 (нижній) — зображення */ url('/images/hero.jpg') center/cover no-repeat;
}
🔒localhost:3000
Фони перераховуються через кому. Перший — верхній шар, останній — нижній. Це дозволяє створювати складні візуальні ефекти: градієнт-оверлей поверх зображення, патерни, множинні градієнти.

opacity vs rgba / hsla

Часта помилка новачків — використання opacity там, де потрібен лише трохи прозорий фон. Хоча обидва підходи роблять елемент прозорим, вони мають принципово різну поведінку та механіку рендерингу (створюючи так званий контекст накладання / Stacking Context):

🔒localhost:3000
opacity впливає на весь елемент загалом разом з усіма його дочірніми елементами. Браузер спочатку рендерить весь HTML-блок обгортки у пам'яті як єдину плоску "картинку" (включаючи текст, вкладені зображення, рамки), а вже потім робить цю фінальну картинку напівпрозорою. Через це неможливо зробити обгортку напівпрозорою через opacity, а оригінальний текст всередині неї залишити 100% непрозорим. Значення задається від 0 (повністю прозорий) до 1 (непрозорий).Якщо вам потрібен напівпрозорий лише фон (щоб текст залишався чітким та контрастним) — завжди використовуйте прозорість на рівні кольору (Альфа-канал): rgba(), hsla() або oklch(... / alpha) для властивості background-color.

Практичні завдання

Рівень 1 — Базовий

Рівень 2 — Логіка та комбінування

Рівень 3 — Створення з нуля

Підсумок

🎨 Колірні моделі

HEX — компактний. RGB — програмістський. HSL — інтуїтивний для дизайну (змінюй L для відтінків). OKLCH — перцептивно точний, майбутній стандарт.

🖼️ Фони

background об'єднує color, image, position, size, repeat. Множинні фони через кому. Градієнти (linear, radial, conic) — замість зображень.

🌗 Теми

CSS-змінні + prefers-color-scheme = автоматична темна тема без JavaScript. Визначайте кольори через HSL-змінні для легкої зміни палітри.

👁️ Прозорість

opacity — весь елемент прозорий (з дітьми). rgba()/hsla() — тільки конкретний колір. Для фонових оверлеїв — завжди rgba.

Корисні посилання

  • 📖 MDN — CSS Colors — повний довідник колірних функцій
  • 🎨 MDN — Gradients — всі типи градієнтів
  • 🌈 OKLCH Color Picker — інтерактивний інструмент для OKLCH-кольорів
  • 🎨 CSS Gradient Generator — візуальний генератор градієнтів
  • 🖌️ Realtime Colors — тестування колірних палітр у реальному часі
  • 📐 Coolors — генератор гармонійних колірних палітр

Типографіка в CSS. Шрифти та текст

Глибоке занурення у CSS-типографіку: font-family, @font-face, Google Fonts, font-size (px/em/rem), line-height, text-align, text-decoration, text-overflow, одиниці виміру та CSS Custom Properties для системи типографіки.

Тіні та фільтри в CSS

Повний гід по box-shadow, text-shadow, filter та backdrop-filter. Анатомія тіней, шарування, inset-тіні, drop-shadow для SVG, blur, brightness, contrast, glassmorphism. Продуктивність і best practices.