Демістифікація відносного синтаксису кольорів CSS: колірні простори HSL і Lab для глобального веб-дизайну

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

Що таке відносний синтаксис кольорів у CSS?

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

Синтаксис побудований навколо функції color(), що дозволяє вказати колірний простір (наприклад, hsl, lab, lch, rgb, або oklab), базовий колір для модифікації та бажані коригування. Наприклад:

.element {
 color: color(hsl red calc(h + 30) s l);
}

Цей фрагмент коду бере червоний колір, використовує колірний простір hsl та збільшує тон на 30 градусів. h, s та l представляють існуючі значення тону, насиченості та світлості відповідно. Функція calc() є ключовою для виконання математичних операцій.

Чому саме HSL та Lab?

Хоча відносний синтаксис кольорів працює з різними колірними просторами, HSL та Lab пропонують явні переваги для маніпуляції кольорами та доступності. Давайте розглянемо, чому:

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

HSL — це циліндричний колірний простір, який інтуїтивно представляє кольори на основі людського сприйняття. Він визначається трьома компонентами:

Тон: Позиція кольору на колірному колі (0-360 градусів). Червоний зазвичай знаходиться на 0, зелений — на 120, а синій — на 240.
Насиченість: Інтенсивність або чистота кольору (0-100%). 0% — це відтінки сірого, а 100% — повністю насичений колір.
Світлість: Сприймана яскравість кольору (0-100%). 0% — це чорний, а 100% — білий.

Переваги HSL:

Інтуїтивне маніпулювання: HSL дозволяє легко коригувати кольори на основі перцептивних якостей. Збільшення світлості робить колір яскравішим, зменшення насиченості — тьмянішим, а зміна тону зміщує колір по колірному колу.
Створення колірних схем: HSL спрощує процес створення гармонійних колірних схем. Ви можете легко генерувати комплементарні кольори (тон + 180 градусів), аналогічні кольори (близькі тони) або тріадні кольори (тони на відстані 120 градусів).
Динамічна темизація: HSL ідеально підходить для динамічної темизації. Ви можете визначити базовий колір, а потім використовувати відносний синтаксис кольорів для створення різних варіацій для світлого та темного режимів.

Приклад: Створення темної теми

Припустимо, ваш фірмовий колір — #007bff (яскраво-синій). Ви можете використовувати HSL для створення темної теми, яка зберігає суть бренду, але є більш приємною для очей в умовах слабкого освітлення.

:root {
 --brand-color: #007bff;
 --brand-color-hsl: color(oklch #007bff h s l);
 --bg-color: #fff;
 --text-color: #000;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #121212; /* Темно-сірий */
 --text-color: #fff;
 --brand-color: color(hsl var(--brand-color) h calc(s * 0.8) calc(l * 1.2)); /* Злегка знебарвлений та освітлений фірмовий колір */
 }
}

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

.brand-button {
 background-color: var(--brand-color);
 color: #fff;
}

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

Lab (Світлість, a, b)

Lab (або CIELAB) — це колірний простір, розроблений для перцептивної однорідності. Це означає, що зміна значень кольору відповідає аналогічній зміні у сприйманій різниці кольорів, незалежно від початкового кольору. Він визначається трьома компонентами:

L: Світлість (0-100%). 0 — це чорний, 100 — білий.
a: Позиція на осі зелений-червоний. Негативні значення — зелені, позитивні — червоні.
b: Позиція на осі синій-жовтий. Негативні значення — сині, позитивні — жовті.

Переваги Lab:

Перцептивна однорідність: Перцептивна однорідність Lab робить його ідеальним для завдань, де точні відмінності кольорів є вирішальними, наприклад, для корекції кольору та перевірки доступності.
Широка гама: Lab може представляти ширший діапазон кольорів, ніж RGB або HSL.
Доступність: Lab часто використовується в розрахунках доступності для забезпечення достатньої контрастності кольорів між текстом та фоном. WCAG (Web Content Accessibility Guidelines) використовує формулу, засновану на відносній яскравості, яка тісно пов'язана з колірним простором Lab.

Приклад: Покращення контрастності кольорів для доступності

Забезпечення достатньої контрастності кольорів є життєво важливим для доступності. Припустимо, у вас є колір тексту та колір фону, які не зовсім відповідають вимозі співвідношення контрастності WCAG AA (4.5:1). Ви можете використовувати Lab, щоб налаштувати світлість кольору тексту доти, доки він не відповідатиме вимозі.

Примітка: Хоча безпосередньо маніпулювати співвідношенням контрастності в CSS за допомогою відносного синтаксису кольорів неможливо, ми можемо використовувати його для налаштування світлості, а потім перевірити результат за допомогою інструменту перевірки контрастності.

.text {
 color: var(--text-color);
 background-color: var(--bg-color);
}

:root {
 --text-color: #333;
 --bg-color: #eee;
}

