Přeskočit na hlavní obsah
LibraTool logoLibraTool

Extraktor barevné palety z obrázku zdarma

Extrahujte dominantní barvy z libovolného obrázku pomocí k-means kvantizace barev. Získejte hex kódy pro 2–16 nejčastějších barev ve vaší fotografii nebo logu.

Funguje offline po načtení

Přetáhněte soubor sem nebo klikněte pro výběr

JPG, PNG, WebP, GIF, HEIC, HEIF · zpracováno na vašem zařízení

nebo stiskněte Ctrl+V pro vložení ze schránky

Procházet soubory

Tip: snímek obrazovky můžete vložit pomocí Ctrl+V

Vaše soubory nikdy neopustí vaše zařízení. Veškeré zpracování probíhá lokálně ve vašem prohlížeči.

Běžná použití

  • Extrahujte barvy značky z logaZískejte přesné hex-kódy pro dominantní barvy v jakémkoli logu nebo obrázku značky.
  • Vytvářejte webové barevné palety z fotografiíVygenerujte barevné palety webových stránek, které odpovídají fotografiím hrdinů nebo obrázkům na pozadí.
  • Extrahujte barvy z fotografií inspiraceExtrahujte barevné palety z fotografií interiérů nebo módy pro použití ve vašich vlastních projektech.
  • Analyzujte palety maleb a uměníStudujte barevné palety slavných obrazů nebo svého vlastního umění extrahováním dominantních barev.
  • Téma CSS z obrázkůVytvářejte motivy CSS proměnných z obrázků — užitečné pro dynamické motivy nebo automaticky generovaná barevná schémata.

Jak to funguje

Extrakce barev běží zcela ve vašem prohlížeči pomocí ručně napsaného shlukovacího algoritmu k-means++ aplikovaného na surová pixelová data přečtená z Canvas API — bez serveru, bez knihovny třetí strany. Stejný obrázek a nastavení počtu barev vždy produkují stejnou paletu, protože algoritmus používá deterministický pseudonáhodný generátor čísel (mulberry32) místo Math.random.

  1. 1
    Canvas čte pixelová data
    Obrázek se vykreslí na skrytý prvek HTML Canvas a zmenší na nejvýše 200px na delší straně. getImageData() Canvas API vrací každý pixel jako surové bajty RGBA a zcela průhledné pixely (alfa < 128) se před zahájením shlukování zahodí.
  2. 2
    k-means++ shlukuje pixely
    Inicializátor k-means++ deterministicky nasadí centroidy, poté algoritmus iteruje až 20krát: každý pixel se přiřadí svému nejbližšímu centroidu v prostoru RGB, poté se centroidy přepočítají jako průměr všech přiřazených pixelů. Shluky, které se sloučí na stejnou hex hodnotu, se spojí, takže je každý vzorek ve výsledku unikátní.
  3. 3
    Počítají se metadata pro každou barvu
    Každý centroid se převede na HEX, HSL a svůj podíl na celkovém počtu pixelů (procento). Relativní jas WCAG se počítá podle standardního vzorce a poměry kontrastu vůči černé i bílé se zobrazují u každého vzorku.
  4. 4
    Export a výstup kapátka
    Paletu lze zkopírovat jako vlastní CSS proměnné, proměnné SCSS, úryvek konfigurace Tailwind nebo JSON. Kapátko s kliknutím pro odběr vzorku mapuje vaše kliknutí v náhledu zpět na přesné souřadnice zdrojového pixelu na plátně plného rozlišení a přidává barvu tohoto pixelu do samostatného seznamu vybraných barev. Pás palety PNG lze stáhnout přes Canvas toBlob().

Váš obrázek se nikdy nenahrává — dekóduje se a zpracovává zcela v paměti vašeho prohlížeče a analytice se hlásí jen velikost souboru (v KB).

Související nástroje

🎨

Generátor náhodných barev

Generujte náhodné barvy po jedné nebo jako paletu pěti, zamkněte ty, které se vám líbí, zkopírujte hodnoty HEX, RGB nebo HSL a exportujte paletu jako PNG nebo CSS.

Vyzkoušet
🎨

Generátor barevných palet

Generujte komplementární, analogické, triadické a monochromatické barevné palety z libovolné základní barvy. Kopírujte hex kódy jedním kliknutím.

Vyzkoušet
🎨

Výběr barev a generátor palety

Vybírejte barvy, převádějte mezi HEX/RGB/HSL a generujte harmonické palety.

Vyzkoušet

Časté dotazy