CSS color-mix() — змішування двох кольорів
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Експериментуйте з різними методами інтерполяції кольорів та відсотками, щоб досягти бажаного ефекту змішування кольорів.
автор: Bond
Синтаксис
color-mix(<method>, <color1> [ <p1> ] [ <color2> [ <p2> ] ]);Функція color-mix може отримувати 3 значень:
-
<method> -
Вказує простір кольорів та метод інтерполяції. Приймає значення:
автор: Bondin srgb,in srgb-linear,in lab,in oklab,in xyz,in xyz-d50,in xyz-d65,in hsl,in hwb,in lch,in oklch. -
<color1>, <color2> -
Параметри, що визначають кольори, які треба змішати. Приймають значення відповідно до формату кольору, наприклад,
автор: Bond#34c9eb,red,rgb(255, 0, 0), тощо. -
<p1>, <p2> -
Відсоток кожного кольору для змішування. Приймають значення від
автор: Bond0%до100%.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 111 | 113 | 16.2 | 97 | 111 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 111 | 111 | 113 | 16.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Другий квадрат змішує колір використовуючи функцію color-mix().
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Перший квадрат не застосовує функцію, а другий квадрат змішує колір відповідно до функції color-mix().</p>
</div>
<div id="result">
<div class="square"></div>
<div class="square mixed"></div>
</div>CSS
#description {
background: #eee;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.square {
width: 150px;
height: 150px;
margin-right: 20px;
background-color: #34c9eb;
}
.square.mixed {
background-color: color-mix(in srgb, #34c9eb 40%, white);
}Наведіть курсор на квадрат, щоб побачити ефект зміни кольору.
HTML
<div id="description">
<h2>Приклад 1</h2>
<p>Наведіть курсор на квадрат, щоб побачити ефект зміни кольору.</p>
</div>
<div id="result">
<div class="square"></div>
</div>CSS
#description {
background: #eee;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.square {
width: 150px;
height: 150px;
background-color: color-mix(in srgb, #654aaa, white);
transition: background-color 0.3s ease;
}
.square:hover {
background-color: color-mix(in srgb, #654aaa 70%, white);
}Той самий перехід від червоного до синього в двох просторах. У in srgb середина темна й брудна, у in oklch світлота тримається, а тон іде найкоротшою дугою — через рожевий.
HTML
<p>in srgb — 0%, 25%, 50%, 75%, 100% синього:</p>
<div class="row">
<div class="sw srgb s0"></div>
<div class="sw srgb s1"></div>
<div class="sw srgb s2"></div>
<div class="sw srgb s3"></div>
<div class="sw srgb s4"></div>
</div>
<p>in oklch — ті самі відсотки:</p>
<div class="row">
<div class="sw ok s0"></div>
<div class="sw ok s1"></div>
<div class="sw ok s2"></div>
<div class="sw ok s3"></div>
<div class="sw ok s4"></div>
</div>
<p class="tint">Змішування з <code>transparent</code>: підсвітка з кольору тексту.</p>CSS
body {
font-family: sans-serif;
font-size: 15px;
padding: 24px;
}
.row {
display: flex;
gap: 8px;
margin-bottom: 18px;
}
.sw {
width: 92px;
height: 64px;
border: 1px solid #cfd4d9;
}
.srgb.s0 { background: color-mix(in srgb, red, blue 0%); }
.srgb.s1 { background: color-mix(in srgb, red, blue 25%); }
.srgb.s2 { background: color-mix(in srgb, red, blue 50%); }
.srgb.s3 { background: color-mix(in srgb, red, blue 75%); }
.srgb.s4 { background: color-mix(in srgb, red, blue 100%); }
.ok.s0 { background: color-mix(in oklch, red, blue 0%); }
.ok.s1 { background: color-mix(in oklch, red, blue 25%); }
.ok.s2 { background: color-mix(in oklch, red, blue 50%); }
.ok.s3 { background: color-mix(in oklch, red, blue 75%); }
.ok.s4 { background: color-mix(in oklch, red, blue 100%); }
.tint {
color: #1f5f8b;
padding: 12px 14px;
background: color-mix(in srgb, currentColor 12%, transparent);
}Коментарі
Коментарів ще немає — будьте першим!