/*Приклад: Це насправді не обчислює коефіцієнт контрастності напряму.*/
/*Це концептуальний приклад налаштування світлості*/

.accessible-text {
 --current-text-color: var(--text-color);
 color: color(lab var(--current-text-color) calc(l + 10) a b); /* Освітлити текст на 10 одиниць. Це матиме ефект лише до певного моменту, якщо значення L кольору тексту близьке до 100. Для затемнення потрібно віднімати*/

}

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

Oklab: Покращення Lab

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

Використання Oklab з відносним синтаксисом кольорів схоже на використання Lab. Ви просто вказуєте oklab як колірний простір:

.element {
 color: color(oklab #ff0000 calc(l * 1.1) a b); /*Освітлити колір на 10%*/
}

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

Відносний синтаксис кольорів з HSL та Lab відкриває широкий спектр можливостей для веб-дизайну. Ось кілька практичних прикладів:

Генерація колірних палітр: Створіть базовий колір, а потім згенеруйте палітру комплементарних, аналогічних або тріадних кольорів за допомогою HSL.
Виділення елементів: Освітлюйте або затемнюйте колір фону елемента при наведенні курсора або фокусуванні для надання візуального зворотного зв'язку.
Створення тонких варіацій: Додайте незначні зміни в тоні або насиченості для створення глибини та візуального інтересу.
Динамічна темизація: Впроваджуйте світлий та темний режими або дозволяйте користувачам налаштовувати колірну схему вашого веб-сайту.
Покращення доступності: Коригуйте кольори для забезпечення достатньої контрастності для користувачів з вадами зору.

Приклад: Генерація колірної палітри за допомогою HSL

:root {
 --base-color: #29abe2; /* Світло-синій */
 --complementary-color: color(hsl var(--base-color) calc(h + 180) s l);
 --analogous-color-1: color(hsl var(--base-color) calc(h + 30) s l);
 --analogous-color-2: color(hsl var(--base-color) calc(h - 30) s l);
 --triadic-color-1: color(hsl var(--base-color) calc(h + 120) s l);
 --triadic-color-2: color(hsl var(--base-color) calc(h - 120) s l);
}

.base {
 background-color: var(--base-color);
}

.complementary {
 background-color: var(--complementary-color);
}

.analogous-1 {
 background-color: var(--analogous-color-1);
}

.analogous-2 {
 background-color: var(--analogous-color-2);
}

.triadic-1 {
 background-color: var(--triadic-color-1);
}

.triadic-2 {
 background-color: var(--triadic-color-2);
}

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

Приклад: Створення ефекту наведення за допомогою Lab

.button {
 background-color: #4caf50; /* Зелений колір */
 color: #fff;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button:hover {
 background-color: color(lab #4caf50 l calc(a * 1.1) calc(b * 1.1)); /* Злегка освітлити та збільшити a і b */
}

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

Сумісність з браузерами та резервні варіанти

Як і з будь-якою новою функцією CSS, сумісність з браузерами є важливим фактором. Відносний синтаксис кольорів підтримується в більшості сучасних браузерів, включаючи Chrome, Firefox, Safari та Edge. Однак старіші браузери можуть його не підтримувати.

Щоб ваш веб-сайт працював у всіх браузерах, важливо надавати резервні варіанти (фолбеки) для браузерів, які не підтримують відносний синтаксис кольорів. Ви можете зробити це за допомогою змінних CSS та правила @supports.

:root {
 --base-color: #29abe2;
 --highlight-color: #33b5e5; /* Резервний колір */
}

@supports (color: color(hsl var(--base-color) h calc(s * 1.2) l)) {
 :root {
 --highlight-color: color(hsl var(--base-color) h calc(s * 1.2) l); /* Використовувати відносний синтаксис кольорів, якщо підтримується */
 }
}

.highlight {
 background-color: var(--highlight-color);
}

У цьому прикладі ми визначаємо резервний колір (#33b5e5), а потім використовуємо правило @supports для перевірки, чи підтримує браузер відносний синтаксис кольорів. Якщо так, ми оновлюємо змінну --highlight-color кольором, згенерованим за допомогою відносного синтаксису. Це гарантує, що користувачі на старих браузерах все одно бачитимуть виділений елемент, навіть якщо його колір не буде точно таким самим, як на нових браузерах.

Міркування щодо доступності

Хоча відносний синтаксис кольорів може бути потужним інструментом для створення візуально привабливих дизайнів, важливо враховувати доступність. Переконайтеся, що створені вами комбінації кольорів забезпечують достатню контрастність для користувачів з вадами зору. Використовуйте такі інструменти, як WebAIM Contrast Checker, щоб перевірити, чи відповідають ваші комбінації кольорів вимогам співвідношення контрастності WCAG AA або AAA.

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

Висновок

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

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

Додаткові матеріали для вивчення

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