# CSS color-mix() ja suhteelliset värit: vaaleat vivahteet, hover ja läpinäkyvyys

color-mix() sekoittaa kaksi väriä valitsemassasi väriavaruudessa, ja suhteellisella värisyntaksilla voit muuttaa olemassa olevan värin yhtä kanavaa, esimerkiksi oklch(from var(--brand) calc(l - 0.1) c h). Molemmat toimivat selaimessa, sopivat yhteen CSS-muuttujien kanssa ja korvaavat useimmat Sassin värifunktiot. Sekoita oklabissa vaaleat vivahteet ja hover-tilat, srgb:ssä läpinäkyvyys.

Lähde: https://pickshade.com/fi/css-color-mix
Päivitetty: 2026-09-28

## Näin color-mix() toimii

color-mix() saa väriavaruuden ja kaksi väriä, joille voi antaa prosenttiosuudet, ja palauttaa niiden välissä olevan värin. color-mix(in oklab, var(--brand) 90%, black) tarkoittaa 90 % brändiväriä ja 10 % mustaa Oklabissa sekoitettuna. Jos annat vain yhden prosentin, toinen väri saa loput. Jos et anna yhtään, kumpikin saa 50 %.

Selain laskee tuloksen ajon aikana, joten se toimii CSS-muuttujien, currentColorin ja teemanvaihdon kanssa. Sassin funktiot ajetaan kerran käännösvaiheessa, eivätkä ne näe var()-arvoja.

Jos prosenttien summa jää alle 100 %:n, tuloksesta tulee myös osittain läpinäkyvä: color-mix(in srgb, red 30%, blue 30%) on tasainen sekoitus 60 %:n peittävyydellä. Pidä summa 100 %:ssa, ellet halua juuri tätä.

```css
.button {
    --brand: #2563eb;
    background: var(--brand);
}

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

.badge {
    background: color-mix(in oklab, var(--brand) 10%, white);
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
```

## Missä väriavaruudessa sekoittaa: srgb, oklab vai oklch

Väriavaruus vaikuttaa tulokseen enemmän kuin useimmat odottavat. Alla puhdas sininen #0000ff on sekoitettu puoliksi puhtaan keltaisen #ffff00 kanssa samalla matematiikalla, jota selain käyttää.

srgb:ssä kanavien keskiarvo on tasan 128, 128, 128: sekoitus on #808080, harmaa, jonka kroma on nolla. Myös Oklab sekoittaa suoraa linjaa pitkin, ja sininen ja keltainen ovat sen vastakkaisilla puolilla, joten ne enimmäkseen kumoavat toisensa ja tuloksena on vaisu harmaansininen. Oklch interpoloi sen sijaan sävyn kulmaa ja kulkee lyhyintä reittiä 264°:sta 110°:seen, joten keskikohta on kirkas sinivihreä sävyllä 187°, ja se säilyttää molempien lähtövärien kroman.

- Sininen #0000ff: #0000ff
- Keltainen #ffff00: #ffff00
- srgb: #808080: #808080
- oklab: #6cabc7: #6cabc7
- oklch: #00bdb0: #00bdb0

| Avaruus | Sininen + keltainen | OKLCH L, C | Blue-600 + yellow-400 | OKLCH L, C |
| --- | --- | --- | --- | --- |
| srgb | #808080 | 0.600, 0 | #909880 | 0.665, 0.035 |
| oklab | #6cabc7 | 0.710, 0.077 | #90a3ad | 0.703, 0.026 |
| oklch | #00bdb0 | 0.710, 0.262 | #00bd9e | 0.703, 0.194 |

Toinen pari on Tailwindin #2563eb ja #facc15. Oklch-tulokset ovat sRGB:n ulkopuolella, joten kroma näytetään ennen värialueelle sovittamista, ja HEX-koodi on lähin väri, jonka sRGB-näyttö pystyy näyttämään.

Kaksi asiaa erottuu. srgb päätyy vaaleuteen 0,600, vaikka sinisen (0,452) ja keltaisen (0,968) havaittu keskikohta on 0,710: tästä johtuu srgb-liukuvärien tumma ja sotkuinen keskiosa. Lisäksi vain oklch pitää sekoituksen kirkkaana, mutta sen hintana on sävy, jota kummassakaan lähtövärissä ei ole.

