hwb() в CSS — колір за відтінком, білизною й чорнотою
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте
автор: Bondhwb()для визначення кольорів у просторіHWB, що дозволяє вам контролювати відтінок, присутність білого та чорного окремо. - Нотатка
-
Функція
автор: Bondhwb()є важливим інструментом для розробників та дизайнерів, які хочуть створювати сучасні та привабливі веб-сайти. Вона пропонує гнучкість та точність у виборі кольорів, що робить її корисним доповненням до арсеналу кожного спеціаліста у сфері веб-дизайну. - Нотатка
-
Використання функції
автор: Bondhwb()дає можливість контролювати кольорову палітру і створювати власні кольорові схеми. Ви можете використовувати цю функцію, щоб підлаштувати кольори під вимоги вашого дизайну, створювати контрастні комбінації або забезпечити відповідність кольорів бренду.
Синтаксис
hwb(hue, whiteness, blackness);Функція hwb може отримувати 3 значень:
-
<hue> -
Числове значення від
автор: Bond0до360, що визначає відтінок кольору. Уdeg,turnабо тільки числове значення. -
<whiteness> -
Числове значення від
автор: Bond0%до100%, що визначає присутність білого кольору. -
<blackness> -
Числове значення від
автор: Bond0%до100%, що визначає присутність чорного кольору.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 101 | 96 | 15 | 87 | 101 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 101 | 101 | 96 | 15 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на квадрат, щоб змінити його кольору.
HTML
<div id="description">
<h2>Приклад 1: зміна кольору при наведенні</h2>
<p>Наведіть курсор на квадрат, щоб змінити його кольору.</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
font-style: italic;
text-align: center;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
}
.square {
width: 200px;
height: 200px;
background-color: hwb(12 50% 0%);
transition: background-color 0.5s;
}
.square:hover {
background-color: hwb(0.5turn 10% 0%);
}Кожен квадрат має заданий фоновий колір за допомогою hwb().
HTML
<div id="description">
<h2>Використання функції hwb()</h2>
<p>Кожен квадрат має заданий фоновий колір за допомогою hwb().</p>
</div>
<div id="result">
<div class="square"></div>
<div class="square custom-color"></div>
</div>CSS
.square {
width: 200px;
height: 200px;
display: inline-block;
}
.square:not(.custom-color) {
background-color: hwb(194 0% 0%);
}
.square.custom-color {
background-color: hwb(194 50% 20%);
}Перший ряд — чисті тони при нульових домішках, далі два ряди з незалежними ручками: згори додається білого, знизу — чорного. Потім головна пастка — число замість відсотка: hwb(180 0.5 0.2) дає майже чистий бірюзовий, а не розбілений. Далі — сума домішок від 100% і вище, де тон зникає зовсім, замикання тону в коло, затискання понад 100% і плитка з комами, оголошення якої відкинуто.
HTML
<p class="head">Чисті тони: білість і чорнота по нулю, змінюється лише кут:</p>
<div class="row tight">
<span class="sw p0">0</span><span class="sw p1">45</span><span class="sw p2">90</span>
<span class="sw p3">135</span><span class="sw p4">180</span><span class="sw p5">225</span>
<span class="sw p6">270</span><span class="sw p7">315</span>
</div>
<p class="head">Один тон, більше білого — hwb(200 W 0%):</p>
<div class="row tight">
<span class="sw w0">0%</span><span class="sw w1">20%</span><span class="sw w2">40%</span>
<span class="sw w3">60%</span><span class="sw w4">80%</span><span class="sw w5">100%</span>
</div>
<p class="head">Той самий тон, більше чорного — hwb(200 0% B):</p>
<div class="row tight">
<span class="sw k0">0%</span><span class="sw k1">20%</span><span class="sw k2">40%</span>
<span class="sw k3">60%</span><span class="sw k4">80%</span><span class="sw k5">100%</span>
</div>
<p class="head">⚠️ Число — це відсоток, а не частка: 0.5 означає 0.5%, і тон
лишається майже чистим:</p>
<div class="row">
<span class="sw big n1">hwb(180 0.5 0.2)</span>
<span class="sw big n2">hwb(180 0.5% 0.2%)</span>
<span class="sw big n3">hwb(180 50% 20%)</span>
</div>
<p class="head">⚠️ Коли білість і чорнота разом дають 100% і більше, тон зникає:
перші три плитки — це один і той самий сірий, хоча тони в них різні,
а четверта показує, що відтінок сірого задає лише пропорція домішок:</p>
<div class="row">
<span class="sw big s1">hwb(180 60% 60%)</span>
<span class="sw big s2">hwb(120 60% 60%)</span>
<span class="sw big s3">hwb(0 60% 60%)</span>
<span class="sw big s4">hwb(180 20% 90%)</span>
</div>
<p class="head">Тон замикається в коло, а домішки затискаються:</p>
<div class="row">
<span class="sw big c1">hwb(400 0% 0%)</span>
<span class="sw big c2">hwb(40 0% 0%)</span>
<span class="sw big c3">hwb(-60 0% 0%)</span>
<span class="sw big c4">hwb(180 120% 0%)</span>
</div>
<p class="head">Коми ламають оголошення — плитка лишилась сірою заглушкою:</p>
<div class="row">
<span class="sw big bad">hwb(180, 50%, 20%)</span>
</div>CSS
.head {
margin: 18px 0 6px;
max-width: 620px;
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: 90px;
height: 54px;
padding-bottom: 4px;
color: #1c1c1c;
font: 600 11px/1 ui-monospace, monospace;
}
.sw.big {
width: 150px;
height: 62px;
}
.p0 { background: hwb(0 0% 0%); }
.p1 { background: hwb(45 0% 0%); }
.p2 { background: hwb(90 0% 0%); }
.p3 { background: hwb(135 0% 0%); }
.p4 { background: hwb(180 0% 0%); }
.p5 { background: hwb(225 0% 0%); }
.p6 { background: hwb(270 0% 0%); }
.p7 { background: hwb(315 0% 0%); }
.w0 { background: hwb(200 0% 0%); }
.w1 { background: hwb(200 20% 0%); }
.w2 { background: hwb(200 40% 0%); }
.w3 { background: hwb(200 60% 0%); }
.w4 { background: hwb(200 80% 0%); }
.w5 { background: hwb(200 100% 0%); }
.k0 { background: hwb(200 0% 0%); }
.k1 { background: hwb(200 0% 20%); }
.k2 { background: hwb(200 0% 40%); }
.k3 { background: hwb(200 0% 60%); color: #fff; }
.k4 { background: hwb(200 0% 80%); color: #fff; }
.k5 { background: hwb(200 0% 100%); color: #fff; }
.n1 { background: hwb(180 0.5 0.2); }
.n2 { background: hwb(180 0.5% 0.2%); }
.n3 { background: hwb(180 50% 20%); }
.s1 { background: hwb(180 60% 60%); }
.s2 { background: hwb(120 60% 60%); }
.s3 { background: hwb(0 60% 60%); }
.s4 { background: hwb(180 20% 90%); color: #fff; }
.c1 { background: hwb(400 0% 0%); }
.c2 { background: hwb(40 0% 0%); }
.c3 { background: hwb(-60 0% 0%); }
.c4 { background: hwb(180 120% 0%); outline: 1px solid #b9c6d8; }
.bad {
background: #c9ced6;
background-color: hwb(180, 50%, 20%);
}Коментарі
Коментарів ще немає — будьте першим!