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

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

/* 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); }

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 näyttää saman valinnan liukuväreissä, joissa ero näkyy helpoimmin.

• 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ä 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.

: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);
}

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 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.

.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%);
}

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. Hyvin vanhoille selaimille määritä ensin tasainen väri ja anna sekoituksen ohittaa se. Toista riviä ymmärtämätön selain sivuuttaa sen.

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

Näihin malleihin perustuva kokonainen vaalea ja tumma teema löytyy artikkelista CSS-muuttujat teemoissa.

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 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.