CSS lab() — колір у просторі CIE Lab

Опис

автор: Bond

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

автор: NagarD

Порада

Використовуйте функцію lab() для створення кольорових палітр з визначеними значеннями яскравості та кольорових компонентів. Вона може бути особливо корисною, коли вам потрібно працювати з кольорами у просторі LAB.

автор: Bond
Нотатка

Зверніть увагу, що значення яскравості (l) впливає на світлоту або темноту кольору, значення кольорового компонента a визначає відтінок між зеленим та червоним, а значення кольорового компонента b визначає відтінок між жовтим та синім.

автор: Bond
Нотатка

Функція lab() може бути використана разом з іншими CSS властивостями та функціями для досягнення більш точного контролю кольорів у вашому веб-дизайні.

автор: Bond

Синтаксис

lab(<l>, <a>, <b>);

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

<l>

Число від 0 до 100%, яке вказує на яскравість (lightness) кольору.

автор: Bond

<a>

Число, яке визначає кольоровий компонент a, зазвичай в діапазоні від -128 до 127.

автор: Bond

<b>

Число, яке визначає кольоровий компонент b, зазвичай в діапазоні від -128 до 127.

автор: Bond

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
111 113 15 97 111 —
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
111 111 113 15

Приклади

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

Другий елемент має фоновий колір, визначений за допомогою функції lab().

HTML

<div id="description">
  <h2>Приклад 2</h2>
  <p>Другий елемент має фоновий колір, визначений за допомогою функції lab().</p>
</div>

<div id="result">
  <div class="box box-fixed"></div>
  <div class="box box-lab"></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-lab {
  background-color: lab(100 125 125);
}
автор: Bond

Наведіть курсор на елемент, щоб побачити зміну кольору.

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: lab(75% -120 10);
  transition: background 0.3s ease;
}

.box:hover {
  background-color: lab(75% -120 125);
}
автор: Bond

Угорі — площина a × b за сталої світлості 60%: рухаючись праворуч, колір червоніє, донизу — жовтіє, у центрі сірий. Нижче — сходинка самої лише світлості за незмінних a і b, доказ, що lab(50% -37.5 64.95) і lch(50% 75 120) — той самий колір, і три градієнти від синього до жовтого: у sRGB середина сіріє, а in lab та in oklab ведуть колір іншим шляхом, і сірої зони там немає.

HTML

<p class="head">lab(60% a b): по горизонталі a від -60 до 60, по вертикалі b від -60 до 60</p>
<div class="plane">
    <span class="p p11"></span><span class="p p12"></span><span class="p p13"></span><span class="p p14"></span><span class="p p15"></span>
    <span class="p p21"></span><span class="p p22"></span><span class="p p23"></span><span class="p p24"></span><span class="p p25"></span>
    <span class="p p31"></span><span class="p p32"></span><span class="p p33"></span><span class="p p34"></span><span class="p p35"></span>
    <span class="p p41"></span><span class="p p42"></span><span class="p p43"></span><span class="p p44"></span><span class="p p45"></span>
    <span class="p p51"></span><span class="p p52"></span><span class="p p53"></span><span class="p p54"></span><span class="p p55"></span>
</div>

<p class="head">Міняємо лише L — тон не пливе:</p>
<div class="row">
    <span class="sw l1">20%</span><span class="sw l2">40%</span><span class="sw l3">60%</span>
    <span class="sw l4">80%</span><span class="sw l5">95%</span>
</div>

<p class="head">Той самий колір у двох записах — межі між плитками немає:</p>
<div class="row tight">
    <span class="sw eq-lab">lab(50% -37.5 64.95)</span>
    <span class="sw eq-lch">lch(50% 75 120)</span>
</div>

<p class="head">Синій → жовтий у трьох просторах: у sRGB середина сіріє</p>
<div class="g srgb">типовий sRGB</div>
<div class="g glab">in lab</div>
<div class="g goklab">in oklab</div>

<p class="head">Коми — оголошення відкинуто:</p>
<div class="row">
    <span class="sw bad">lab(50%, 20, -30)</span>
</div>

CSS

.head {
    margin: 18px 0 6px;
    color: #5a6472;
    font-size: .9em;
}

.plane {
    display: grid;
    grid-template-columns: repeat(5, 56px);
    width: 280px;
}

.p {
    height: 42px;
}

.p11 { background: lab(60% -60 -60); }
.p12 { background: lab(60% -30 -60); }
.p13 { background: lab(60% 0 -60); }
.p14 { background: lab(60% 30 -60); }
.p15 { background: lab(60% 60 -60); }
.p21 { background: lab(60% -60 -30); }
.p22 { background: lab(60% -30 -30); }
.p23 { background: lab(60% 0 -30); }
.p24 { background: lab(60% 30 -30); }
.p25 { background: lab(60% 60 -30); }
.p31 { background: lab(60% -60 0); }
.p32 { background: lab(60% -30 0); }
.p33 { background: lab(60% 0 0); }
.p34 { background: lab(60% 30 0); }
.p35 { background: lab(60% 60 0); }
.p41 { background: lab(60% -60 30); }
.p42 { background: lab(60% -30 30); }
.p43 { background: lab(60% 0 30); }
.p44 { background: lab(60% 30 30); }
.p45 { background: lab(60% 60 30); }
.p51 { background: lab(60% -60 60); }
.p52 { background: lab(60% -30 60); }
.p53 { background: lab(60% 0 60); }
.p54 { background: lab(60% 30 60); }
.p55 { background: lab(60% 60 60); }

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.row.tight {
    gap: 0;
}

.sw {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 108px;
    height: 52px;
    padding-bottom: 4px;
    color: #fff;
    font: 600 11px/1 ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.l1 { background: lab(20% 30 -40); }
.l2 { background: lab(40% 30 -40); }
.l3 { background: lab(60% 30 -40); }
.l4 { background: lab(80% 30 -40); }
.l5 { background: lab(95% 30 -40); }

.eq-lab { background: lab(50% -37.5 64.95); }
.eq-lch { background: lch(50% 75 120); }

.g {
    margin-bottom: 6px;
    padding: 8px;
    width: 320px;
    color: #fff;
    font: 600 12px/1 ui-monospace, monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.srgb { background: linear-gradient(to right, #0000ff, #ffff00); }
.glab { background: linear-gradient(in lab to right, #0000ff, #ffff00); }

.goklab { background: linear-gradient(in oklab to right, #0000ff, #ffff00); }

.bad {
    width: 190px;
    background: #c9ced6;
    color: #333;
    text-shadow: none;
    background-color: lab(50%, 20, -30);
}
автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід