Výběr barvy z obrázku

Nahrajte obrázek a vyberte barvy s přesností na pixel. Najeďte pro lupu, kliknutím uložte barvy s hex, RGB a HSL.

🖼️

Přetáhněte obrázek sem nebo klikněte pro nahrání

Podporuje PNG, JPG, GIF, WebP

Vybrané barvy

Zatím nebyly vybrány žádné barvy. Nahrajte obrázek a kliknutím vyberte barvy.

O výběru barev z obrázků

Extrakce barev z obrázků je nezbytná pro designéry, vývojáře a umělce. Ať už chcete sladit paletu značky, replikovat barevné schéma nebo hledáte inspiraci, výběr barev z fotek vám poskytne přesné hodnoty pixelů.

Jak to funguje

Nástroj načte váš obrázek na HTML5 plátno. Při najetí myší lupa ukazuje zvětšený pohled pixelů kolem kurzoru. Kliknutím se přečtou přesné RGB hodnoty daného pixelu pomocí getImageData() a převedou se na formáty hex, RGB a HSL.

Tipy pro lepší výběr barev

Vysvětlení barevných formátů

Jak používat výběr barvy z obrázku

  1. Klikněte na oblast nahrávání nebo přetáhněte a pusťte soubor obrázku (PNG, JPG, JPEG, GIF, WebP nebo BMP). Obrázek je načten přímo do vašeho prohlížeče — žádný soubor není nahrán na žádný server.
  2. Přesuňte kurzor nad obrázek pro aktivaci pixelové lupy. Lupa ukazuje zvětšený pohled oblasti pod kurzorem, což usnadňuje výběr přesného pixelu, který chcete.
  3. Klikněte kamkoliv na obrázek pro extrakci barvy v daném pixelu. Nástroj okamžitě zobrazí hodnoty HEX, RGB a HSL pro vybranou barvu spolu s náhledem barevného vzorníku.
  4. Zkopírujte libovolnou hodnotu barevného formátu do schránky jediným kliknutím. Pokračujte v klikání na různé oblasti obrázku pro vytvoření kolekce vzorkovaných barev z vaší fotky, designového návrhu nebo snímku obrazovky.

Principy digitální extrakce barev

Každý pixel v digitálním obrázku je reprezentován kombinací červených, zelených a modrých (RGB) světelných hodnot, typicky uložených jako 8bitová celá čísla od 0 do 255 na kanál. Když kliknete na pixel v obrázku, výběr barvy přečte tyto tři hodnoty přímo z obrazových dat uložených v prvku canvas prohlížeče. Metoda getImageData() Canvas API vrací Uint8ClampedArray obsahující hodnoty RGBA pro každý pixel v zadané oblasti. To umožňuje extrakci barvy s přesností na pixel bez ztrátového zpracování nebo aproximace.

Převod z RGB do jiných barevných formátů se řídí standardními matematickými vzorci. HEX je jednoduše hodnoty RGB kódované jako dvoumístná hexadecimální čísla (#RRGGBB). HSL (odstín, sytost, světlost) je odvozen nalezením maximálního a minimálního kanálu RGB, výpočtem světlosti jako jejich průměru a výpočtem odstínu na základě toho, který kanál je dominantní. HSV (odstín, sytost, hodnota) je podobný, ale používá hodnotu (maximální kanál) místo světlosti. Tyto převody jsou bezeztrátové pro plně neprůhledné pixely — mezi HEX, RGB, HSL a HSV se neztrácí žádná barevná informace.

Při extrakci barev z fotografií buďte si vědomi několika faktorů, které mohou ovlivnit přesnost. Anti-aliasing na hranách objektů vytváří smíšené pixely, které nemusí reprezentovat skutečnou barvu ani jedné z přilehlých oblastí — přibližte pomocí lupy pro výběr pixelů v interiéru oblasti. Komprese JPEG může zavést jemné barevné artefakty, zvláště v oblastech s jemným detailem nebo plynulými přechody. Pro nejpřesnější porovnávání barev použijte bezeztrátové formáty (PNG, TIFF), pokud je to možné. Barevné profily obrazovky (profily ICC) a kalibrace monitoru také ovlivňují, jak se barvy jeví, ačkoli extrahované hodnoty budou vždy skutečné digitální hodnoty uložené v souboru obrázku.

Často kladené dotazy

Je můj obrázek nahrán na server?
Ne. Veškeré zpracování probíhá výhradně ve vašem prohlížeči. Váš obrázek nikdy neopustí vaše zařízení.
Jaké obrazové formáty jsou podporovány?
PNG, JPG, GIF a WebP. PNG a WebP poskytují nejpřesnější barvy, protože se vyhýbají kompresním artefaktům.
Kolik barev mohu vybrat?
V historii je uloženo až 12 barev. Kliknutím na libovolnou barvu zkopírujete její hex hodnotu do schránky.
Proč lupa ukazuje kostkaté pixely?
Lupa vypíná vyhlazování obrazu pro zobrazení přesných hodnot pixelů, což je nezbytné pro přesný výběr barev.
Je můj obrázek nahrán na server?
Ne. Obrázek je načten výhradně ve vašem prohlížeči pomocí HTML5 Canvas API. Žádná pixelová data nejsou nikdy přenesena na jakýkoliv server, což dělá tento nástroj bezpečný pro důvěrné nebo proprietární obrázky.
Jaké formáty obrázků jsou podporovány?
Všechny standardní webové obrazové formáty: PNG, JPG/JPEG, GIF, WebP a BMP. Pro nejpřesnější extrakci barev se doporučuje PNG, protože používá bezeztrátovou kompresi. Obrázky JPEG mohou mít jemné kompresní artefakty.
Proč se barva, kterou jsem vybral/a, jeví mírně odlišně od očekávané?
Anti-aliasing na hranách objektů vytváří smíšené pixely. Komprese JPEG může také mírně posunout barvy. Použijte lupu pro výběr pixelů v interiéru oblasti, mimo hrany, pro nejpřesnější výsledky.
Mohu extrahovat více barev ze stejného obrázku?
Ano. Klikněte na tolik oblastí, kolik chcete — každé kliknutí extrahuje novou barvu. Všechny extrahované barvy jsou zobrazeny s jejich hodnotami HEX, RGB a HSL, připravené k individuálnímu kopírování.

Související nástroje