Color Mixer
Sekoita kahta väriä valitsemassasi väriavaruudessa haluamassasi suhteessa samalla tavoin kuin CSS-color-mix(). Anna kaksi väriä missä tahansa CSS-muodossa, aseta toisen värin osuus välille 0–100 prosenttia ja valitse OKLab, OKLCH, Lab, LCH, sRGB, lineaarinen sRGB, Display P3, HSL, HWB tai XYZ. Saat tuloksen HEX-, RGB-, HSL- ja OKLCH-muodoissa sekä tyylitiedostoosi valmiin color-mix()-lausekkeen.
Usein kysytyt kysymykset
Miten määrä toimii?
Määrä ilmaisee, kuinka suuri osuus seoksesta on väriä 2. Arvo 0 % palauttaa värin 1, 100 % värin 2 ja 50 % asettuu niiden puoliväliin valitussa väriavaruudessa. Se vastaa toimintoa color-mix(in space, color1 (100 - p)%, color2 p%).
Minkä väriavaruuden valitsen?
Oletusarvoinen OKLab on havaintoperusteisesti tasainen ja välttää sameat tai tummat välisävyt. sRGB sekoittaa gamma-koodatut kanavat vanhojen selainten ja Sass tavoin, jolloin kylläisten värien sekoituksista tulee tummempia ja hillitympiä. Lab on vanhempi CIE:n havaintoperusteinen väriavaruus. Se toimii samaan tapaan kuin OKLab, mutta siniset sävyt jakautuvat epätasaisemmin.
Miten sävyyn perustuvat väriavaruudet toimivat?
OKLCH, LCH, HSL ja HWB interpoloivat sävyn lyhyempää reittiä pitkin väriympyrällä. Tämä on CSS oletusasetus, joten keskimmäisen värin kylläisyys säilyy ja se voi olla kumpaakin lähtöväriä kirkkaampi. Jos toinen väri on neutraali harmaa ilman sävyä, käytetään toisen värin sävyä.
Mihin lineaarista sRGB:tä ja XYZ:tä käytetään?
Molemmissa valon voimakkuuksia sekoitetaan lineaarisesti, ikään kuin valonsäteet osuisivat päällekkäin, joten keskimmäinen väri näyttää kirkkaammalta kuin sRGB:ssä. Ne sopivat fysikaalisesti perusteltuihin tehosteisiin sekä sumeiden tai sekoitettujen pikselien ulkoasun jäljittelyyn.
Miten läpinäkyvyys käsitellään?
Kuten CSS color-mix(), sekoitin interpoloi esikerrotulla alfalla, joten läpinäkyvä väri ei vedä seosta kohti mustaa. Alfa-arvo interpoloidaan samalla suhteella, ja se näkyy 8-numeroisessa heksakoodissa sekä vinoviivan jälkeen CSS-funktioissa.
Mitä syötemuotoja voin käyttää?
Heksakoodit #-merkin kanssa tai ilman sitä, CSS-värinimet, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color()-väriavaruudet, kuten display-p3, ja cmyk(), kaikkia voi käyttää missä tahansa yhdistelmässä. Kunkin värin enimmäispituus on 100 merkkiä.
Mitä tapahtuu, jos tulos ei kuulu sRGB:hen?
Display P3-, OKLCH- tai LCH-sekoitus voi tuottaa värejä, joita sRGB ei pysty näyttämään. Tällöin HEX-, RGB- ja HSL-arvot muunnetaan sRGB-väriavaruuteen CSS Color 4 -algoritmilla, ja tuloksen yhteydessä näytetään huomautus. OKLCH-arvossa muuntamaton väri säilyy.
Miten käytän color-mix()-lauseketta?
Liitä se mihin tahansa CSS-ominaisuuteen, joka hyväksyy värin. Syötteet määritetään heksakoodilla tai laajan väriskaalan syötteissä oklch()-arvolla, jolloin selain laskee saman sekoituksen uudelleen. color-mix() toimii kaikissa nykyisissä Chrome-, Edge-, Firefox- ja Safari-versioissa.
Kuinka tarkka tulos on?
Määrä annetaan kokonaisprosenttina, ja sekoitus lasketaan täydellä tarkkuudella culori-kirjastolla. RGB-kanavat pyöristetään kokonaisluvuiksi, HSL-prosenttiosuudet kahteen desimaaliin ja OKLCH:n vaaleus ja värikkyys neljään desimaaliin, joten selainten viimeinen numero voi poiketa yhden yksikön.
Miten saan kahden värin väliin useita sävyjä?
Käytä sekoitinta eri määrillä, esimerkiksi 25 %, 50 % ja 75 %. Jos haluat luoda koko asteikon kohti valkoista, mustaa tai harmaata, Color Tint-, Shade- ja Tone Generators -työkalut luovat kaikki sävyt yhteen taulukkoon.