Nyrkkisääntö: sekoita oklabissa vaaleat ja tummat vivahteet sekä hover-tilat, kun pysyt yhdessä sävyssä ja haluat tasaiset vaaleusaskeleet. Sekoita oklch:ssa, kun molemmat värit ovat kylläisiä ja haluat kylläisen tuloksen. Sekoita srgb:ssä läpinäkyvyys, koska se vastaa tapaa, jolla selain yhdistää kerrokset.

## Reseptit: hover, vaaleat vivahteet ja läpinäkyvät versiot

Kaikissa alla olevissa arvoissa --brand on #2563eb. Valkoisen tekstin kontrastisuhde sen päällä on 5,17:1.

10 % mustaa tummentaa oklabissa enemmän kuin srgb:ssä: valkoisen tekstin kontrasti nousee tasolle 6,50:1, kun srgb antaa 6,11:1. Oklab ja oklch antavat saman tuloksen, kun toinen väri on musta tai valkoinen, koska niillä ei ole sävyä, jota interpoloida.

| Resepti | CSS | Tulos | Kontrasti |
| --- | --- | --- | --- |
| Hover, 10 % tummempi | color-mix(in oklab, var(--brand) 90%, black) | #1f55cc | 6,50:1 valkoisella tekstillä |
| Active, 20 % tummempi | color-mix(in oklab, var(--brand) 80%, black) | #1947ae | 8,22:1 valkoisella tekstillä |
| Hover srgb:ssä sekoitettuna | color-mix(in srgb, var(--brand) 90%, black) | #2159d3 | 6,11:1 valkoisella tekstillä |
| Vaalea tausta, 10 % | color-mix(in oklab, var(--brand) 10%, white) | #e8f0ff | 4,51:1 brändivärisellä tekstillä |
| Vaalea tausta, 20 % | color-mix(in oklab, var(--brand) 20%, white) | #d2e2ff | 3,95:1 brändivärisellä tekstillä |
| Läpinäkyvä, 20 % | color-mix(in srgb, var(--brand) 20%, transparent) | rgba(37, 99, 235, 0.2) | Näyttää valkoisella väriltä #d3e0fb |

Varo vaaleita vivahteita. Brändivärisen tekstin kontrasti on valkoisella 5,17:1, 10 %:n vaalealla taustalla 4,51:1 ja 20 %:n vaalealla taustalla vain 3,95:1, mikä ei täytä WCAG AA:ta normaalille tekstille. Jos laitat brändivärisen tekstin saman värin vaalealle taustalle, käytä tekstiin hover-vivahdetta.

Kun sekoitat transparentin kanssa, väri säilyy ja vain alfa pienenee, koska selain sekoittaa esikerrottuja arvoja. Tulos mukautuu siihen, mitä sen takana on: sama sääntö näyttää valkoisella väriltä #d3e0fb ja tummalla #0f172a-pinnalla väriltä #132651. Valkoiseen sekoitettu vaalea vivahde pysyy haaleana myös tummalla sivulla, joten komponenteille, jotka näkyvät molemmissa teemoissa, läpinäkyvä versio on yleensä parempi valinta.

## Suhteellinen värisyntaksi: muuta yhtä kanavaa

Suhteellinen värisyntaksi ottaa olemassa olevan värin, purkaa sen kanaviksi ja antaa kirjoittaa minkä tahansa niistä uudelleen calc()-funktiolla. Lausekkeessa oklch(from var(--brand) l c h) avainsanat l, c ja h sisältävät --brand-värin vaaleuden (0–1), kroman ja sävyn.

Toisin kuin color-mix(), se muuttaa täsmälleen yhtä ominaisuutta: voit laskea vaaleutta koskematta kromaan, kiertää sävyä muuttamatta vaaleutta tai lisätä alfan HEX-muodossa tallennettuun väriin.

| Resepti | CSS | Tulos värille #2563eb | Valkoinen teksti |
| --- | --- | --- | --- |
| Tummempi | oklch(from var(--brand) calc(l - 0.1) c h) | #0442c8 | 8.02:1 |
| Vaaleampi | oklch(from var(--brand) calc(l + 0.1) c h) | #4484ff | 3.51:1 |
| Puolet kromasta | oklch(from var(--brand) l calc(c * 0.5) h) | #4e6faf | 4.98:1 |
| Sävy +30° | oklch(from var(--brand) l c calc(h + 30)) | #7a49df | 5.46:1 |
| Vastaväri | oklch(from var(--brand) l c calc(h + 180)) | #956700 | 4.98:1 |
| Harmaa, sama vaaleus | oklch(from var(--brand) l 0 h) | #707070 | 4.95:1 |
| 50 %:n alfa | oklch(from var(--brand) l c h / 0.5) | rgba(37, 99, 235, 0.5) | Riippuu taustasta |

