Ako získam HEX kód farby z obrázka?

Nahrajte obrázok, prejdite po ňom alebo kliknite na pixel — lupa vám pomôže zamerať ten správny. Kód HEX (napríklad #4f46e5) sa okamžite zobrazí a jedným kliknutím ho skopírujete.

Čo je to HEX kód farby?

HEX kód zapisuje farbu ako znak # nasledovaný šiestimi hexadecimálnymi číslicami — po dve pre červenú, zelenú a modrú, napríklad #4f46e5. Je to formát, ktorý vyžadujú CSS, HTML a väčšina grafických nástrojov.

Môžem získať aj RGB a HSL, nielen HEX?

Áno — každý vybraný pixel zobrazuje popri HEX kóde aj hodnoty RGB a HSL, pričom každú z nich skopírujete jedným kliknutím.

Získať HEX kód farby z obrázka — výber kódu farby

Prečo je hex kód hlavným výstupom tejto stránky

Na rozdiel od súrodeneckých stránok, ktoré sa zameriavajú na RGB funkcionálny zápis (napr. rgb(30, 144, 255)) alebo HSL (hsl(210, 100%, 56%)), táto stránka kladie hex kód na prvé miesto. Hexadecimálna reprezentácia farby – šesťmiestny kód ako #1E90FF – je štandardom v CSS a dizajnových nástrojoch. Je kompaktná, nevyžaduje zátvorky ani čiarky, a priamo sa vkladá do vlastností ako color, background-color alebo border-color. Každý pár znakov (RR, GG, BB) kóduje hodnotu červenej, zelenej a modrej zložky v hexadecimálnej sústave (00 až FF, čo zodpovedá 0 – 255 v desiatkovej sústave). Napríklad #1E90FF znamená: červená = 0x1E = 30, zelená = 0x90 = 144, modrá = 0xFF = 255 – presne tie isté hodnoty, aké by ste dostali v zápise rgb(30,144,255).

Šesťmiestny hex kód neobsahuje alfa kanál – transparentnosť nie je súčasťou tohto zápisu. Ak pixel obsahuje priesvitnosť, nástroj ju zobrazí oddelene: „Alpha ‹n›% – this pixel is partly transparent.“ (napr. „Alpha ‹30›% – tento pixel je čiastočne priesvitný.“). To je dôležitý rozdiel oproti osemmiestnemu hexu (#RRGGBBAA), ktorý sa v CSS bežne nepoužíva. Preto ak potrebujete farbu, ktorú vložíte priamo do CSS bez ďalšej syntaxe a bez starostí s alfa kanálom, je táto stránka správna voľba.

Ako nástroj spracúva priesvitnosť (alfa kanál)

Priesvitné pixely sa v obrázkoch vyskytujú najmä vo formátoch PNG, GIF, WebP a AVIF. Alfa kanál definuje, ako veľmi je pixel nepriehľadný – 0 % znamená úplne priehľadný, 100 % úplne nepriehľadný. Keďže hex kód nevie transparentnosť vyjadriť, nástroj ju oznamuje samostatne: zobrazí text „Alpha ‹n›% – this pixel is partly transparent.“.

Dôležité pravidlo: nástroj číta presnú hodnotu pixelu v obrázku – neberie do úvahy, čo sa nachádza za ním. Ak je pixel napríklad 40 % priehľadný, jeho farebné hodnoty (R, G, B) sú také, aké sú uložené v súbore, a nie sú zmiešané s pozadím. To znamená, že ak kliknete na taký pixel, uložíte hex kód zodpovedajúci jeho R, G, B hodnotám (bez alfy) a zároveň uvidíte percento priesvitnosti.

Prečo je to dôležité v praxi?

Dizajnéri často potrebujú extrahovať farbu z priesvitného loga alebo ikony – hex kód im dáva čistú „plnú“ farbu, a alfa kanál im hovorí, ako bola aplikovaná.
Vývojári sa môžu rozhodnúť, či chcú farbu použiť ako rgba(30, 144, 255, 0.6) alebo ako hex s operáciou opacity.
Ak máte dva pixely s rovnakými R, G, B hodnotami, ale rôznou alfou (napr. 30 % a 60 %), nástroj ich uloží ako dve samostatné položky v histórii. Toto je zámerné – zachováva sa odlišná priesvitnosť.

Presný výber pixelov: lupa a klávesová navigácia

Pri vzorkovaní farieb z obrázka je kľúčové trafiť presne ten pixel, ktorý chcete. Aj malý posun myši môže zmeniť hex kód, najmä v oblastiach s anti‑aliasingom (rozmazanie hrán) alebo pri JPEG kompresii. Preto stránka ponúka zväčšený pohľad (magnifier), ktorý vám umožní vidieť jednotlivé pixely vo väčšom formáte. Pri pohybe kurzora sa okno s lupou posúva a zobrazuje aktuálne súradnice a farbu.

Okrem myši môžete použiť klávesnicu:

Šípky posúvajú kríž (crosshair) o 1 pixel v danom smere.
Shift + šípka posúva kríž o 10 pixelov – užitočné pri rýchlom skenovaní väčšej plochy.
Enter alebo Medzerník uloží aktuálne vzorkovanú farbu do histórie.

Táto funkcia je nevyhnutná pre:

Prácu na presných screenshotoch (napr. farba tlačidla s rozmazaným tieňom).
Vzorkovanie textúr, kde sa farba mení pixel po pixeli.
Používateľov, ktorí nemajú myš alebo preferujú klávesnicu z dôvodu prístupnosti.

Ako kompresia obrázkov ovplyvňuje vzorkovanú farbu

JPEG a niektoré formáty používajú stratovú kompresiu, ktorá mení pôvodné farebné hodnoty pixelov. Aj keď sa vám obrázok zdá plochý (napr. jednotná modrá obloha), pri priblížení zistíte, že susedné pixely majú mierne odlišné farby. To isté platí pre anti‑aliasing – techniku vyhladzovania hrán, ktorá vytvára prechodové pixely medzi farbami. Screenshoty často trpia takýmito artefaktmi, pretože operačný systém a grafický ovládač aplikujú ďalšie vyhladzovanie.

Ako to riešiť?

Používajte PNG (bezstratový) pre grafiku s ostrými hranami a presnými farbami.
Pri JPEG vždy očakávajte, že hex kód jedného pixelu nemusí zodpovedať „teoretickej“ farbe oblasti. Pre istotu vyberte niekoľko pixelov a porovnajte ich.
Ak potrebujete farbu z loga alebo brandovej grafiky, je lepšie získať hex kód priamo z dizajnového súboru (Figma, Adobe XD) alebo z CSS pôvodného webu.

Nástroj zobrazuje presnú hodnotu pixelu v obrázku – nie je to chyba, ale vlastnosť spôsobená kompresiou. Preto sa pri dôležitých farbách oplatí skontrolovať viac pixelov a prípadne použiť priemer, ak to vyžaduje vaša práca.

Ukladanie a práca s históriou farieb

Po kliknutí na pixel sa farba uloží do histórie s maximálnym počtom 12 položiek. Každá uložená položka zobrazuje hex kód a farebný vzorník. Kliknutím na vzorník (swatch) sa vybraná farba opäť načíta do zobrazenia – môžete tak ľahko porovnávať jednotlivé odtiene alebo ich kopírovať.

Ako funguje kopírovanie?
Kliknutím na ľubovoľnú zobrazenú farebnú hodnotu (HEX, RGB alebo HSL) ju okamžite skopírujete do schránky. Stačí jedno kliknutie – žiadne označovanie textu. Stránka odošle správu, napríklad „Saved ‹hex› to your picks.“, a po kliknutí na hodnotu sa zobrazí potvrdenie. Ak prehliadač zablokuje prístup k schránke (napr. kvôli bezpečnostným nastaveniam), uvidíte upozornenie: „Could not copy — your browser blocked clipboard access.“ V takom prípade skúste povoliť prístup ku schránke v nastaveniach prehliadača alebo použite iný prehliadač.

Pravidlá pre históriu:

Farba s rovnakými R, G, B, ale odlišnou alfou sa uloží ako samostatná položka.
Po dosiahnutí 12 uložených farieb sa nová položka nepridá, kým niektorú neodstránite („Start over“ vymaže všetko).
História sa stráca pri obnovení stránky – odporúčame si dôležité farby skopírovať a uložiť do externého súboru.

Obmedzenia a podporované formáty súborov

Stránka akceptuje iba tieto formáty: PNG, JPG, WebP, GIF, AVIF, HEIC. Ich MIME typy sú uvedené v tabuľke nižšie. Ak sa pokúsite nahrať nepodporovaný súbor, zobrazí sa chyba: „That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.“ Rovnako ak súbor nie je možné otvoriť (napr. je poškodený), uvidíte: „That image could not be opened. It may be corrupted or in an unsupported format.“

Formát	MIME typy
PNG	`image/png`
JPG	`image/jpeg`
WebP	`image/webp`
GIF	`image/gif`
AVIF	`image/avif`
HEIC	`image/heic`, `image/heif`

Veľkosť obrázka: Ak najdlhšia strana obrázka presahuje 4096 pixelov, stránka ho automaticky zmenší. Toto obmedzenie zabezpečuje plynulú odozvu a nízku spotrebu pamäte – vzorkovanie na veľmi veľkom obrázku by mohlo spomaliť prehliadač. Ak potrebujete presné farby z veľmi veľkého súboru, najskôr ho orezajte alebo zmenšite v externom editore.

Po načítaní obrázka sa ihneď zobrazí farba jeho stredového pixelu – nemusíte nikam kliknúť. Okrem hex kódu uvidíte aj rozmery (šírka × výška), súradnice (x, y) a RGB a HSL hodnoty. Pohybom myši meníte vzorkovaný pixel.

Pre koho je tento nástroj určený a ako ho integrovať do workflow

Dizajnéri UI/UX – extrahujú presné hex kódy z referenčných snímok, mockupov alebo existujúcich webov. Lupa a klávesová navigácia pomáhajú vybrať farbu aj v zložitých textúrach.
Vývojári front‑endu – potrebujú hex kód pre CSS. Stačí kliknúť na hodnotu a vložiť ju priamo do color: #1E90FF;. Alfa kanál je uvedený samostatne, takže v prípade potreby použijú rgba(30, 144, 255, 0.8).
Grafickí dizajnéri – vzorkujú farby z fotografií pre brandové palety alebo sociálne médiá. História s 12 farbami umožňuje pozbierať niekoľko odtieňov a potom ich porovnať.
Bežní používatelia – potrebujú získať hex kód z loga, pozadia alebo screenshotu pre osobný projekt. Nástroj funguje priamo v prehliadači, nič nie je potrebné inštalovať.

Integrácia do workflow:

Otvorte stránku hex-color-from-image.
Nahrajte obrázok (drag & drop alebo výber súboru).
Prejdite kurzorom na pixel, ktorý vás zaujíma – v reálnom čase vidíte hex, RGB, HSL.
Kliknutím uložíte farbu do histórie (ak potrebujete viac farieb, opakujte).
Kliknutím na hex kód ho skopírujete a vložíte do CSS, Figmy, Photoshopu alebo iného nástroja.
Ak ste skončili, stlačte „Start over“ pre vyčistenie obrázka a histórie.

Často kladené otázky (FAQ)

1. Prečo hex kód na tejto stránke neobsahuje alfa kanál?
Pretože štandardný šesťmiestny hex (napr. #1E90FF) je určený pre nepriehľadné farby. Alfa kanál sa v hexe vyjadruje až pomocou osemmiestneho tvaru (#RRGGBBAA), ktorý nie je tak rozšírený. Stránka preto transparentnosť uvádza samostatne ako percento.

2. Farba, ktorú som vybral, sa líši od toho, čo vidím v originálnom obrázku. Prečo?
Pravdepodobne ide o stratovú kompresiu JPEG alebo anti‑aliasing pri screenshotoch. Skúste vybrať iný pixel v blízkosti, alebo použite PNG obrázok pre presnejšie výsledky.

3. Prečo sa mi nepodarilo skopírovať farbu do schránky?
Prehliadač môže blokovať prístup k schránke z bezpečnostných dôvodov. Skontrolujte nastavenia prehliadača pre túto doménu, alebo skúste použiť iný prehliadač (napr. Chrome, Firefox, Edge). Ak problém pretrváva, manuálne označte a skopírujte text.

4. Môžem uložiť farbu s priesvitnosťou ako samostatnú položku?
Áno, ak má pixel alfa kanál, hex kód sa uloží bez neho, ale priesvitnosť je zobrazená a uložená samostatne. Farbu s rovnakými R, G, B ale odlišnou alfou systém uloží ako samostatnú položku v histórii.

5. Prečo je maximálny počet farieb v histórii 12?
Je to praktický limit pre rýchlu prácu – nezahlcuje rozhranie a pokrýva väčšinu prípadov, keď potrebujete vybrať niekoľko farieb z jedného obrázka. V prípade potreby môžete použiť „Start over“ a začať znova.

6. Ako funguje klávesová navigácia, keď mám otvorený obrázok?
Po načítaní obrázka môžete stláčať šípky na klávesnici – kríž sa bude posúvať o 1 pixel. Podržaním Shiftu a stlačením šípky sa posuniete o 10 pixelov. Enter alebo Medzerník uloží aktuálnu farbu. Táto funkcia je užitočná najmä pri presnom výbere pixelov bez použitia myši.

Časté otázky