Spalvų maišytuvas
Maišykite dvi spalvas pasirinktoje spalvų erdvėje, pasirinktu santykiu – taip, kaip tai daro CSS color-mix(). Įveskite dvi spalvas bet kokiu CSS formatu, nustatykite antrosios spalvos dalį nuo 0 iki 100 procentų ir pasirinkite OKLab, OKLCH, Lab, LCH, sRGB, linear sRGB, Display P3, HSL, HWB arba XYZ. Rezultate pateikiamos HEX, RGB, HSL ir OKLCH reikšmės bei paruošta color-mix() išraiška stiliaus aprašui.
Dažnai užduodami klausimai
Kaip veikia kiekis?
Kiekis nurodo antrosios spalvos dalį mišinyje. 0% grąžina Color 1, 100% – Color 2, o 50% reiškia, kad rezultatas yra per vidurį tarp jų pasirinktoje erdvėje. Tai atitinka color-mix(in space, color1 (100 - p)%, color2 p%).
Kurią spalvų erdvę pasirinkti?
Numatytoji OKLab yra suvokimo požiūriu tolygi ir padeda išvengti drumstų ar tamsių tarpinių spalvų. sRGB maišo gama koduotus kanalus, kaip senesnės naršyklės ir Sass, todėl sodrių spalvų mišiniai tampa tamsesni ir blankesni. Lab yra senesnė CIE suvokimo erdvė. Ji veikia panašiai kaip OKLab, tačiau mėlynos spalvos joje mažiau tolygios.
Kaip veikia atspalviu pagrįstos erdvės?
OKLCH, LCH, HSL ir HWB interpoliuoja atspalvį trumpesniu spalvų rato lanku – tai CSS numatytasis nustatymas. Todėl tarpinė spalva išlaiko sodrumą ir gali būti ryškesnė už abi pradines spalvas. Jei viena spalva yra neutrali pilka be atspalvio, naudojamas kitos spalvos atspalvis.
Kam skirti linear sRGB ir XYZ?
Abiejose erdvėse šviesos intensyvumai maišomi tiesiškai, tarsi persidengtų šviesos spinduliai, todėl tarpinė spalva atrodo šviesesnė nei sRGB erdvėje. Jos naudingos fiziškai pagrįstiems efektams ir norint atkartoti neryškių arba sulietų pikselių išvaizdą.
Kaip tvarkomas skaidrumas?
Kaip ir CSS color-mix() atveju, maišytuvas interpoliuoja naudodamas iš anksto padaugintą alfa reikšmę, todėl skaidri spalva nenukreipia mišinio į juodą. Pati alfa reikšmė interpoliuojama tuo pačiu santykiu ir pateikiama 8 skaitmenų HEX formate bei po pasvirojo brūkšnio CSS funkcijose.
Kokius įvesties formatus galiu naudoti?
HEX kodai su # arba be jo, CSS spalvų pavadinimai, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() erdvės, pavyzdžiui, display-p3, ir cmyk() – galima naudoti bet kokį jų derinį. Kiekviena spalva gali būti iki 100 simbolių ilgio.
Kas nutinka, kai rezultatas nepatenka į sRGB gamą?
Maišant Display P3, OKLCH arba LCH erdvėse galima gauti spalvų, kurių sRGB negali atvaizduoti. Tokiu atveju HEX, RGB ir HSL reikšmės pritaikomos sRGB naudojant CSS Color 4 algoritmą, apie tai pateikiama pastaba, o OKLCH reikšmėje paliekama spalva, kurios atvaizdavimas nepritaikytas.
Kaip naudoti color-mix() išraišką?
Įklijuokite ją į bet kurią CSS ypatybę, kuriai tinka spalvos reikšmė. Įvestys nurodomos HEX kodais arba, jei įvestys turi plačią gamą, oklch(), todėl naršyklė iš naujo apskaičiuoja tą patį mišinį. color-mix() veikia visose dabartinėse Chrome, Edge, Firefox ir Safari versijose.
Koks rezultato tikslumas?
Kiekis pateikiamas sveikais procentais, o mišinys apskaičiuojamas maksimaliu tikslumu naudojant culori biblioteką. RGB kanalai suapvalinami iki sveikųjų skaičių, HSL procentai – iki dviejų skaitmenų po kablelio, o OKLCH šviesumas ir chroma – iki keturių, todėl paskutinis skaitmuo skirtingose naršyklėse gali skirtis vienu žingsniu.
Kaip gauti kelis žingsnius tarp dviejų spalvų?
Paleiskite maišytuvą su skirtingais kiekiais, pavyzdžiui, 25%, 50% ir 75%. Norėdami gauti visą skalę nuo spalvos iki baltos, juodos arba pilkos, naudokite spalvų atspalvių (tint), šešėlių ir tonų generatorius – jie vienoje lentelėje pateikia visus žingsnius.