CSS oklch() — колір у просторі Oklch

Опис

правити

Загальний опис

правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

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

Функція oklch може отримувати 4 значень:

<lightness>

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

автор: Bond

правити

<chroma>

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

автор: Bond

правити

<hue>

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

автор: Bond

правити

<alpha>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	111	113	15.4	97	111	—

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

Переглядач
	111	111	113	15.4

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1</h2>
  <p>Зміна фонового кольору при наведенні за допомогою функції oklch()</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: oklch(60% 0.4 240);
  transition: background-color 0.3s ease;
}

.box:hover {
  background-color: oklch(90% 0.6 120);
}

<div id="description">
  <h2>Приклад 2</h2>
  <p>Три блоки з різними фоновими кольорами за допомогою функції oklch()</p>
</div>

<div id="result">
  <div class="box" style="background-color: oklch(90% 0.4 240);"></div>
  <div class="box" style="background-color: oklch(100% 0.4 30);"></div>
  <div class="box" style="background-color: oklch(100% 0.3 40);"></div>
</div>

#description {
  background: #ccc;
  padding: 20px;
  font-family: Arial, sans-serif;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}

<div id="description">
  <h2>Однакова світлість: HSL проти Oklch</h2>
  <p>В обох рядах змінюється лише відтінок. Порівняйте, наскільки нерівним виглядає верхній ряд.</p>
</div>

<div id="result">
  <p class="label">hsl(H 100% 50%)</p>
  <div class="row">
    <div class="sw" style="background: hsl(30 100% 50%)"></div>
    <div class="sw" style="background: hsl(60 100% 50%)"></div>
    <div class="sw" style="background: hsl(140 100% 50%)"></div>
    <div class="sw" style="background: hsl(200 100% 50%)"></div>
    <div class="sw" style="background: hsl(260 100% 50%)"></div>
    <div class="sw" style="background: hsl(330 100% 50%)"></div>
  </div>

  <p class="label">oklch(70% 0.15 H)</p>
  <div class="row">
    <div class="sw" style="background: oklch(70% 0.15 30)"></div>
    <div class="sw" style="background: oklch(70% 0.15 60)"></div>
    <div class="sw" style="background: oklch(70% 0.15 140)"></div>
    <div class="sw" style="background: oklch(70% 0.15 200)"></div>
    <div class="sw" style="background: oklch(70% 0.15 260)"></div>
    <div class="sw" style="background: oklch(70% 0.15 330)"></div>
  </div>
</div>

#description {
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 30px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  max-width: 480px;
  margin: 0 auto;
}

.label {
  margin: 18px 0 6px;
  font: 13px/1.4 monospace;
  color: #555;
}

.row {
  display: flex;
}

.sw {
  flex: 1;
  height: 70px;
}