CSS lch() — колір через яскравість, хрому й тон
Опис
автор: Bond
Загальний опис
автор: NagarD
- Нотатка
-
Функція
автор: Bondlch()може бути корисною для створення гармонійних кольорових схем, де ви можете експериментувати зі значеннями яскравості, насиченості та тону, зберігаючи певну візуальну зв'язність між кольорами. - Нотатка
-
Зверніть увагу, що значення яскравості (
автор: Bondl) впливає на світлоту або темноту кольору, значення насиченості (c) впливає на насиченість кольору, а значення тону (h) визначає відтінок кольору на колірному колесі. - Нотатка
-
Використання функції
автор: Bondlch()разом з іншими CSS функціями та властивостями може допомогти досягти більш гнучкого та точного керування кольорами в вашому веб-дизайні.
Синтаксис
lch(<l>, <c>, <h>);Функція lch може отримувати 3 значень:
-
<l> -
Число від
автор: Bond0до100%, яке вказує на яскравість (lightness) кольору. -
<c> -
Число від
автор: Bond0до100%, що визначає насиченість (chroma) кольору. -
<h> -
Значення тону (
автор: Bondhue) може бути виражене як кут в градусах без одиниць.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 113 | 15 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 113 | 15 |
Приклади
+ запропонувати свій приклад у пісочниці
Другий елемент має фоновий колір, визначений за допомогою функції lch().
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Другий елемент має фоновий колір, визначений за допомогою функції lch().</p>
</div>
<div id="result">
<div class="box box-fixed"></div>
<div class="box box-lch"></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-lch {
background-color: lch(50% 130 20);
}Наведіть курсор на елемент, щоб побачити зміну кольору.
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: lch(50% 130 20);
transition: background 0.3s ease;
}
.box:hover {
background-color: lch(20% 75 70);
}Верхній ряд — тони lch за сталих L і C: усі плитки однаково світлі. Нижній — ті самі тони в hsl за сталої світлості 50%: жовта сліпить, синя майже чорна. Далі — сходинка хроми, де останні дві плитки вже поза охопленням екрана й тому майже не відрізняються, і пара «хрома 0» — той самий сірий за різних тонів.
HTML
<p class="head">lch(60% 50 H) — тон міняється, світлість на око стала:</p>
<div class="row">
<span class="sw a0">0</span><span class="sw a1">60</span><span class="sw a2">120</span>
<span class="sw a3">180</span><span class="sw a4">240</span><span class="sw a5">300</span>
</div>
<p class="head">hsl(H 100% 50%) — ті самі тони, світлість «стала» лише на папері:</p>
<div class="row">
<span class="sw b0">0</span><span class="sw b1">60</span><span class="sw b2">120</span>
<span class="sw b3">180</span><span class="sw b4">240</span><span class="sw b5">300</span>
</div>
<p class="head">lch(50% C 120) — сходинка хроми; після ~90 екран уже не тягне:</p>
<div class="row">
<span class="sw c0">0</span><span class="sw c1">30</span><span class="sw c2">60</span>
<span class="sw c3">90</span><span class="sw c4">120</span><span class="sw c5">150</span>
</div>
<p class="head">Хрома 0 — тон не має значення взагалі:</p>
<div class="row">
<span class="sw d0">lch(50% 0 20)</span>
<span class="sw d1">lch(50% 0 200)</span>
</div>
<p class="head">Коми ламають оголошення — плитка лишається сірою заглушкою:</p>
<div class="row">
<span class="sw bad">lch(50%, 75, 120)</span>
</div>CSS
.head {
margin: 16px 0 6px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sw {
display: flex;
align-items: flex-end;
justify-content: center;
width: 92px;
height: 56px;
padding-bottom: 4px;
color: #fff;
font: 600 12px/1 ui-monospace, monospace;
text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.a0 { background: lch(60% 50 0); }
.a1 { background: lch(60% 50 60); }
.a2 { background: lch(60% 50 120); }
.a3 { background: lch(60% 50 180); }
.a4 { background: lch(60% 50 240); }
.a5 { background: lch(60% 50 300); }
.b0 { background: hsl(0 100% 50%); }
.b1 { background: hsl(60 100% 50%); }
.b2 { background: hsl(120 100% 50%); }
.b3 { background: hsl(180 100% 50%); }
.b4 { background: hsl(240 100% 50%); }
.b5 { background: hsl(300 100% 50%); }
.c0 { background: lch(50% 0 120); }
.c1 { background: lch(50% 30 120); }
.c2 { background: lch(50% 60 120); }
.c3 { background: lch(50% 90 120); }
.c4 { background: lch(50% 120 120); }
.c5 { background: lch(50% 150 120); }
.d0 { background: lch(50% 0 20); }
.d1 { background: lch(50% 0 200); }
.bad {
width: 190px;
background: #c9ced6;
color: #333;
text-shadow: none;
background-color: lch(50%, 75, 120);
}Коментарі
Коментарів ще немає — будьте першим!