M

MLOG

Українська

Дізнайтеся про потужність колірних функцій CSS для створення динамічних та доступних палітр. Вивчіть передові методи налаштування, змішування та керування кольорами у ваших веб-проєктах.

Колірні функції CSS: Опанування розширених маніпуляцій з кольором

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

Розуміння колірних моделей CSS

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

RGB (Червоний, Зелений, Синій)

Найпоширеніша колірна модель, RGB, представляє кольори як комбінацію червоного, зеленого та синього світла. Значення варіюються від 0 до 255 (або від 0% до 100%).

color: rgb(255, 0, 0); /* Червоний */
color: rgb(0, 255, 0); /* Зелений */
color: rgb(0, 0, 255); /* Синій */

RGBA (Червоний, Зелений, Синій, Альфа)

RGBA розширює RGB, додаючи альфа-канал, що представляє прозорість кольору. Значення альфа-каналу варіюється від 0 (повністю прозорий) до 1 (повністю непрозорий).

color: rgba(255, 0, 0, 0.5); /* Червоний з 50% прозорістю */

HSL (Відтінок, Насиченість, Світлість)

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

color: hsl(0, 100%, 50%); /* Червоний */
color: hsl(120, 100%, 50%); /* Зелений */
color: hsl(240, 100%, 50%); /* Синій */

HSLA (Відтінок, Насиченість, Світлість, Альфа)

HSLA розширює HSL, додаючи альфа-канал для прозорості, подібно до RGBA.

color: hsla(0, 100%, 50%, 0.5); /* Червоний з 50% прозорістю */

HWB (Відтінок, Білизна, Чорнота)

HWB представляє кольори на основі їхнього відтінку, білизни (кількість доданого білого) та чорноти (кількість доданого чорного). Це ще один інтуїтивно зрозумілий спосіб визначення кольорів, особливо відтінків і тонів.

color: hwb(0 0% 0%); /* Червоний */
color: hwb(0 50% 0%); /* Рожевий (червоний з 50% білого) */
color: hwb(0 0% 50%); /* Бордовий (червоний з 50% чорного) */

LCH (Світлість, Хроматичність, Відтінок)

LCH — це колірна модель, заснована на людському сприйнятті, що прагне до перцептивної однорідності. Це означає, що зміни у значеннях LCH тісніше відповідають тому, як люди сприймають різницю в кольорах. Вона є частиною родини колірних просторів CIE Lab.

color: lch(50% 100 20); /* Яскравий оранжево-червоний */

OKLCH (Оптимізований LCH)

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

color: oklch(50% 0.2 240); /* Десатурований синій */

Color()

Функція `color()` надає загальний спосіб доступу до будь-якого колірного простору, включаючи специфічні для пристроїв колірні простори та ті, що визначені в профілях ICC. Вона приймає ідентифікатор колірного простору як перший аргумент, за яким слідують компоненти кольору.

color: color(display-p3 1 0 0); /* Червоний у колірному просторі Display P3 */

Колірні функції CSS: Розширені техніки

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

`color-mix()`

Функція `color-mix()` змішує два кольори, дозволяючи створювати нові кольори на основі існуючих. Це потужний інструмент для генерації варіацій кольорів та створення гармонійних колірних палітр.

color: color-mix(in srgb, red, blue); /* Фіолетовий (50% червоного, 50% синього) */
color: color-mix(in srgb, red 20%, blue); /* Переважно синій з відтінком червоного */
color: color-mix(in lch, lch(50% 60 20), white); /* Відтінок кольору LCH */

/* Змішування з прозорістю */
color: color-mix(in srgb, rgba(255, 0, 0, 0.5), blue); /*  Суміш з урахуванням прозорості */

Приклад: Створення ефекту наведення на кнопку з трохи світлішим відтінком:

.button {
  background-color: #007bff; /* Базовий синій колір */
  color: white;
}

