Online kvapátko

Potrebujete zistiť, aká farba je v logu, na fotke alebo na screenshote? Nahrajte obrázok, prejdite myšou na miesto, ktoré vás zaujíma, a kliknite. Kód farby sa rovno skopíruje do schránky vo formáte, ktorý si zvolíte: HEX, RGB, HSL, HSV alebo LCH. Nič neinštalujete a obrázok neopúšťa váš počítač.

Ako zistiť farbu z obrázka

1. Nahrajte obrázok. Pretiahnite ho do okna alebo kliknite na „Prehľadávať súbory”. Kvapátko zvládne JPG, PNG, WebP aj GIF.
2. Zvoľte formát. Nad obrázkom vyberte, v akom zápise chcete farbu kopírovať. Pre web sa väčšinou hodí HEX, pre grafické programy RGB. Voľbu si nástroj zapamätá.
3. Prejdite na farbu. Pri kurzore sa objaví lupa so zväčšenými okolitými pixelmi a pod ňou kód farby.
4. Kliknite. Kód je v schránke a farba sa uloží do záložky Vybrané farby. Stačí ju vložiť tam, kde ju potrebujete.

Chcete skúsiť iný obrázok? Pretiahnite ho rovno na ten súčasný, alebo ho vymažte ikonou koša.

Čo online kvapátko dokáže

Lupa, ktorá ukáže každý pixel

Bežná pipeta ukáže len farbu pod kurzorom, a trafiť tenký okraj písmena je potom lotéria. Naša lupa zväčší okolie kurzora na 11 × 11 pixelov a ten prostredný orámuje. Presne vidíte, na čo kliknete, ešte skôr, než kliknete.

Zoom až na jednotlivé pixely

Tlačidlami plus a mínus alebo kolieskom myši so stlačeným Ctrl obrázok priblížite až 64-krát. So zapnutou mriežkou uvidíte hranice pixelov, takže pri ikonách, pixel arte alebo drobnom texte kliknete presne tam, kam chcete.

Farba z originálu, nie zo zmenšeniny

Rad online nástrojov si obrázok zmenší a farbu číta z náhľadu, kde sa susedné pixely spoja dohromady. Naše kvapátko pracuje s obrázkom v plnom rozlíšení (až 4096 px na dlhšej strane), takže dostanete skutočnú farbu pixela.

Kopírovanie jedným kliknutím

Žiadne označovanie textu ani prepisovanie čísel. Každé kliknutie do obrázka skopíruje kód vo zvolenom formáte. Keď rovnakú farbu potrebujete aj v inom zápise, detail farby ponúka všetkých päť formátov, každý s vlastným tlačidlom na kopírovanie.

Paleta dominantných farieb

Hneď po nahraní nástroj nájde až osem farieb, ktoré v obrázku prevládajú, a ukáže ich v záložke Dominantné farby. Takmer rovnaké odtiene zlúči, takže v palete nenájdete päť variantov sivej. Priehľadné časti PNG vynechá. Paleta sa hodí ako základ farebnej schémy pre web, prezentáciu alebo príspevky na sociálnych sieťach. Ak si farby držia dostatočný kontrast aj bez odtieňa, rýchlo to overíte prevodom obrázka do odtieňov sivej.

Vybrané farby stále na očiach

Každá farba, na ktorú kliknete, sa uloží do záložky Vybrané farby (posledných 24). Môžete tak porovnať niekoľko miest v obrázku a kedykoľvek sa k nim vrátiť. Na veľkej obrazovke je panel s farbami hneď vedľa obrázka.

Na čo sa hodí zistiť kód farby z obrázka

• Web a aplikácie: Klient poslal logo len ako JPG a vy potrebujete presnú farbu značky do CSS. Keď k nemu chcete aj verziu s priehľadným pozadím, použite odstránenie pozadia z obrázka.
• Grafika a sociálne siete: Chcete, aby text na príspevku ladil s fotkou. Vezmite farbu priamo z nej.
• Prezentácie a dokumenty: Farby firemného loga nastavíte v PowerPointe, Google Slides alebo Canve cez HEX alebo RGB.
• Kontrola návrhu: Na screenshote overíte, či má tlačidlo v aplikácii naozaj tú farbu, ktorú predpisuje dizajn. Veľkosť exportovaných podkladov potom skontrolujete v analýze rozmerov obrázkov.
• Interiér a móda: Máte fotku látky alebo steny a hľadáte podobný odtieň. Kód poslúži ako východiskový bod pri výbere vo vzorníku.

Formáty farieb, ktoré kvapátko vracia

• HEX (#1373b6): zápis pre HTML, CSS a väčšinu grafických nástrojov.
• RGB (rgb(19, 115, 182)): podiel červenej, zelenej a modrej, každá od 0 do 255. Ako funguje aditívne miešanie farieb, opisuje Wikipédia.
• HSL (hsl(205, 81%, 39%)): odtieň, sýtosť a svetlosť. Ľahko z neho pripravíte svetlejší alebo tmavší variant.
• HSV: odtieň, sýtosť a jas, ako ho poznáte z výberu farby vo Photoshope alebo GIMPe. Rozdiel medzi HSL a HSV podrobne vysvetľuje Wikipedia (anglicky).
• LCH: model, ktorý zodpovedá tomu, ako farby vníma ľudské oko. Kopíruje sa v zápise, ktorému rozumie moderné CSS (pozri dokumentáciu MDN, anglicky).

Kvapátko farbu z obrázka zistí. Keď ju chcete ďalej upravovať, previesť do ďalších formátov alebo k nej hľadať ladiace odtiene, pokračujte do online výberu farieb.

Časté otázky

Nahráva sa môj obrázok na server?

Nie. Obrázok sa načíta a spracuje priamo vo vašom prehliadači, nikam sa neodosiela a po zatvorení stránky po ňom nič nezostane. Kvapátko tak pokojne použijete aj na interné podklady alebo nezverejnené návrhy.

Ako zistiť HEX kód farby z fotky?

Nahrajte fotku, nad obrázkom nechajte zvolený formát HEX a kliknite na miesto s farbou, ktorú hľadáte. Kód, napríklad #75dab2, máte hneď v schránke.

Prečo sa farba z fotky líši od skutočnosti?

Fotoaparát farby ovplyvní osvetlením, vyvážením bielej (anglicky) aj kompresiou. Kvapátko vracia presne tú farbu, ktorá je uložená v súbore. Pri fotkách preto kliknite na niekoľko miest a porovnajte ich v záložke Vybrané farby. Keď podľa kódu miešate farbu na stenu, berte ho ako orientačný.

Funguje kvapátko na mobile?

Áno. Na dotykovom displeji klepnete na miesto v obrázku a kód sa skopíruje rovnako ako na počítači. Lupa pri kurzore sa na mobile nezobrazuje, preto pri drobných detailoch obrázok najprv priblížte.

Aký je rozdiel medzi HEX a RGB?

Oba zápisy opisujú tú istú farbu. RGB ju vyjadruje tromi číslami od 0 do 255, HEX zapisuje rovnaké čísla v šestnástkovej sústave za znakom #. Napríklad rgb(255, 87, 51) je to isté ako #ff5733.

Ako z obrázka získať celú farebnú paletu?

Otvorte záložku Dominantné farby. Nájdete v nej až osem hlavných farieb obrázka a kliknutím na ktorúkoľvek z nich skopírujete jej kód.