css.in.ua
Підтримати

CSS function oklch()

Опис

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

Oklch включає три основні компоненти кольору. Компонента lightness представляє яскравість кольору, chroma визначає насиченість, а hue вказує на тон кольору. При потребі можна також задати прозорість за допомогою параметра alpha.

Наприклад, використання функції oklch(50%, 40, 180deg) встановить колір зі середньою яскравістю, помірною насиченістю та відтінком 180 градусів в просторі кольорів Oklch. Цей приклад демонструє відтінок блакитного кольору зі збалансованою яскравістю та насиченістю.

Приклади значень:

  • oklch(50%, 0, 0deg): середня яскравість, без насиченості, червоний колір.
  • oklch(80%, 70, 240deg): висока яскравість, висока насиченість, синій колір.
  • oklch(30%, 50, 120deg, 0.5): низька яскравість, помірна насиченість, зелений колір з полупрозорістю.
Нотатка:

Використовуйте функцію oklch() для отримання кольорів в просторі Oklch, який забезпечує більш однорідну та передбачувану яскравість у порівнянні з RGB або HSL.
Нотатка:

Зверніть увагу, що простір кольорів Oklch базується на моделі Oklab, яка працює у деяких браузерах, але не підтримується в усіх. Перед використанням переконайтесь, що цей простір кольорів підтримується вашою цільовою аудиторією.
Нотатка:

Експериментуйте зі значеннями окомпоненти, сили та відтінку, щоб створити бажані кольори в просторі Oklch.

Синтаксис

oklch(<lightness>, <chroma>, <hue>, <alpha>);
<lightness>

Числове значення в діапазоні від 0% до 100% (наприклад, 50%).

<chroma>

Числове значення без одиниць, зазвичай від 0 до 100, але може бути більшим. Вищі значення дадуть більш насичені кольори.

<hue>

Числове значення з одиницями виміру кута, такими як градуси (deg) або радіани (rad). Зазвичай використовуються значення від 0 до 360 градусів, де 0 відповідає червоному коліру, 120 - зеленому, 240 - синьому.

<alpha>

Числове значення в діапазоні від 0 до 1, де 0 відповідає повній прозорості, а 1 - повній непрозорості.

Переглядачі

Переглядач

111

113

15.4

97

111
Переглядач

111

111

113

15.4

Мобільних переглядачів ще не додано.

Приклади


Зміна фонового кольору при наведенні за допомогою функції oklch().

Три блоки з різними фоновими кольорами за допомогою функції oklch().

Спільнота

Зв'язок