# CSS color-mix(): värien sekoittaminen selaimessa

[Canonical HTML page](https://gradiently.design/fi/guide/css-color-mix)

color-mix() siirtää selaimelle värilaskut, jotka ennen teit esikäsittelijällä tai silmämääräisesti. Oikealla väriavaruudella yhdestä brändiväristä syntyy vaaleat, tummat ja läpikuultavat sävyt.

## The short version

- CSS color-mix() sekoittaa kaksi väriä nimetyssä väriavaruudessa, kuten color-mix(in oklab, #7c3aed 40%, white).
- Jos annat yhden prosentin, toinen väri saa loput. Ilman prosentteja sekoitus on puoliksi kumpaakin.
- oklab pitää koetun vaaleuden tasaisena ja välttää sRGB-sekoituksen etäisten sävyjen harmaat keskikohdat.
- Sekoitus transparent-arvoon tekee selkeimmin läpikuultavan version mukautettuun ominaisuuteen tallennetusta väristä.
- color-mix() toimii kaikissa nykyisissä suurissa selaimissa. Tasainen varaväri kattaa hyvin vanhat selaimet.

**CSS color-mix()**, eli `color-mix()`, sekoittaa kaksi väriä valitsemassasi väriavaruudessa ja palauttaa uuden värin. `color-mix(in oklab, #7c3aed 40%, white)` tuottaa vaalean violetin: 40 % violettia ja 60 % valkoista havaintoon perustuen. Se toimii kaikissa nykyisissä suurissa selaimissa. Mukautettujen ominaisuuksien kanssa yhdestä brändiväristä syntyvät vaalennukset, tummennukset, osoitintilat ja läpikuultavat peitteet ilman erikseen kovakoodattuja heksavärejä.

## color-mix()-syntaksi

```css
/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }
```

Väriavaruus kirjoitetaan ensin. Sävyyn perustuvat oklch ja hsl hyväksyvät myös suunnan: shorter, longer, increasing tai decreasing.

| Kirjoitat | Selain käyttää | Huomautus |
| --- | --- | --- |
| Ei prosentteja | 50 % ja 50 % | Tasainen sekoitus |
| Yksi prosentti, esimerkiksi 30 % | 30 % ja 70 % | Toinen väri saa loput |
| Kaksi, joiden summa on 100 % | Kirjoitetut arvot | Selkein muoto myöhemmin luettavaksi |
| Kaksi, joiden summa ylittää 100 % | Skaalataan 100 %:iin | 60 % ja 60 % vastaa 50 % ja 50 % |
| Kaksi, joiden summa alittaa 100 % | Skaalataan ylös ja tehdään läpikuultavaksi | 20 % ja 30 % tuottaa puolipeittävän tuloksen |

Prosenttien käsittely. Viimeinen rivi yllättää: alle 100:n summa tekee tuloksesta osittain läpinäkyvän.

## Mikä väriavaruus kannattaa valita

Väriavaruus määrää reitin värien välillä. sRGB keskiarvoistaa punaisen, vihreän ja sinisen luvut, mikä on helppo ymmärtää mutta ei vastaa silmän havaintoa. Kaukaiset sävyt kulkevat harmaan läpi. oklab seuraa koettua vaaleutta ja väriä, joten keskikohta säilyy puhtaana ja askeleet tasaisina. [Liukuvärin interpolointi](https://gradiently.design/fi/guide/gradient-interpolation) näyttää saman valinnan liukuväreissä, joissa ero näkyy helpoimmin.

- sRGB: harmaa keskikohta: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: vaaleampi, puhtaampi keskikohta: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: syaanin ja vihreän kautta: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Sinisestä keltaiseen kolmessa avaruudessa. Keskikohta vastaa color-mix()-tulosta 50 %:lla: sRGB:ssä #808080, oklabissa vaalea siniharmaa.

- **oklab** vaalennuksiin, tummennuksiin ja arkiseen sekoitukseen. Tasainen vaaleus ilman harmaata notkahdusta.
- **oklch** kun haluat sävyn kiertävän, esimerkiksi yhdistää brändivärit niiden väliin väriympyrällä sijoittuvaksi kolmanneksi.
- **srgb** transparent-sekoitukseen tai vanhojen sRGB:ssä sekoittavien suunnittelutyökalujen vastaavuuteen.
- **srgb-linear** fysikaaliseen valosekoitukseen, jonka keskikohta näyttää kirkkaammalta.

[OKLCH selitettynä](https://gradiently.design/fi/guide/oklch-explained) kertoo, miksi havaintoon perustuvat avaruudet toimivat paremmin. Uudempi määrittely sallii avaruuden pois jättämisen ja olettaa oklabin. Lyhenteen tuki on tuoreempi, joten kirjoita `in oklab` näkyviin.

## Vaaleat ja tummat sävyt yhdestä brändiväristä

Hyödyllisin malli on yhden muuttujan asteikko. Sekoita valkoiseen vaalentaaksesi, mustaan tummentaaksesi. Muuttujan vaihto päivittää kaiken, joten malli sopii monibrändituotteisiin ja käyttäjän valitsemiin teemoihin.

```css
:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}
```

Seitsemän askelta yhdestä väristä. Vaihda --brand mihin tahansa heksaväriin, niin asteikko seuraa.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

Yllä olevan asteikon oklab-tulos värille #7c3aed. sRGB:ssä vaalennukset ovat harmaampia ja tummennukset tasaisempia.

Valkoinen ja musta ovat lähtökohta. Lämpimämpiin vaalennuksiin sekoita luonnonvalkoiseen kuten `#fdf6ec`, rikkaampiin tummennuksiin syvään laivastonsiniseen mustan sijaan. Asteikko säilyy brändisi näköisenä yleisen värirampin sijaan. [Vaaleat, murretut ja tummat sävyt](https://gradiently.design/fi/guide/tints-tones-shades) kertoo teoriasta.

## Läpinäkyvyys color-mix()-funktiolla

Ennen `color-mix()`-funktiota muuttujavärin läpikuultava versio vaati kanavien erillistä tallennusta. Nyt sekoitat `transparent`-arvoon. Säilyttämäsi määrä on peittävyys.

```css
.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}
```

Sävytetty tunniste ja osoitintila samasta muuttujasta. Ei toista ylläpidettävää väriä.

## Tavalliset color-mix()-virheet

- **Väriavaruuden pois jättäminen** vanhoille selaimille tarkoitetussa koodissa. Koko määrittely hylätään.
- **Kaikkien tummennusten sekoittaminen mustaan.** Kylläiset värit sameutuvat. Valitse mieluummin saman sävyn tumma versio.
- **Alle 100:n prosenttisumman odottaminen peittäväksi.** `color-mix(in oklab, red 20%, blue 30%)` on puoliksi läpinäkyvä.
- **hsl:n käyttö vaalennuksiin.** Sen vaaleus ei vastaa havaintoa, joten samalla sekoituksella keltainen ja sininen näyttävät aivan eri askelilta.

## Selain­tuki ja varaversiot

`color-mix()` on ollut Chromessa, Edgessä, Firefoxissa ja Safarissa vuodesta 2023. Nykyinen tuki löytyy [caniuse-palvelusta](https://caniuse.com/mdn-css_types_color_color-mix). Hyvin vanhoille selaimille määritä ensin tasainen väri ja anna sekoituksen ohittaa se. Toista riviä ymmärtämätön selain sivuuttaa sen.

```css
.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}
```

Varaversio ensin, parannus sitten. Kaskadi hoitaa loput.

Näihin malleihin perustuva kokonainen vaalea ja tumma teema löytyy artikkelista [CSS-muuttujat teemoissa](https://gradiently.design/fi/guide/css-custom-properties-theming).

## Värien sekoittaminen liukuväreihin

`color-mix()` voi laskea liukuvärin keskimmäisen pisteen kahdesta brändiväristä sameuden välttämiseksi. `linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b))` antaa kolmannen pisteen sävyreitillä. [Sameat liukuvärit](https://gradiently.design/fi/guide/muddy-gradients) käsittelee ongelmaa.

Jos brändivärisi on Gradientlyn Markissa, reseptissä on jo yhdessä toimiva lähivärien perhe. Markkinoilla voit hakea värisanoilla kuten ”deep violet” ja löytää lähtösävysi ympärille rakennetun Markin.

## FAQ

### Mitä color-mix() tekee CSS:ssä?

Se sekoittaa kaksi väriä nimeämässäsi väriavaruudessa ja palauttaa tuloksen, kuten `color-mix(in oklab, red 30%, white)`.

### Mitä väriavaruutta käytän color-mix()-funktiossa?

oklab vaalennuksiin, tummennuksiin ja useimpiin sekoituksiin, oklch sävyn kiertämiseen ja srgb transparent-sekoitukseen.

### Miten teen väristä läpinäkyvän color-mix()-funktiolla?

Sekoita `transparent`-arvoon: `color-mix(in srgb, var(--brand) 20%, transparent)` antaa brändivärin 20 %:n peittävyydellä.

### Tukevatko kaikki selaimet color-mix()-funktiota?

Nykyiset Chrome, Edge, Firefox ja Safari tukevat sitä. Määritä ensin tasainen väri vanhojen selainten varalle.

### Mitä tapahtuu, jos prosentit eivät summaudu sataan?

Yli 100:n summat skaalataan alas. Alle 100:n summat skaalataan ylös ja tuloksesta tulee osittain läpinäkyvä.