CodeKitHubŠto je ovaj alat?
Mješalica boja linearno interpolira između crvenog, zelenog i plavog kanala dviju boja pri odabranom omjeru — ista matematika koju gradijent koristi interno. Kod 0% rezultat je Boja A, kod 100% je Boja B, a kod 50% je aritmetička sredina svakog RGB kanala.
Ovo se razlikuje od miješanja fizičke boje (koje je suptraktivno i ovisi o pigmentu), a nije isto ni kao usrednjavanje u HSL prostoru — linearna RGB interpolacija je ono što CSS gradijenti, alati za dizajn i većina alata za "boju između dviju boja" koriste, tako da rezultat odgovara onome što biste vidjeli u gradijentu preglednika između istih dviju boja.
Zašto ga koristiti?
- Pronađite prirodno izgledajuću hover ili aktivnu boju stanja koja se nalazi između vaše osnovne boje i naglaska — umjesto nagađanja nasumične prilagodbe.
- Vidite točan HEX kod pri bilo kojem omjeru, ne samo procjenjivanje snimke zaslona gradijenta na oko.
- Ljestvica od 11 koraka daje vam potpunu paletu od jedne boje do druge jednim klikom, korisno za vizualizaciju podataka ili višestupanjski gradijent.
- Kliknite bilo koji korak za trenutno kopiranje njegovog HEX koda.
- Besplatno, trenutno i potpuno lokalno — bez prijenosa, bez računa.
Kako ga koristiti
- Odaberite Boju A i Boju B pomoću birača boja ili upisivanjem HEX koda.
- Povucite klizač omjera kako biste postavili koliko Boje B treba pomiješati.
- Pročitajte rezultirajuće HEX i RGB vrijednosti iznad uzorka.
- Kliknite bilo koji uzorak u ljestvici od 11 koraka ispod za kopiranje njegovog HEX koda.
Primjer
Ulaz
Boja A #3B82F6 (plava), Boja B #F59E0B (jantarna), omjer 50%Izlaz
#9B9E7D — rgb(155, 158, 125)Kod točno 50%, svaki RGB kanal je aritmetička sredina kanala obiju ulaznih boja.
Često postavljana pitanja
Zašto se ovo ne podudara s onim što bih dobio miješanjem prave boje?
Miješanje boja je suptraktivno (pigmenti apsorbiraju svjetlost) i ovisi o konkretnim pigmentima — miješanje plave i žute boje, na primjer, daje zelenu. Ovaj alat miješa svjetlost (RGB kanale) aditivno/linearno, što je način na koji zasloni, CSS gradijenti i većina digitalnih alata za dizajn miješaju boje. Dva sustava namjerno proizvode istinski različite rezultate, ne zbog greške.
Je li ovo isto što i CSS linear-gradient između dviju boja?
Da — CSS linear-gradient(colorA, colorB) interpolira RGB kanale na isti način kao ovaj alat, tako da boja koju biste vidjeli na sredini tog gradijenta odgovara rezultatu od 50% ovdje.
Zašto izmiješana boja ponekad izgleda blatnjavo ili sivo?
Miješanje dviju zasićenih, ali vrlo različitih nijansi (poput plave i narančaste, koje su gotovo komplementarne) u RGB prostoru često proizvodi sivo-smeđu srednju točku niske zasićenosti — ovo je stvarno svojstvo RGB interpolacije, a ne greška. Ako želite živopisniju mješavinu, pokušajte miješati boje koje su bliže jedna drugoj na krugu boja, ili miješajte u HSL prostoru prilagođavajući nijansu uz zadržavanje visoke zasićenosti (nešto što ova izravna RGB mješalica ne radi).
Mogu li pomiješati više od dvije boje odjednom?
Ne u jednom koraku — alat miješa točno dvije boje. Da biste kombinirali tri, pomiješajte prve dvije u odabranom omjeru, kopirajte rezultat i zalijepite ga kao novu Boju A naspram treće boje. Postupno izvođenje također vam daje kontrolu nad ponderiranjem, što jedinstveno trosmjerno usrednjavanje ne bi dalo.
Trebam li koristiti ovo ili Generator nijansi boja?
Ako trebate boju koja se nalazi između dviju različitih boja — recimo, prijelaznu nijansu između plave boje vašeg brenda i jantarnog naglaska — koristite ovu mješalicu. Ako trebate svjetlije i tamnije varijante jedne boje (hover stanja, pozadine, ljestvica u stilu Tailwind od 50 do 900), umjesto toga koristite Generator nijansi boja: on drži nijansu i zasićenost fiksnima i mijenja samo svjetlinu, tako da svaki rezultat ostaje jasno u istoj obitelji boja.
Koje formate boja mogu upisati u polja za unos?
Tekstualna polja prihvaćaju 6-znamenkaste HEX kodove, s vodećim # ili bez njega (npr. 3B82F6 ili #3B82F6). Skraćeni 3-znamenkasti hex, rgb() notacija i CSS nazivi boja ondje se ne prepoznaju — ali možete vizualno odabrati bilo koju boju pomoću ugrađenog birača boja pored svakog polja, a HEX polje će se ažurirati u skladu s tim.