```css
:root {
    --brand: #2563eb;
    --brand-hover: oklch(from var(--brand) calc(l - 0.08) c h);
    --brand-muted: oklch(from var(--brand) l calc(c * 0.5) h);
    --brand-ring: oklch(from var(--brand) l c h / 0.4);
    --accent: oklch(from var(--brand) l c calc(h + 30));
}
```

Katso neljää riviä, jotka säilyttävät l:n: kroman tai sävyn muuttaminen siirtää valkoisen tekstin kontrastia vain välillä 4,95:1–5,46:1, kun alkuperäisellä värillä se on 5,17:1. Vaaleus ratkaisee kontrastin, joten näin tehdyt sävyvariantit pysyvät suunnilleen yhtä saavutettavina. Vaaleampi väri ja vastaväri ovat täydellä kromalla sRGB:n ulkopuolella, ja selain sovittaa ne lähimpään väriin, jonka se pystyy näyttämään.

## color-mix(), suhteelliset värit ja Sassin darken() rinnakkain

Käytä color-mix()-funktiota, kun ajattelet ”vähän mustaa” tai ”vähän läpinäkyvyyttä”. Käytä suhteellista värisyntaksia, kun ajattelet kanavina: ”sama väri, 0,1 tummempi”. Molemmat korvaavat useimmat Sassin värifunktiot ja seuraavat teemanvaihtoa ilman uutta käännöstä.

|  | color-mix() | Suhteellinen värisyntaksi | Sass darken() |
| --- | --- | --- | --- |
| Suoritetaan | Selaimessa | Selaimessa | Käännösvaiheessa |
| Toimii var():n ja currentColorin kanssa | Kyllä | Kyllä | Ei |
| Värimalli | Antamasi avaruus: srgb, oklab, oklch, hsl ja muita | Mikä tahansa värifunktio: oklch(), rgb(), hsl(), lab() | Vain HSL |
| Sopii parhaiten | Vaaleat ja tummat vivahteet, läpinäkyvyys, kahden tokenin sekoitus | Yhden kanavan muutos: vaaleus, kroma, sävy tai alfa | Vanha koodi, jossa värit ovat kiinteitä |
| Askeleen koko | Osuus matkasta toiseen väriin | Tarkka, kanavan omissa yksiköissä | Kiinteät HSL-pisteet, silmälle epätasaiset |
| Tuettu alkaen | Chrome 111, Safari 16.2, Firefox 113 | Chrome 119, Safari 18, Firefox 128 | Kaikki selaimet, tulos on staattinen |

## Miksi Sassin darken() antaa epätasaiset askeleet

darken($color, 10%) vähentää HSL-vaaleudesta 10 pistettä. HSL-vaaleus ei ole koettu vaaleus, joten näkyvä muutos riippuu sävystä. Alla darken(10%) ja oklch(from … calc(l - 0.1) c h) neljällä yleisellä käyttöliittymävärillä. Ero on mitattu ΔE OK -arvona, jossa noin 0,02 on pienin silmin havaittava ero.

| Väri | Sass darken(10%) | ΔE OK | OKLCH l − 0.1 | ΔE OK |
| --- | --- | --- | --- | --- |
| #2563eb | #134cca | 0.078 | #0442c8 | 0.099 |
| #facc15 | #d7ad05 | 0.099 | #d9ab00 | 0.101 |
| #16a34a | #107636 | 0.136 | #00842b | 0.094 |
| #dc2626 | #b21d1d | 0.090 | #b70000 | 0.089 |

Sama darken(10%) muuttaa vihreää 1,7 kertaa enemmän kuin sinistä. OKLCH-versio pysyy jokaisella sävyllä välillä 0,089–0,101. Pieni hajonta johtuu värialueelle sovittamisesta, koska osa tummemmista väreistä osuu juuri sRGB:n ulkopuolelle. Sass itse suosittelee darken()-funktion sijaan color.adjust()- tai color.scale()-funktiota, eikä tavallisessa CSS:ssä tarvita kumpaakaan.

## Selaintuki ja varavaihtoehdot

color-mix() toimii Chromessa ja Edgessä versiosta 111, Safarissa versiosta 16.2 ja Firefoxissa versiosta 113. Kaikki ne julkaistiin vuonna 2023. Suhteellinen värisyntaksi tuli Chromeen ja Edgeen versiossa 119 ja Firefoxiin versiossa 128. Safari toi varhaisen version versiossa 16.4 ja nykyisen syntaksin Safari 18:ssa. Kaikki nykyiset selaimet tukevat molempia.

