Preskočiť na hlavný obsah
LibraTool logoLibraTool

Extraktor farebnej palety z obrázkov zadarmo

Extrahujte dominantné farby z ľubovoľného obrázka pomocou kvantizovania farieb k-means. Získajte hex kódy pre 2–16 najvýraznejších farieb vašej fotografie alebo loga.

Po načítaní funguje offline

Presuňte sem súbor alebo kliknutím vyberte

JPG, PNG, WebP, GIF, HEIC, HEIF · spracované vo vašom zariadení

alebo stlačte Ctrl+V na vloženie zo schránky

Prehľadávať súbory

Tip: snímku obrazovky môžete vložiť klávesmi Ctrl+V

Vaše súbory nikdy neopustia vaše zariadenie. Všetko spracovanie prebieha lokálne vo vašom prehliadači.

Bežné použitia

  • Extrahujte farby značky z logaZískajte presné hexadecimálne kódy pre dominantné farby v akomkoľvek logu alebo obrázku značky.
  • Vytvárajte webové farebné palety z fotografiíGenerujte zlaďovacie farby webov z fotografií hrdinov alebo obrázkov pozadia.
  • Extrahujte farby z inspiračných fotografiíŤahajte farebné palety z fotografií vnútorného dizajnu alebo módy na použitie vo vlastných projektoch.
  • Analyzujte palety obrazov a umeniaŠtudujte farebné palety slávnych obrazov alebo vlastného umenia extrahovaním dominantných farieb.
  • CSS téma z obrázkovGenerujte CSS premenné témy z obrázkov - užitočné pre dynamickú tematizáciu alebo automaticky generované farebné schémy.

Ako to funguje

Extrakcia farieb beží výhradne vo vašom prehliadači pomocou ručne napísaného zhlukovacieho algoritmu k-means++ aplikovaného na surové pixelové dáta čítané z Canvas API — bez servera, bez knižnice tretej strany. Rovnaký obrázok a nastavenie počtu farieb vždy vytvoria rovnakú paletu, pretože algoritmus používa deterministický pseudonáhodný generátor čísel (mulberry32) namiesto Math.random.

  1. 1
    Canvas číta pixelové dáta
    Obrázok sa vykreslí na mimoobrazovkový element HTML Canvas a zmenší na najviac 200 px na dlhšej strane. Metóda getImageData() Canvas API vráti každý pixel ako surové bajty RGBA a úplne priehľadné pixely (alfa < 128) sa pred zhlukovaním zahodia.
  2. 2
    k-means++ zhlukuje pixely
    Inicializátor k-means++ deterministicky zasadí ťažiská, potom algoritmus iteruje až 20-krát: každý pixel sa priradí k najbližšiemu ťažisku v priestore RGB, potom sa ťažiská prepočítajú ako priemer všetkých priradených pixelov. Zhluky, ktoré sa zrútia na rovnakú hex hodnotu, sa zlúčia, takže každá vzorka vo výsledku je jedinečná.
  3. 3
    Vypočítajú sa metadáta pre každú farbu
    Každé ťažisko sa prevedie na HEX, HSL a jeho podiel z celkového počtu pixelov (percento). Relatívny jas WCAG sa počíta podľa štandardného vzorca a kontrastné pomery voči čiernej aj bielej sa zobrazujú spolu s každou vzorkou.
  4. 4
    Export a výstup kvapkadla farieb
    Paletu môžete skopírovať ako vlastné vlastnosti CSS, premenné SCSS, úryvok konfigurácie Tailwind alebo JSON. Kvapkadlo s klikacím vzorkovaním namapuje vaše kliknutie na náhľad späť na presné súradnice zdrojového pixelu na plátne v plnom rozlíšení a pridá farbu tohto pixelu do samostatného zoznamu vybraných farieb. Pruh palety PNG sa dá stiahnuť cez Canvas toBlob().

Váš obrázok sa nikdy nenahráva — dekóduje sa a spracúva výhradne v pamäti vášho prehliadača a na analytiku sa hlási iba veľkosť súboru (v KB).

Súvisiace nástroje

🎨

Generátor náhodných farieb

Generujte náhodné farby po jednej alebo ako paletu piatich, zamknite tie, ktoré sa vám páčia, kopírujte hodnoty HEX, RGB alebo HSL a exportujte paletu ako PNG alebo CSS.

Vyskúšajte
🎨

Generátor farebnej palety

Generujte komplementárne, analogické, triadické a monochromatické farebné palety z ľubovoľnej základnej farby. Skopírujte hex kódy jedným kliknutím.

Vyskúšajte
🎨

Výber farieb a generátor paliet

Vyberte farby, konvertujte medzi HEX/RGB/HSL a generujte harmonické palety.

Vyskúšajte

Často kladené otázky