Extraktor dominantních barev

Najděte přesné dominantní barvy a procenta pokrytí pixelů (%) v jakémkoli obrázku lokálním K-Means shlukováním, včetně rolí tématu Primary/Secondary/Accent a kontrastu WCAG.

Bez nahráváníBez registraceDávkové zpracování

Přetáhněte obrázek k analýze dominantních barev a podílu %

Podporuje JPG, PNG, WebP, SVG a AVIF • K-Means rozklad procent • Živý náhled UI tématu

Vybrat soubor

Offline engine je připraven100% soukromý pracovní prostor v prohlížeči • Žádné nahrávání do cloudu

100% soukromé • Žádné nahrávání souborů na server

Proč používat analyzátor K-Means dominantních barev a pokrytí od Utiliome?

Navrženo od základu pro přísné soukromí, okamžité spuštění a nulové tření. Žádné předplatné, paywally ani registrace účtu.

Skutečné K-Means pokrytí plochy pixelů (%)

Rozdělí pixely obrázku do k = 3, 5, 6 nebo 8 statistických shluků a spočítá přesné procento (%) neprůhledné plochy, kterou zabírá každá dominantní barva.

Živý UI mockup Primary / Secondary / Accent

Automaticky přiřadí #1 Dominantní pozadí, #2 Secondary povrch a Accent se nejvyšší sytostí živému náhledu UI karty se skóre kontrastního poměru WCAG 2.1 v reálném čase.

Proporcionální skládaný distribuční pruh

Na první pohled vizualizujte chromatickou rovnováhu obrázku proporcionálním skládaným procentním pruhem a jedním kliknutím získejte reporty pokrytí HEX, RGB, HSL a JSON.

100% soukromý běh v prohlížeči a dávkové záložky

Analyzujte více produktových fotek, screenshotů aplikací nebo brand bannerů postupně v lokální paměti prohlížeče a stáhněte PNG report rozkladu dominantních barev 1200×760.

Utiliome vs tradiční cloudové alternativy

Porovnejte náš lokální WebAssembly engine s legacy cloudovými nástroji.

Funkce	Utiliome (lokální prohlížeč)	Legacy cloudové převodníky
Matematika shlukování a podíl plochy (%)	Deterministické K-Means++ shlukování s přesným % pokrytím pixelů na barvu	Základní zaokrouhlení bucketů bez dat o procentním podílu
Role UI tématu a náhled kontrastu WCAG	Automaticky mapuje role Primary, Secondary a Accent + živý kontrastní poměr WCAG	Surový seznam barev bez UI kontextu a kontroly kontrastu
Statistický JSON a vizuální PNG report	JSON report jedním kliknutím (HEX, RGB, HSL, %, Role) + stáhnutelný PNG graf	Pouze ruční kopírování HEX
Ochrana dat	100% výpočet HTML5 Canvas na straně klienta (nulové nahrávání na server)	Nahrává proprietární návrhy a fotky na vzdálené servery

Jak to funguje

Jak najít dominantní barvy a podíl pixelů (%) ve 3 krocích

Není nutná žádná instalace softwaru. Vše běží přímo ve vašem webovém prohlížeči.

Přetáhněte jeden nebo více obrázků

Přetáhněte soubory JPG, PNG, WebP, SVG nebo AVIF do pracovního prostoru. Průhledné pixely pozadí se automaticky vyloučí, aby nenarušily procenta pokrytí.

Zvolte počet K-Means shluků (k = 3, 5, 6 nebo 8)

Zvolte k=3 pro čistý rozklad Primary/Secondary/Accent (pravidlo 60-30-10), nebo k=6 až k=8 pro granulární chromatický audit.

Zkopírujte HEX / JSON report nebo stáhněte PNG rozklad

Klikněte na kartu shluku a zkopírujte HEX kód, zkopírujte celý JSON procentní report, nebo stáhněte vysoce rozlišený PNG report dominantních barev.

Jak K-Means++ shlukování barev najde skutečné dominantní barvy a podíl pixelů (%)

Rychlá odpověď: Na rozdíl od pevné mřížkové kvantizace, která spojité gradienty rozdělí do libovolných košů, K-Means++ iterativně seskupuje pixely v 3D RGB prostoru kolem k přirozených centroidů a vydělí počet pixelů každého shluku celkovým počtem neprůhledných pixelů, aby spočítal přesný podíl plochy (%).

Audit pravidla 60-30-10 a dynamické UI téma z dominantních barev

Rychlá odpověď: Nastavení počtu shluků na k = 3 umožní designérům a vývojářům auditovat, zda rozložení, ilustrace nebo fotka interiéru dodržuje klasické pravidlo proporcí barev 60-30-10 — a náhledne, jak tyto přesné barvy fungují jako živé UI karta s hodnocením kontrastu WCAG.