Tuttu kikka, jossa edelliselle riville kirjoitetaan pelkkä arvo, ei toimi, kun uusi arvo sisältää var()-funktion. Selain hyväksyy var()-määrittelyn aina jäsennysvaiheessa, joten se hylkää varariviesi, ja jos se ei pysty laskemaan color-mix()-arvoa, se käyttää perittyä arvoa tai alkuarvoa. Kääri moderni versio sen sijaan @supports-lohkoon.

```css
.button:hover {
    background: #1f55cc;
}

@supports (color: color-mix(in oklab, red, blue)) {
    .button:hover {
        background: color-mix(in oklab, var(--brand) 90%, black);
    }
}

@supports (color: oklch(from red l c h)) {
    .badge {
        border-color: oklch(from var(--brand) l c h / 0.3);
    }
}
```

## Kysymyksiä ja vastauksia

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

color-mix() sekoittaa kaksi väriä antamassasi väriavaruudessa ja palauttaa tuloksen, esimerkiksi color-mix(in oklab, var(--brand) 90%, black) antaa brändiväriä 10 % tummemman värin. Se toimii selaimessa, joten se sopii yhteen CSS-muuttujien ja currentColorin kanssa.

### Mitä väriavaruutta color-mix()-funktiossa kannattaa käyttää?

Käytä oklabia vaaleisiin ja tummiin vivahteisiin sekä hover-tiloihin, koska se antaa tasaiset vaaleusaskeleet ja säilyttää sävyn. Käytä oklch:ta, kun sekoitat kaksi kylläistä väriä ja haluat kylläisen tuloksen, ja srgb:tä, kun sekoitat transparentin kanssa. Sininen ja keltainen antavat srgb:ssä latteaa harmaata #808080, mutta oklch:ssa kirkasta sinivihreää.

### Miten tummennan värin hover-tilassa pelkällä CSS:llä?

Käytä background: color-mix(in oklab, var(--brand) 90%, black) tai background: oklch(from var(--brand) calc(l - 0.1) c h). Värille #2563eb ensimmäinen antaa #1f55cc ja toinen #0442c8, ja valkoisen tekstin kontrasti 5,17:1 nousee tasolle 6,50:1 tai 8,02:1.

### Miten teen CSS-muuttujan väristä läpinäkyvän?

Kirjoita color-mix(in srgb, var(--brand) 20%, transparent) tai oklch(from var(--brand) l c h / 0.2). Molemmat toimivat, vaikka --brand olisi tallennettu HEX-muodossa, ja ne pitävät itse värin ennallaan ja pienentävät vain sen peittävyyttä.

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

Kyllä, kaikki nykyiset selaimet tukevat sitä: Chrome ja Edge versiosta 111, Safari versiosta 16.2 ja Firefox versiosta 113. Vanhempia selaimia varten kirjoita ensin kiinteä väri ja color-mix()-versio @supports-lohkoon, koska var()-rivi ei osaa palata varavaihtoehtoon itse.

### Mikä ero on color-mix()-funktiolla ja suhteellisella värisyntaksilla?

color-mix() sekoittaa kaksi väriä prosenttiosuuden mukaan, mikä sopii vaaleisiin ja tummiin vivahteisiin sekä läpinäkyvyyteen. Suhteellinen värisyntaksi, kuten oklch(from var(--brand) l c calc(h + 30)), kirjoittaa uudelleen yhden värin yksittäisiä kanavia, mikä sopii tarkkoihin vaaleusaskeliin, sävyn siirtoihin ja alfaan.

## Työkalut

- [Värisekoitin](https://pickshade.com/fi/mix)
- [OKLCH-värivalitsin](https://pickshade.com/fi/oklch)
- [Kontrastin tarkistus](https://pickshade.com/fi/contrast)
- [Liukuvärigeneraattori](https://pickshade.com/fi/gradient)

## Aiheeseen liittyvät oppaat

- [OKLCH selitettynä: värimuoto, joka vihdoin vastaa silmääsi](https://pickshade.com/fi/oklch)
- [Tumman tilan värit: näin valitset taustan, tekstin ja korostusvärit](https://pickshade.com/fi/dark-mode-colors)
- [Värimuodot selitettynä: HEX, RGB, HSL, OKLCH ja muut](https://pickshade.com/fi/color-formats)