CodeKitHubKas yra šis įrankis?
Spalvų maišytuvas tiesiškai interpoliuoja tarp dviejų spalvų raudonojo, žaliojo ir mėlynojo kanalų pasirinktu santykiu — ta pati matematika, kurią vidiniu būdu naudoja gradientas. Ties 0% rezultatas yra Spalva A, ties 100% — Spalva B, o ties 50% — kiekvieno RGB kanalo aritmetinis vidurkis.
Tai skiriasi nuo fizinių dažų maišymo (kuris yra atimtinis ir priklauso nuo pigmento), ir tai taip pat nėra tas pats, kas vidurkinimas HSL erdvėje — tiesinė RGB interpoliacija yra tai, ką naudoja CSS gradientai, dizaino įrankiai ir dauguma „spalva tarp dviejų spalvų“ įrankių, todėl rezultatas atitinka tai, ką matytumėte naršyklės gradiente tarp tų pačių dviejų spalvų.
Kodėl jį naudoti?
- Raskite natūraliai atrodančią hover ar aktyvios būsenos spalvą, kuri yra tarp jūsų bazinės spalvos ir akcento — vietoj to, kad spėtumėte atsitiktinį koregavimą.
- Pamatykite tikslų HEX kodą bet kokiu santykiu, o ne tik akimis vertintumėte gradiento ekrano nuotrauką.
- 11 žingsnių skalė vienu paspaudimu suteikia pilną paletę nuo vienos spalvos iki kitos, naudinga duomenų vizualizacijai ar daugiapakopiam gradientui.
- Spustelėkite bet kurį žingsnį, kad akimirksniu nukopijuotumėte jo HEX kodą.
- Nemokama, akimirksniu ir visiškai vietinė — jokio įkėlimo, jokios paskyros.
Kaip naudoti
- Pasirinkite Spalvą A ir Spalvą B naudodami spalvų parinkiklius arba įvesdami HEX kodą.
- Vilkite santykio slankiklį, kad nustatytumėte, kiek Spalvos B įmaišyti.
- Perskaitykite gautas HEX ir RGB reikšmes virš pavyzdžio.
- Spustelėkite bet kurį pavyzdį žemiau esančioje 11 žingsnių skalėje, kad nukopijuotumėte jo HEX kodą.
Pavyzdys
Įvestis
Spalva A #3B82F6 (mėlyna), Spalva B #F59E0B (gintaro), santykis 50%Išvestis
#9B9E7D — rgb(155, 158, 125)Lygiai ties 50% kiekvienas RGB kanalas yra abiejų įvesties spalvų kanalų aritmetinis vidurkis.
Dažniausiai užduodami klausimai
Kodėl tai neatitinka to, ką gaučiau maišydamas tikrus dažus?
Dažų maišymas yra atimtinis (pigmentai sugeria šviesą) ir priklauso nuo konkrečių dalyvaujančių pigmentų — pavyzdžiui, mėlynų ir geltonų dažų maišymas duoda žalią spalvą. Šis įrankis maišo šviesą (RGB kanalus) sudėtiniu/tiesiniu būdu, taip ekranai, CSS gradientai ir dauguma skaitmeninių dizaino įrankių maišo spalvas. Šios dvi sistemos sąmoningai duoda iš tiesų skirtingus rezultatus, o ne dėl klaidos.
Ar tai tas pats, kas CSS linear-gradient tarp dviejų spalvų?
Taip — CSS linear-gradient(colorA, colorB) interpoliuoja RGB kanalus taip pat, kaip ir šis įrankis, todėl spalva, kurią matytumėte to gradiento viduryje, atitinka čia esantį 50% rezultatą.
Kodėl sumaišyta spalva kartais atrodo drumsta ar pilka?
Maišant dvi sodrias, bet labai skirtingas atspalvio spalvas (pvz., mėlyną ir oranžinę, kurios yra beveik papildomos) RGB erdvėje dažnai gaunamas mažo sodrumo, pilkšvai rudas tarpinis taškas — tai tikra RGB interpoliacijos savybė, o ne klaida. Jei norite gyvesnio mišinio, pabandykite maišyti spalvas, kurios yra arčiau viena kitos spalvų rate, arba maišykite HSL erdvėje, koreguodami atspalvį ir išlaikydami aukštą sodrumą (to šis tiesioginis RGB maišytuvas nedaro).
Ar galiu sumaišyti daugiau nei dvi spalvas vienu metu?
Ne vienu žingsniu — įrankis maišo lygiai dvi spalvas. Norėdami sujungti tris, sumaišykite pirmąsias dvi pasirinktu santykiu, nukopijuokite rezultatą ir įklijuokite jį kaip naują Spalvą A prieš trečiąją spalvą. Darant tai etapais, taip pat suteikiama kontrolė svoriams, kurios vienkartinis trijų krypčių vidurkinimas nesuteiktų.
Ar turėčiau naudoti šį įrankį, ar spalvų atspalvių generatorių?
Jei jums reikia spalvos, esančios tarp dviejų skirtingų spalvų — tarkime, pereinamojo atspalvio tarp jūsų prekės ženklo mėlynos ir gintaro akcento — naudokite šį maišytuvą. Jei jums reikia vienos spalvos šviesesnių ir tamsesnių variantų (hover būsenų, fonų, Tailwind stiliaus 50–900 skalės), vietoj to naudokite Spalvų atspalvių generatorių: jis palaiko fiksuotą atspalvį ir sodrumą, keisdamas tik šviesumą, todėl kiekvienas rezultatas aiškiai išlieka toje pačioje spalvų šeimoje.
Kokius spalvų formatus galiu įvesti į įvesties laukus?
Teksto laukai priima 6 skaitmenų HEX kodus, su pradiniu # arba be jo (pvz., 3B82F6 arba #3B82F6). Sutrumpintas 3 skaitmenų hex, rgb() žymėjimas ir CSS spalvų pavadinimai ten neapdorojami — tačiau galite vizualiai pasirinkti bet kurią spalvą naudodami įtaisytą spalvų parinkiklį šalia kiekvieno lauko, o HEX laukas atitinkamai atsinaujins.