.button:hover {
  background-color: color-mix(in srgb, #007bff 80%, white); /* Світліший синій при наведенні */
}

Ключове слово `in` вказує колірний простір, у якому має відбуватися змішування. Використання перцептивно однорідних колірних просторів, таких як LCH або OKLCH, часто дає більш природні градієнти та суміші кольорів.

`color-contrast()`

Функція `color-contrast()` автоматично вибирає колір зі списку варіантів, який забезпечує найкращий контраст на заданому фоні. Це неоціненно для забезпечення доступності та читабельності.

color: color-contrast(
  #007bff, /* Колір фону */
  white, /* Перший варіант */
  black  /* Другий варіант */
);

/*  Буде білим, якщо #007bff достатньо темний; інакше буде чорним. */

Ви також можете вказати коефіцієнт контрастності, щоб забезпечити достатній контраст для стандартів доступності (WCAG):

color: color-contrast(
  #007bff, /* Колір фону */
  white vs. 4.5, /* Білий, але тільки якщо коефіцієнт контрастності щонайменше 4.5:1 */
  black /* Запасний варіант: використовувати чорний, якщо білий не відповідає вимогам контрастності */
);

Приклад: Динамічний вибір кольору тексту на основі кольору фону:

.element {
  background-color: var(--background-color);
  color: color-contrast(
    var(--background-color),
    white vs. 4.5,
    black
  );
}

`lab()`, `lch()` та `oklch()`

Як згадувалося раніше, `lab()`, `lch()` та `oklch()` — це колірні функції, що дозволяють визначати кольори безпосередньо в цих колірних просторах. Вони особливо корисні для створення палітр, які є перцептивно однорідними.

Приклад: Створення серії кольорів зі зростаючою світлістю в OKLCH:

:root {
  --base-hue: 240; /* Синій */
  --base-chroma: 0.15;
  --color-1: oklch(0.25 var(--base-chroma) var(--base-hue));
  --color-2: oklch(0.50 var(--base-chroma) var(--base-hue));
  --color-3: oklch(0.75 var(--base-chroma) var(--base-hue));
}

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

`hwb()`

Функція `hwb()` надає інтуїтивно зрозумілий спосіб визначення кольорів, вказуючи їх відтінок, білизну та чорноту. Вона особливо корисна для створення світлих та темних відтінків базового кольору.

Приклад: Створення світлих та темних відтінків основного кольору за допомогою HWB:

:root {
  --primary-hue: 210; /* Відтінок синього */
  --primary-color: hwb(var(--primary-hue) 0% 0%); /* Сам основний колір */
  --primary-tint: hwb(var(--primary-hue) 20% 0%); /* Світліший відтінок */
  --primary-shade: hwb(var(--primary-hue) 0% 20%); /* Темніший відтінок */
}

`color()`

Функція `color()` надає доступ до залежних від пристрою колірних просторів, таких як `display-p3`, що пропонує ширшу гаму кольорів, ніж sRGB. Це дозволяє використовувати повні колірні можливості сучасних дисплеїв.

Приклад: Використання Display P3 для більш яскравих кольорів (якщо підтримується браузером та дисплеєм):

body {
  background-color: color(display-p3 0.8 0.2 0.1); /* Яскравий червонувато-оранжевий */
}

Примітка: Завжди надавайте запасні кольори в sRGB для браузерів, які не підтримують вказаний колірний простір.

Практичні застосування та приклади

Створення динамічних колірних палітр

Колірні функції CSS надзвичайно корисні для створення динамічних колірних палітр, які адаптуються до уподобань користувача або системних налаштувань (наприклад, темний режим). Використовуючи змінні CSS та `color-mix()` (або подібні функції), ви можете легко налаштувати колірну схему вашого веб-сайту.

Приклад: Впровадження теми темного режиму:

:root {
  --background-color: white;
  --text-color: black;
  --link-color: blue;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
    --link-color: lightblue;
  }
}

Для більш розширених динамічних палітр ви можете використовувати JavaScript для зміни змінних CSS на основі введення користувача або інших факторів.

Покращення доступності

Доступність є першочерговою у веб-дизайні. Колірні функції CSS, зокрема `color-contrast()`, можуть значно покращити доступність вашого веб-сайту, забезпечуючи достатній контраст між текстом та фоном. Завжди перевіряйте свої колірні комбінації за допомогою інструментів доступності, щоб відповідати рекомендаціям WCAG.

Приклад: Забезпечення достатнього контрасту для міток форм:

label {
  color: color-contrast(
    var(--background-color),
    white vs. 4.5,
    black
  );
}

Створення колірних тем

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

Приклад: Створення тематичної кнопки з варіаціями:

:root {
  --primary-color: #007bff; /* Базовий основний колір */
  --primary-color-hover: color-mix(in srgb, var(--primary-color) 80%, white); /* Світліший при наведенні */
  --primary-color-active: color-mix(in srgb, var(--primary-color) 80%, black); /* Темніший при активації */
}

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

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

.button.primary:active {
  background-color: var(--primary-color-active);
}

Генерація колірних шкал та градієнтів

`color-mix()` та колірні простори LCH/OKLCH чудово підходять для створення візуально привабливих та перцептивно однорідних колірних шкал і градієнтів. Це особливо важливо для візуалізації даних та інших застосувань, де колір використовується для представлення кількісних даних.

Приклад: Створення плавного градієнта за допомогою OKLCH:

.gradient {
  background: linear-gradient(
    to right,
    oklch(80% 0.1 20),
    oklch(80% 0.1 340)
  ); /* Градієнт від червонувато-оранжевого до фіолетового */
}

Найкращі практики та міркування

Висновок

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