Online kapátko

Potřebujete zjistit, jaká barva je v logu, na fotce nebo na screenshotu? Nahrajte obrázek, najeďte myší na místo, které vás zajímá, a klikněte. Kód barvy se rovnou zkopíruje do schránky ve formátu, který si zvolíte: HEX, RGB, HSL, HSV nebo LCH. Nic neinstalujete a obrázek neopouští váš počítač.

Jak zjistit barvu z obrázku

1. Nahrajte obrázek. Přetáhněte ho do okna nebo klikněte na „Procházet soubory“. Kapátko zvládne JPG, PNG, WebP i GIF.
2. Zvolte formát. Nad obrázkem vyberte, v jakém zápisu chcete barvu kopírovat. Pro web se většinou hodí HEX, pro grafické programy RGB. Volbu si nástroj zapamatuje.
3. Najeďte na barvu. U kurzoru se objeví lupa se zvětšenými okolními pixely a pod ní kód barvy.
4. Klikněte. Kód je ve schránce a barva se uloží do záložky Vybrané barvy. Stačí ji vložit tam, kde ji potřebujete.

Chcete zkusit jiný obrázek? Přetáhněte ho rovnou na ten současný, nebo ho smažte ikonou koše.

Co online kapátko umí

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

Běžná pipeta ukáže jen barvu pod kurzorem, a trefit tenký okraj písmene je pak loterie. Naše lupa zvětší okolí kurzoru na 11 × 11 pixelů a ten prostřední orámuje. Přesně vidíte, na co kliknete, ještě než kliknete.

Zoom až na jednotlivé pixely

Tlačítky plus a minus nebo kolečkem myši se stisknutým Ctrl obrázek přiblížíte až 64krát. Se zapnutou mřížkou uvidíte hranice pixelů, takže u ikon, pixel artu nebo drobného textu kliknete přesně tam, kam chcete.

Barva z originálu, ne ze zmenšeniny

Řada online nástrojů si obrázek zmenší a barvu čte z náhledu, kde se sousední pixely slijí dohromady. Naše kapátko pracuje s obrázkem v plném rozlišení (až 4096 px na delší straně), takže dostanete skutečnou barvu pixelu.

Kopírování jedním kliknutím

Žádné označování textu ani přepisování čísel. Každé kliknutí do obrázku zkopíruje kód ve zvoleném formátu. Když stejnou barvu potřebujete i v jiném zápisu, detail barvy nabízí všech pět formátů, každý s vlastním tlačítkem pro kopírování.

Paleta dominantních barev

Hned po nahrání nástroj najde až osm barev, které v obrázku převládají, a ukáže je v záložce Dominantní barvy. Téměř stejné odstíny sloučí, takže v paletě nenajdete pět variant šedé. Průhledné části PNG vynechá. Paleta se hodí jako základ barevného schématu pro web, prezentaci nebo příspěvky na sociální sítě. Jestli si barvy drží dostatečný kontrast i bez odstínu, rychle ověříte převodem obrázku do odstínů šedi.

Vybrané barvy pořád na očích

Každá barva, na kterou kliknete, se uloží do záložky Vybrané barvy (posledních 24). Můžete tak porovnat několik míst v obrázku a kdykoliv se k nim vrátit. Na velké obrazovce je panel s barvami hned vedle obrázku.

K čemu se hodí zjistit kód barvy z obrázku

• Web a aplikace: Klient poslal logo jen jako JPG a vy potřebujete přesnou barvu značky do CSS. Když k němu chcete i verzi s průhledným pozadím, použijte odstranění pozadí z obrázku.
• Grafika a sociální sítě: Chcete, aby text na příspěvku ladil s fotkou. Vezměte barvu přímo z ní.
• Prezentace a dokumenty: Barvy firemního loga nastavíte v PowerPointu, Google Slides nebo Canvě přes HEX nebo RGB.
• Kontrola návrhu: Na screenshotu ověříte, jestli má tlačítko v aplikaci opravdu tu barvu, kterou předepisuje design. Velikost exportovaných podkladů pak zkontrolujete v analýze rozměrů obrázků.
• Interiér a móda: Máte fotku látky nebo stěny a hledáte podobný odstín. Kód poslouží jako výchozí bod při výběru ve vzorníku.

Formáty barev, které kapátko vrací

• HEX (#1373b6): zápis pro HTML, CSS a většinu grafických nástrojů.
• RGB (rgb(19, 115, 182)): podíl červené, zelené a modré, každá od 0 do 255. Jak aditivní míchání barev funguje, popisuje Wikipedie.
• HSL (hsl(205, 81%, 39%)): odstín, sytost a světlost. Snadno z něj připravíte světlejší nebo tmavší variantu.
• HSV: odstín, sytost a jas, jak je znáte z výběru barvy ve Photoshopu nebo GIMPu. Rozdíl mezi HSL a HSV podrobně vysvětluje Wikipedie.
• LCH: model, který odpovídá tomu, jak barvy vnímá lidské oko. Kopíruje se v zápisu, kterému rozumí moderní CSS (viz dokumentace MDN, anglicky).

Kapátko barvu z obrázku zjistí. Když ji chcete dál upravovat, převést do dalších formátů nebo k ní hledat ladící odstíny, pokračujte do barevného kola.

Časté otázky

Nahrává se můj obrázek na server?

Ne. Obrázek se načte a zpracuje přímo ve vašem prohlížeči, nikam se neodesílá a po zavření stránky po něm nic nezůstane. Kapátko tak klidně použijete i na interní podklady nebo nezveřejněné návrhy.

Jak zjistit HEX kód barvy z fotky?

Nahrajte fotku, nad obrázkem nechte zvolený formát HEX a klikněte na místo s barvou, kterou hledáte. Kód, například #75dab2, máte hned ve schránce.

Proč se barva z fotky liší od skutečnosti?

Fotoaparát barvy ovlivní osvětlením, vyvážením bílé i kompresí. Kapátko vrací přesně tu barvu, která je uložená v souboru. U fotek proto klikněte na několik míst a porovnejte je v záložce Vybrané barvy. Když podle kódu mícháte barvu na zeď, berte ho jako orientační.

Funguje kapátko na mobilu?

Ano. Na dotykovém displeji klepnete na místo v obrázku a kód se zkopíruje stejně jako na počítači. Lupa u kurzoru se na mobilu nezobrazuje, proto u drobných detailů obrázek nejdřív přibližte.

Jaký je rozdíl mezi HEX a RGB?

Oba zápisy popisují tutéž barvu. RGB ji vyjadřuje třemi čísly od 0 do 255, HEX zapisuje stejná čísla v šestnáctkové soustavě za znakem #. Například rgb(255, 87, 51) je totéž co #ff5733.

Jak z obrázku získat celou barevnou paletu?

Otevřete záložku Dominantní barvy. Najdete v ní až osm hlavních barev obrázku a kliknutím na kteroukoliv z nich zkopírujete její kód.