CodeKitHubKaj je to orodje?
Mešalnik barv linearno interpolira med rdečim, zelenim in modrim kanalom dveh barv pri izbranem razmerju — enaka matematika, ki jo prehod uporablja interno. Pri 0 % je rezultat Barva A, pri 100 % je Barva B, pri 50 % pa aritmetična sredina vsakega RGB kanala.
To se razlikuje od mešanja fizične barve (ki je subtraktivno in odvisno od pigmenta), prav tako pa ni enako povprečenju v HSL prostoru — linearna RGB interpolacija je tisto, kar uporabljajo CSS prehodi, orodja za oblikovanje in večina orodij za "barvo med dvema barvama", tako da rezultat ustreza temu, kar bi videli v prehodu brskalnika med istima dvema barvama.
Zakaj ga uporabiti?
- Poiščite naravno izgledajočo hover ali aktivno barvo stanja, ki leži med vašo osnovno barvo in poudarkom — namesto ugibanja naključne prilagoditve.
- Poglejte natančno HEX kodo pri poljubnem razmerju, ne le ocenjujte na oko posnetek zaslona prehoda.
- 11-stopenjska lestvica vam z enim klikom da celotno paleto od ene barve do druge, uporabno za vizualizacijo podatkov ali večstopenjski prehod.
- Kliknite katero koli stopnjo, da takoj kopirate njeno HEX kodo.
- Brezplačno, takojšnje in povsem lokalno — brez nalaganja, brez računa.
Kako ga uporabljati
- Izberite Barvo A in Barvo B z izbirnikoma barv ali z vnosom HEX kode.
- Povlecite drsnik razmerja, da nastavite, koliko Barve B naj se primeša.
- Preberite nastale vrednosti HEX in RGB nad vzorcem.
- Kliknite kateri koli vzorec v 11-stopenjski lestvici spodaj, da kopirate njegovo HEX kodo.
Primer
Vnos
Barva A #3B82F6 (modra), Barva B #F59E0B (jantarna), razmerje 50 %Rezultat
#9B9E7D — rgb(155, 158, 125)Pri natanko 50 % je vsak RGB kanal aritmetična sredina kanalov obeh vhodnih barv.
Pogosta vprašanja
Zakaj se to ne ujema s tem, kar bi dobil z mešanjem prave barve?
Mešanje barv je subtraktivno (pigmenti absorbirajo svetlobo) in je odvisno od konkretnih vpletenih pigmentov — mešanje modre in rumene barve na primer da zeleno. To orodje meša svetlobo (RGB kanale) aditivno/linearno, kar je način, kako zasloni, CSS prehodi in večina digitalnih orodij za oblikovanje mešajo barve. Oba sistema namerno dajeta resnično različne rezultate, ne zaradi napake.
Je to enako kot CSS linear-gradient med tema dvema barvama?
Da — CSS linear-gradient(colorA, colorB) interpolira RGB kanale na enak način kot to orodje, tako da barva, ki bi jo videli na sredini tega prehoda, ustreza tukajšnjemu rezultatu pri 50 %.
Zakaj zmešana barva včasih izgleda blatna ali siva?
Mešanje dveh nasičenih, a zelo različnih odtenkov (kot sta modra in oranžna, ki sta skoraj komplementarni) v RGB prostoru pogosto povzroči nizko nasičeno, sivkasto-rjavo vmesno točko — to je resnična lastnost RGB interpolacije, ne napaka. Če želite bolj živahno mešanico, poskusite zmešati barve, ki so si na barvnem krogu bližje, ali mešajte v HSL prostoru s prilagajanjem odtenka ob ohranjanju visoke nasičenosti (kar ta neposredni RGB mešalnik ne počne).
Ali lahko naenkrat zmešam več kot dve barvi?
Ne v enem koraku — orodje meša natanko dve barvi. Za kombiniranje treh zmešajte prvi dve v izbranem razmerju, kopirajte rezultat in ga prilepite kot novo Barvo A proti tretji barvi. Postopno izvajanje vam prav tako omogoča nadzor nad utežmi, česar enkratno tristransko povprečenje ne bi omogočilo.
Naj uporabim to ali Generator barvnih odtenkov?
Če potrebujete barvo, ki leži med dvema različnima barvama — recimo prehodni odtenek med modro barvo vaše znamke in jantarnim poudarkom — uporabite ta mešalnik. Če potrebujete svetlejše in temnejše različice ene barve (hover stanja, ozadja, lestvico v slogu Tailwind od 50 do 900), namesto tega uporabite Generator barvnih odtenkov: ta ohranja odtenek in nasičenost fiksna ter spreminja le svetlost, tako da vsak rezultat ostane jasno v isti barvni družini.
Katere barvne formate lahko vnesem v vnosna polja?
Besedilna polja sprejemajo 6-mestne HEX kode, z uvodnim # ali brez njega (npr. 3B82F6 ali #3B82F6). Skrajšani 3-mestni hex, zapis rgb() in imena barv CSS se tam ne razčlenjujejo — lahko pa vizualno izberete katero koli barvo z vgrajenim izbirnikom barv poleg vsakega polja, HEX polje pa se ustrezno posodobi.