V UI/UX inženýrství, interiérovém designu a systémech brand identity vyvážené kompozice obvykle dodržují pravidlo 60-30-10:

Pořadí shluku	Cílový podíl plochy	Role design systému a mapování živého náhledu Utiliome
#1 Primary Dominant	`~55 % – 65 %`	Pozadí / plátno: Nastaví celkovou náladu jasu (tmavý vs. světlý režim) na kartě Live Theme Preview
#2 Secondary Tone	`~25 % – 35 %`	Karty, navigace a kontejnery: Podporuje primární pozadí, aniž by soupeřilo o pozornost
#3 Accent Highlight	`~5 % – 15 %`	Tlačítka Call-to-Action (CTA) a odznaky: Automaticky vybráno ze shluku s nejvyšší sytostí HSL (`S%`) a testováno na kontrast WCAG 2.1 vůči Primary Dominant barvě

Extraktor dominantních barev vs. Extract Color Palette: jak zvolit správný nástroj

Rychlá odpověď: Použijte Extraktor dominantních barev, když potřebujete statistická K-Means procenta pixelů (%), audity proporcí 60-30-10 a živý náhled UI tématu Primary/Secondary/Accent. Použijte Extract Color Palette, když chcete rozmanitou kreativního paletu 5–12 vzorníků s filtry nálad a kapátkem pixelů na kliknutí.

Vyberte mezi dvěma doplňkovými barevnými nástroji podle toho, zda potřebujete statistické měření plochy, nebo kreativní kurátorství vzorníků:

Požadavek workflow	Extraktor dominantních barev (tento nástroj)	Extract Color Palette
Přesné pokrytí pixelů `%` a skládaný pruh	Ano (`k = 3, 5, 6, 8` K-Means shluky s `%` podílem)	Ne (optimalizuje rozmanitost vzorníků před podílem plochy)
Živá karta Primary / Secondary / Accent + kontrast WCAG	Ano (odznak kontrastního poměru v reálném čase)	Ne (vykresluje jednotné pruhy vzorníků)
Interaktivní kapátko pixelů kliknutím na obrázek	Automatické shlukování centroidů	Ano (klikněte na libovolný pixel a vzorkujte i připněte)
Filtry nálad (Vibrant / Pastel / Warm / Cool) a CSS/Tailwind	Exportuje JSON report `%` a PNG graf rozkladu	Ano(exportuje CSS proměnné `:root`, konfiguraci Tailwind a PNG kartu vzorníku)

FAQ

FAQ extraktoru dominantních barev a průvodce K-Means shlukováním

Vše, co potřebujete vědět o používání bezplatného online Extraktor dominantních barev od Utiliome.

Jak se počítá procento (%) dominantní barvy?

Utiliome spustí K-Means++ shlukování napříč všemi neprůhlednými pixely obrázku (ignoruje průhledné pixely PNG/WebP/SVG). Každý pixel se přiřadí k nejbližšímu RGB centroidu shluku a počet pixelů každého shluku se vydělí celkovým počtem neprůhledných pixelů, čímž vznikne přesné procento plochy.

Ovlivní průhledné PNG pozadí výsledky dominantních barev?

Ne. Jakýkoli pixel s hodnotou alfy pod 50 % (alpha < 128) se před začátkem K-Means shlukování vyloučí, takže průhledné oblasti kolem log, produktových výřezů nebo ikon nikdy nenaruší procenta dominantních barev.

Jaký je nejlepší počet K-Means shluků (k) ke kontrole pravidla 60-30-10?

V postranním panelu zvolte „k=3“. Seskupení obrázku do 3 dominantních shluků okamžitě odhalí procentní rozdělení Primary, Secondary a Accent, abyste viděli, jak blízko kompozice odpovídá designovému poměru 60 % / 30 % / 10 %.

Jak Live Dominant Theme Preview vybírá Accent barvu?

Zatímco shluk #1 podle podílu pixelů se stane Primary Dominant pozadím a #2 Secondary povrchem, Utiliome vyhodnotí sytost HSL zbývajících shluků a přiřadí nejživější, vysoce chromatický shluk jako Accent CTA zvýraznění — poté spočítá kontrastní poměr WCAG 2.1 mezi nimi.

Kdy použít Extraktor dominantních barev vs. Extract Color Palette?

Použijte Extraktor dominantních barev, když potřebujete statistická procenta pokrytí pixelů (%), K-Means shlukování a náhledy kontrastu UI tématu. Použijte Extract Color Palette, když chcete ručně vzorkovat pixely kapátkem, filtrovat nálady Pastel/Vibrant/Warm/Cool nebo kopírovat CSS/Tailwind proměnné.

Nahrávají se obrázky během analýzy barev na nějaký cloudový server?

Nikdy. Veškeré dekódování obrázků, matematika K-Means shlukování i generování PNG reportu běží 100% lokálně uvnitř webového prohlížeče.