tigtools

Výběr barvy z obrázku

Nahrajte obrázek a klikněte kamkoli, abyste získali přesnou barvu daného pixelu, nebo nechte nástroj najít hlavní barvy celého obrázku.

Běží ve vašem prohlížeči Bez registrace

JPEG, PNG, WebP, GIF, AVIF nebo BMP, až 25 MB. Obrázek zůstane na vašem zařízení.

Jak používat

  1. Vyberte obrázek nebo jej přetáhněte do pole.
  2. Přesuňte ukazatel nad obrázek; lupa zobrazí pixely kolem něj.
  3. Klikněte nebo klepněte pro výběr barvy a zkopírujte ji jako HEX, RGB nebo HSL.
  4. Přejděte dolů k dominantním barvám, vyberte, kolik jich chcete, a zkopírujte je nebo stáhněte jako CSS proměnné.

Jak to funguje

Obrázek se vykreslí na plátno (canvas) ve vašem prohlížeči a z něj se načte barva přesného pixelu pod ukazatelem. Lupa zobrazuje zvětšenou oblast 11 × 11 pixelů, přičemž vybraný pixel je ohraničený. Obrázky větší než 4096 pixelů na stranu se nejprve zmenší, takže u velmi velkých fotografií je vybraný pixel průměrem několika původních pixelů.

Dominantní barvy se hledají shlukováním k-means: pixely se nejprve seskupí do 32 768 malých barevných přihrádek a ty se poté sloučí do zvoleného počtu barev, váženo podle počtu pixelů v každé z nich. Počáteční body se volí deterministicky, takže stejný obrázek vždy poskytne stejnou paletu.

Barvy se čtou v prostoru sRGB, který prohlížeč používá pro zobrazení. Pokud má obrázek vložený barevný profil s širokým gamutem, hodnoty se mohou mírně lišit od toho, co ukazuje editor fotografií. V prohlížečích, které to podporují (Chrome a Edge na desktopu), používá tlačítko Vybrat z obrazovky vestavěný nástroj EyeDropper k výběru barvy odkudkoli z obrazovky.

Příklady

Nalezení barvy značky

Nahrajte snímek obrazovky s logem, klikněte na jeho hlavní barvu a zkopírujte #1a73e8 nebo rgb(26, 115, 232) do svého CSS.

Paleta z fotografie

Fotografie pláže rozdělená do 6 barev poskytne odstíny písku, moře a oblohy, u každého s podílem obrázku, který pokrývá, seřazené od největšího po nejmenší.

Kontrola odstínu

Přibližte si lupou a vyberte přesný pixel tenké čáry, nikoli vyhlazený okraj vedle ní.

Časté dotazy

Proč se barva mírně liší od mého editoru fotografií?

Prohlížeče převádějí obrázky pro zobrazení do sRGB. Fotografie s profilem s širokým gamutem (Display P3, Adobe RGB) mohou v editoru, který zachovává původní profil, ukazovat mírně odlišné hodnoty.

Proč chybí tlačítko Vybrat z obrazovky?

Vyžaduje EyeDropper API, které podporují jen některé prohlížeče, aktuálně Chrome a Edge na desktopu. Výběr z nahraného obrázku funguje všude.

Jak se vybírají dominantní barvy?

Pomocí shlukování k-means všech pixelů, váženo podle četnosti jednotlivých barev. Malé, ale výrazné detaily se mohou sloučit s větší blízkou barvou; pro jejich oddělení zvyšte počet barev.

Je obrázek nahrán?

Ne. Je dekódován a analyzován touto stránkou ve vašem prohlížeči a nikdy neopustí vaše zařízení.

Soukromí

Obrázek je zpracováván výhradně ve vašem prohlížeči. Není nahráván a vybrané barvy nejsou odesílány ani ukládány.