Funkcja CSSFunkcje i jednostki

color-mix()

Miesza dwa kolory w podanych proporcjach i wybranej przestrzeni barw. Tworzy jaśniejsze, ciemniejsze i półprzezroczyste warianty.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Typowe mieszanki
Typowe mieszanki w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

:root {
  --brand: #7c3aed;
}

.btn {
  border: 1px solid color-mix(in oklch, var(--brand), white 35%);
  background: var(--brand);
}

.btn:hover {
  background: color-mix(in oklch, var(--brand), black 20%);
}

.btn.soft {
  background: color-mix(in oklch, var(--brand) 18%, transparent);
  color: color-mix(in oklch, var(--brand), white 50%);
}

HTML przykładu

<div style="display: flex; flex-wrap: wrap; gap: 12px;">
  <button class="btn" type="button" style="padding: 10px 18px; border-radius: 10px; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer; transition: background-color 0.2s;">Zapisz</button>
  <button class="btn soft" type="button" style="padding: 10px 18px; border-radius: 10px; font: 600 15px system-ui, sans-serif;">Anuluj</button>
</div>

Podgląd

Najedź na pierwszy przycisk. Potem kliknij „Edytuj” i zmień --brand na dowolny kolor: obramowanie, stan po najechaniu i miękki wariant przeliczą się same.

Definicja i zastosowanie

Funkcja color-mix() działa jak mieszanie farb na palecie. Podajesz przestrzeń barw, w której odbędzie się mieszanie, i dwa kolory z opcjonalnymi procentami: color-mix(in srgb, #7c3aed 70%, white) to 70% fioletu i 30% bieli, czyli jaśniejszy fiolet.

Procenty są elastyczne. Jeśli podasz jeden, drugi kolor dostaje resztę do 100%, a bez procentów kolory mieszają się pół na pół. Mieszanie z transparent daje przezroczystość: color-mix(in srgb, #7c3aed 40%, transparent) to ten sam fiolet o kryciu 40%. Gdy procenty sumują się do mniej niż 100%, wynik również staje się częściowo przezroczysty.

Przestrzeń barw zmienia wynik. W srgb mieszanie działa jak nakładanie świateł na ekranie, ale kolory pośrednie bywają szarawe. W oklch albo oklab przejścia są bardziej naturalne i zachowują nasycenie. Przestrzeń warto podawać zawsze, bo starsze przeglądarki bez niej odrzucą całą deklarację.

Najwięcej zyskujesz w połączeniu ze zmiennymi. Z jednego koloru marki wyprowadzisz całą rodzinę: tło (color-mix(in oklch, var(--brand) 15%, transparent)), obramowanie i stan po najechaniu (color-mix(in oklch, var(--brand), black 20%)), bez wpisywania kolejnych kodów kolorów.

Składnia

color-mix(in <przestrzeń barw>, <kolor> <procent>?, <kolor> <procent>?)

Typowe mieszanki

#7c3aed 60%, white
jaśniejszy wariant
Fiolet z domieszką 40% bieli. Tak powstają jasne odcienie na tła i podświetlenia.
#7c3aed 70%, black
ciemniejszy wariant
30% czerni przyciemnia kolor, np. na stan przycisku po najechaniu.
#7c3aed 40%, transparent
półprzezroczysty
Mieszanie z przezroczystością daje ten sam fiolet o kryciu 40%. Przez wynik prześwituje szachownica.
#7c3aed, #0ea5e9
pół na pół
Bez procentów kolory mieszają się po równo. Wynik leży w połowie drogi między fioletem a błękitem.
in srgb
szarawy środek
Róż i zieleń zmieszane w sRGB dają szarobrązowy kolor, bo środek drogi między nimi wypada blisko szarości.
in oklch
żywy środek
Te same kolory zmieszane w OKLCH. Przeglądarka przechodzi po kole barw, więc wychodzi nasycony złoty zamiast szarości.

Składniki	Wynik	Opis
#7c3aed 60%, white	jaśniejszy wariant	Fiolet z domieszką 40% bieli. Tak powstają jasne odcienie na tła i podświetlenia.
#7c3aed 70%, black	ciemniejszy wariant	30% czerni przyciemnia kolor, np. na stan przycisku po najechaniu.
#7c3aed 40%, transparent	półprzezroczysty	Mieszanie z przezroczystością daje ten sam fiolet o kryciu 40%. Przez wynik prześwituje szachownica.
#7c3aed, #0ea5e9	pół na pół	Bez procentów kolory mieszają się po równo. Wynik leży w połowie drogi między fioletem a błękitem.
in srgb	szarawy środek	Róż i zieleń zmieszane w sRGB dają szarobrązowy kolor, bo środek drogi między nimi wypada blisko szarości.
in oklch	żywy środek	Te same kolory zmieszane w OKLCH. Przeglądarka przechodzi po kole barw, więc wychodzi nasycony złoty zamiast szarości.

Typowe mieszanki w praktyce

#7c3aed 60%, white

Fiolet z domieszką 40% bieli. Tak powstają jasne odcienie na tła i podświetlenia.

.demo {
  background: color-mix(in srgb, #7c3aed 60%, white);
}

#7c3aed 70%, black

30% czerni przyciemnia kolor, np. na stan przycisku po najechaniu.

.demo {
  background: color-mix(in srgb, #7c3aed 70%, black);
}

#7c3aed 40%, transparent

Mieszanie z przezroczystością daje ten sam fiolet o kryciu 40%. Przez wynik prześwituje szachownica.

.demo {
  background:
    color-mix(in srgb, #7c3aed 40%, transparent);
}

#7c3aed, #0ea5e9

Bez procentów kolory mieszają się po równo. Wynik leży w połowie drogi między fioletem a błękitem.

.demo {
  background: color-mix(in srgb, #7c3aed, #0ea5e9);
}

in srgb

Róż i zieleń zmieszane w sRGB dają szarobrązowy kolor, bo środek drogi między nimi wypada blisko szarości.

.demo {
  background: color-mix(in srgb, #f43f5e, #10b981);
}

in oklch

Te same kolory zmieszane w OKLCH. Przeglądarka przechodzi po kole barw, więc wychodzi nasycony złoty zamiast szarości.

.demo {
  background: color-mix(in oklch, #f43f5e, #10b981);
}

Więcej przykładów

Obramowanie i tło wyliczone z koloru tekstu

CSS

.tag {
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

HTML przykładu

<style>
  .tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600; }
</style>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
  <span class="tag" style="color: #a78bfa;">HTML</span>
  <span class="tag" style="color: #38bdf8;">CSS</span>
  <span class="tag" style="color: #fbbf24;">JavaScript</span>
</div>

Podgląd

Każda etykieta ustawia tylko color. Obramowanie i tło powstają z koloru tekstu dzięki słowu currentColor.

Obsługa przeglądarek

Szeroko dostępne · od 2023 roku

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Mieszając dwie różne barwy, wybieraj in oklch albo in oklab. W srgb kolory pośrednie potrafią wyjść szarawe, jak w demonstracji wyżej.
Mieszanie z transparent to najprostszy sposób na półprzezroczystą wersję koloru ze zmiennej, nawet gdy zmienna zawiera kod hex.
Procent możesz podać przy dowolnym kolorze: color-mix(in oklch, var(--brand), white 30%) to 70% koloru marki i 30% bieli.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs