Získat HEX barvu z obrázku

Co nástroj dělá a čím se liší

Nástroj na hex barvy z obrázku řeší jeden konkrétní úkol: z vybraného obrázku získáte hexadecimální kód kterýkoliv pixelu. Po nahrání souboru stačí nad obrázkem pohybovat kurzorem nebo kliknout – a ihned vidíte šestiznakový hex kód (např. #1E90FF) spolu s hodnotami RGB a HSL. Hex kód je zde primárním výstupem, a to záměrně. Zatímco sesterské stránky nástroje vystavují barvu v zápisu rgb(30, 144, 255) nebo hsl(210, 100 %, 56 %), tato stránka dává přednost kompaktní webové notaci. Šestiznaková hexadecimální reprezentace je standardem v CSS, designových aplikacích (Figma, Photoshop) a prakticky veškerém vývojářském nástrojovém vybavení. Nevyžaduje závorky, čárky ani jednotky – píšete color: #1E90FF a je hotovo.

Důležitý rozdíl oproti RGB nebo HSL stránkám spočívá v tom, že hex kód neobsahuje alfa kanál. Průhlednost pixelu se proto reportuje samostatně jako procentuální hodnota: “Alpha 35 % – this pixel is partly transparent.” Pokud narazíte na poloprůhledný pixel, hex kód zůstává čistě RGB, bez osmiznakové varianty s alfa. To odpovídá tomu, jak hex v CSS historicky funguje – standardní šestiznakový tvar neumí průhlednost vyjádřit. Nástroj tak respektuje konvence, které vývojáři a designéři očekávají.

Vzorkování pixelů: myš, klávesnice a zvětšený náhled

Jakmile nahrajete obrázek (podporované formáty viz dále), nástroj automaticky zobrazí barvu středového pixelu. Hned vidíte jeho souřadnice, hex kód, RGB a HSL. Od tohoto okamžiku můžete barvy vzorkovat dvěma způsoby – myší nebo klávesnicí.

Při pohybu kurzoru nad obrázkem se v reálném čase mění všechny hodnoty podle aktuálního pixelu pod ukazatelem. Kliknutím vybranou barvu uložíte do historie – o tom za chvíli. K dispozici je také zvětšený náhled, který usnadňuje zamíření na konkrétní pixel, zvláště v oblastech s anti-aliasingem nebo kompresními artefakty (viz edge cases v další sekci).

Klávesnicová navigace je navržena pro přesnost a přístupnost. Šipkami pohybujete křížem o jeden pixel. Podržíte-li Shift a stisknete šipku, skok je o deset pixelů – užitečné pro rychlejší procházení větších ploch. Enter nebo Mezerník uloží aktuálně vzorkovanou barvu do historie, stejně jako kliknutí myší. Tato kombinace ovládání dělá nástroj použitelným bez myši a zároveň umožňuje jemné doladění v kritických místech, kde i jediný pixel může změnit hex kód.

Průhlednost, komprese a omezení obrázků

Při práci s hex kódy z obrázků je třeba rozumět několika technickým aspektům, které ovlivňují výsledek.

Průhlednost a alfa kanál

Jak už bylo řečeno, hex kód alfa kanál neobsahuje. Pokud pixel není zcela neprůhledný, nástroj vedle hex, RGB a HSL zobrazí hlášku “Alpha ‹n› % – this pixel is partly transparent.” Hodnota alfa je uvedena jako procento, kde 100 % znamená plně neprůhledný. Důležité je, že se čte samotný pixel – nebere se v úvahu, co by mohlo být pod ním. Pokud máte PNG s průhledností, nástroj vám řekne, jakou barvu a míru průhlednosti daný pixel skutečně nese. Stejné RGB hodnoty s různou alfou se ukládají do historie jako samostatné položky – to je přesné a užitečné pro případy, kdy potřebujete rozlišit například #FF0000 s alfa 50 % a #FF0000 s alfa 80 %.

Komprese a anti-aliasing

U obrázků ve formátu JPEG nebo u screenshotů (i v PNG) může dojít ke změně původních pixelových hodnot. JPEG používá ztrátovou kompresi, která rozmazává ostré hrany. Anti-aliasing při vykreslování textu nebo tvarů přidává mezilehlé barvy pro hladší vzhled. Výsledkem je, že dva zdánlivě stejně barevné pixely vedle sebe mohou mít mírně odlišné hex kódy. Nástroj vždy čte přesnou hodnotu uloženou v souboru – žádné dopočítávání ani průměrování. Pokud potřebujete barvu z loga, které je vykresleno vektorově, a máte jen JPEG screenshot, počítejte s tím, že hex kód nemusí být identický s originálem.

Škálování velkých obrázků

Aby nástroj zůstal rychlý a nepřetěžoval prohlížeč, obrázky s delší stranou přesahující 4096 pixelů se automaticky zmenší. To je běžná praxe – prohlížeč by při vyšším rozlišení mohl zpomalit vykreslování a vzorkování. Pokud potřebujete barvu z pixelu ve velmi velkém snímku, nejprve si z něj vyřízněte menší oblast. Po škálování se změní souřadnice pixelů, ale nástroj pracuje s upraveným obrázkem, takže barvy zůstanou zachovány (škálování je spojité, nepřidává nové barvy).

Podporované formáty a chybová hlášení

Nástroj akceptuje šest běžných obrazových formátů:

Pokud se pokusíte nahrát nepodporovaný soubor (např. BMP, TIFF nebo SVG), zobrazí se zpráva: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” Pokud soubor nejde otevřít (je poškozený nebo má neznámou strukturu), uvidíte: “That image could not be opened. It may be corrupted or in an unsupported format.” Obě hlášení jsou přesná a vedou k okamžité nápravě.

Po úspěšném načtení se zobrazí rozměry obrázku (šířka × výška) a text “Image ready — move over it to sample, click to save a color.” To je signál, že můžete začít vzorkovat.

Ukládání a správa historie barev

Každé kliknutí myší nebo stisknutí Enter/Mezerníku uloží aktuálně vzorkovanou barvu do historie. Historie pojme maximálně 12 položek. Pokud ji naplníte, nejstarší položka se automaticky odstraní a nová se přidá na konec. Každá uložená barva se zobrazí jako barevný čtvereček (swatch) vedle svého hex kódu. Kliknutím na kterýkoli swatch se daná barva načte zpět do hlavního zobrazení – uvidíte její hex, RGB, HSL a případně alfa. To je užitečné, když potřebujete porovnat několik vzorků nebo se vrátit k dříve uložené hodnotě.

Důležité pravidlo: barvy se stejnými RGB hodnotami, ale odlišnou alfou, se do historie ukládají zvlášť. Pokud tedy vzorkujete #FF0000 s alfa 50 % a pak #FF0000 s alfa 80 %, v historii uvidíte dva záznamy. Liší se – a nástroj to respektuje.

Kliknutím na libovolnou zobrazenou hodnotu (HEX, RGB nebo HSL) ji zkopírujete do schránky. Pokud prohlížeč kopírování z bezpečnostních důvodů zablokuje, zobrazí se varování: “Could not copy – your browser blocked clipboard access.” To se může stát například na stránkách načtených přes HTTP místo HTTPS nebo v některých striktně nastavených prohlížečích. Řešením je přejít na HTTPS verzi stránky nebo povolit přístup ke schránce v nastavení prohlížeče.

Pokud chcete začít znovu – vymazat obrázek, historii a vrátit se do výchozího stavu – stačí kliknout na tlačítko “Start over”.

Pro koho je nástroj určen a jak jej používat

Cílová skupina je široká, ale konkrétní:

• Designéři, kteří potřebují z referenčního obrázku (fotografie, mockup, skica) vytáhnout přesnou barvu pro UI prvek. Hex kód jde rovnou do stylopisu nebo do nástroje jako Figma.
• Vývojáři, kteří ladí CSS a potřebují hex hodnotu pro color, background-color, border-color atd. Žádné převádění, žádné dopočítávání – #1E90FF rovnou do kódu.
• Tvůrci obsahu – grafici, youtubeři, správci sociálních sítí – kteří sladí barvy thumbnailu, loga nebo brandové grafiky s fotografickým podkladem.
• Kdokoli, kdo potřebuje zkopírovat hex kód z obrázku, ať už jde o sladění barvy písma s pozadím, nebo o věrné zachycení odstínu z produktové fotografie.

Praktický postup je jednoduchý:

1. Nahrajte obrázek (táhněte myší nebo použijte tlačítko pro výběr souboru).
2. Pohybujte kurzorem nebo šipkami nad obrázkem – sledujte hodnoty.
3. Kliknutím (nebo Enter/Mezerníkem) uložte barvu do historie.
4. Kliknutím na hex, RGB nebo HSL hodnotu ji zkopírujte.
5. Vložte do CSS, designového nástroje nebo kamkoli potřebujete.

Často kladené otázky (FAQ)

Proč se hex kód liší od barvy, kterou vidím v Photoshopu? Pokud je zdrojový obrázek JPEG nebo prošel kompresí, hodnoty pixelů se mohly změnit. Photoshop může také zobrazovat barvu po aplikaci barevného profilu (ICC), zatímco nástroj čte surová data uložená v souboru. Pro přesný přenos používejte PNG bez barevných profilů.

Proč hex kód neobsahuje alfa kanál? Standardní šestiznakový hex (např. #FF0000) reprezentuje pouze RGB. Alfa kanál by vyžadoval osmiznakový tvar (#FF000080), který není v CSS nativně podporován ve všech starších verzích a není ani primárním cílem této stránky. Nástroj proto průhlednost reportuje zvlášť jako procento.

Co mám dělat, když se mi obrázek nenačte? Zkontrolujte, zda je soubor v podporovaném formátu (PNG, JPG, WebP, GIF, AVIF, HEIC). Pokud je formát v pořádku, soubor může být poškozený. Zkuste jej otevřít v jiném prohlížeči nebo programu. Pokud má obrázek delší stranu přes 4096 pixelů, nástroj jej automaticky zmenší – to není chyba, ale ochrana výkonu.

Kolik barev si mohu uložit do historie? Maximálně 12. Pokud uložíte třináctou, nejstarší se smaže. Barvy se stejnými RGB, ale různou alfou se počítají jako samostatné položky.

Proč se mi nezkopírovala hodnota do schránky? Prohlížeč může blokovat přístup ke schránce z bezpečnostních důvodů, zejména pokud je stránka načtena přes HTTP místo HTTPS, nebo pokud máte v prohlížeči přísná omezení. Zkuste stránku otevřít přes HTTPS nebo povolit přístup ke schránce v nastavení.

Můžu nástroj používat bez myši? Ano. Šipkami pohybujete křížem, Shift + šipka posouvá o 10 pixelů, Enter nebo Mezerník uloží barvu. Všechny funkce jsou dostupné z klávesnice.