CSS oklab() — колір у просторі OKLab
Опис
автор: Bond
Загальний опис
автор: NagarD
- Нотатка
-
Використовуйте функцію
автор: Bondoklab()для створення кольорових палітр з визначеними значеннями яскравості та кольорових компонентів. Вона може бути особливо корисною, коли вам потрібно працювати з кольорами у просторіOklab. - Нотатка
-
Зверніть увагу, що значення яскравості (
автор: BondL) впливає на світлоту або темноту кольору, значення кольорового компонентаaвизначає відтінок між зеленим та червоним, а значення кольорового компонентаbвизначає відтінок між жовтим та синім.
Синтаксис
oklab(<L>, <a>, <b>);Функція oklab може отримувати 3 значень:
-
<L> -
Число від
автор: Bond0до1, яке вказує на яскравість (lightness) кольору. -
<a> -
Число, яке визначає кольоровий компонент
автор: Bonda, може бути будь-яким числом. -
<b> -
Число, яке визначає кольоровий компонент
автор: Bondb, може бути будь-яким числом.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 113 | 15.4 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 113 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на елемент, щоб побачити зміну кольору.
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на елемент, щоб побачити зміну кольору.</p>
</div>
<div id="result">
<div class="box"></div>
</div>CSS
#description {
background: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 150px;
height: 150px;
background-color: oklab(0.5 -0.3 -0.4);
transition: background 0.3s ease;
}
.box:hover {
background-color: oklab(0.7 -0.3 -0.4);
}Другий елемент має фоновий колір, визначений за допомогою функції oklab().
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Другий елемент має фоновий колір, визначений за допомогою функції oklab().</p>
</div>
<div id="result">
<div class="box box-fixed"></div>
<div class="box box-oklab"></div>
</div>CSS
#description {
background: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 150px;
height: 150px;
margin: 10px;
}
.box-fixed {
background: #3498db;
}
.box-oklab {
background-color: oklab(50% 130 20);
}Верхні два ряди — головний аргумент на користь oklab: вісім тонів за сталої oklab(0.7 …) виглядають однаково світлими, а ті самі вісім тонів у hsl(H 100% 50%) стрибають від майже чорного синього до сліпучого жовтого. Далі — сходинка каналу a, де останні дві плитки вже поза охопленням екрана й майже не відрізняються, доказ рівності oklab та oklch, і плитка з комами, оголошення якої відкинуто.
HTML
<p class="head">oklab(0.7 a b) по колу — світлість на око стала:</p>
<div class="row">
<span class="sw k0"></span><span class="sw k1"></span><span class="sw k2"></span><span class="sw k3"></span>
<span class="sw k4"></span><span class="sw k5"></span><span class="sw k6"></span><span class="sw k7"></span>
</div>
<p class="head">hsl(H 100% 50%) — ті самі тони, «однакова світлість» лише на папері:</p>
<div class="row">
<span class="sw s0"></span><span class="sw s1"></span><span class="sw s2"></span><span class="sw s3"></span>
<span class="sw s4"></span><span class="sw s5"></span><span class="sw s6"></span><span class="sw s7"></span>
</div>
<p class="head">Сходинка каналу a за L = 0.6: після ~0.2 екран уже не тягне,
і дві останні плитки майже однакові:</p>
<div class="row">
<span class="sw a0">0</span><span class="sw a1">0.05</span><span class="sw a2">0.1</span>
<span class="sw a3">0.2</span><span class="sw a4">0.4</span><span class="sw a5">0.8</span>
</div>
<p class="head">Той самий колір у двох записах — межі між плитками не видно:</p>
<div class="row tight">
<span class="sw p1">oklab(0.5 0.1 0.2)</span><span class="sw p2">oklch(0.5 0.2236 63.43)</span>
</div>
<p class="head">Коми ламають оголошення — плитка лишилась сірою заглушкою:</p>
<div class="row">
<span class="sw bad">oklab(0.5, 0.1, 0.2)</span>
</div>CSS
.head {
margin: 16px 0 6px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.row.tight {
gap: 0;
}
.sw {
display: flex;
align-items: flex-end;
justify-content: center;
width: 96px;
height: 56px;
padding-bottom: 4px;
color: #fff;
font: 600 11px/1 ui-monospace, monospace;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.k0 { background: oklab(0.7 0.1 0); }
.k1 { background: oklab(0.7 0.0707 0.0707); }
.k2 { background: oklab(0.7 0 0.1); }
.k3 { background: oklab(0.7 -0.0707 0.0707); }
.k4 { background: oklab(0.7 -0.1 0); }
.k5 { background: oklab(0.7 -0.0707 -0.0707); }
.k6 { background: oklab(0.7 0 -0.1); }
.k7 { background: oklab(0.7 0.0707 -0.0707); }
.s0 { background: hsl(0 100% 50%); }
.s1 { background: hsl(45 100% 50%); }
.s2 { background: hsl(90 100% 50%); }
.s3 { background: hsl(135 100% 50%); }
.s4 { background: hsl(180 100% 50%); }
.s5 { background: hsl(225 100% 50%); }
.s6 { background: hsl(270 100% 50%); }
.s7 { background: hsl(315 100% 50%); }
.a0 { background: oklab(0.6 0 0); }
.a1 { background: oklab(0.6 0.05 0); }
.a2 { background: oklab(0.6 0.1 0); }
.a3 { background: oklab(0.6 0.2 0); }
.a4 { background: oklab(0.6 0.4 0); }
.a5 { background: oklab(0.6 0.8 0); }
.p1 {
width: 190px;
background: oklab(0.5 0.1 0.2);
}
.p2 {
width: 190px;
background: oklch(0.5 0.2236 63.43);
}
.bad {
width: 200px;
background: #c9ced6;
color: #333;
text-shadow: none;
background-color: oklab(0.5, 0.1, 0.2);
}Коментарі
Коментарів ще немає — будьте першим!