Utiliome

Extractor de culoare dominantă

Găsește culorile dominante exacte și ponderea pixelilor (%) din orice imagine, cu clustering K-Means local, roluri Primar/Secundar/Accent și contrast WCAG.

Fără încărcăriFără contProcesare în lot
K-Means Pixel Coverage %Primary / Accent Theme PreviewHEX / RGB / HSL / JSONPNG Report Card
Descarcă
Motorul offline e gataSpațiu de lucru 100% privat, în browser • Zero încărcări în cloud
Unelte de care ai putea avea nevoie

Unelte similare

Extrage paleta de culori

Extrage online palete armonioase de 5–12 culori din orice imagine. Alege orice pixel cu pipeta și exportă HEX, RGB, HSL, CSS, Tailwind sau PNG.

Verificator de culori accesibile

Verifică contrastul WCAG 2.1, simulează daltonismul și descoperă perechi de culori accesibile.

Generator de paletă de culori

Generează, ajustează și exportă palete de culori și gradiente pentru următorul proiect UI.

Generator de paletă Material

Generează palete Material Design 3 și Material Design 2, nuanțe tonale și previzualizări UI din orice culoare sau imagine încărcată.

Generator de gradient CSS

Creează și personalizează vizual gradiente CSS frumoase și copiază instant codul.

Inspector dimensiuni imagine

Verifică dimensiunile, mărimea fișierului și tipul MIME direct în browser.

100% privat • Zero încărcări de fișiere pe server

De ce să folosești analizorul K-Means de culoare dominantă și acoperire?

Construit de la zero pentru confidențialitate strictă, execuție instant și zero fricțiune. Fără abonamente, paywall-uri sau conturi.

Acoperire reală K-Means a pixelilor (%)

Împarte pixelii în k = 3, 5, 6 sau 8 clustere statistice și calculează procentul exact (%) din suprafața opacă ocupat de fiecare culoare dominantă.

Machetă live Primar / Secundar / Accent

Atribuie automat fundalul dominant #1, suprafața secundară #2 și accentul cu saturația cea mai mare unui card UI live, cu scor de contrast WCAG 2.1.

Bară de distribuție proporțională

Vezi echilibrul cromatic dintr-o privire, cu o bară procentuală stivuită și rapoarte HEX, RGB, HSL și JSON dintr-un clic.

Privat în browser și file pe lot

Analizează pe rând fotografii de produs, capturi de aplicație sau bannere de brand în memoria locală și descarcă un raport PNG 1200×760.

Utiliome față de alternativele cloud clasice

Compară motorul nostru local WebAssembly cu uneltele cloud vechi.

Funcție Utiliome (browser local) Convertoare cloud clasice
Matematica clusteringului și ponderea (%) K-Means++ determinist, cu acoperire exactă în % pentru fiecare culoare Rotunjire pe găleți, fără pondere procentuală
Rol de temă UI și contrast WCAG Mapează automat Primar, Secundar și Accent + contrast WCAG live Listă brută de culori, fără context UI sau contrast
Raport JSON și PNG vizual JSON dintr-un clic (HEX, RGB, HSL, %, rol) + grafic PNG Doar copiere manuală de HEX
Confidențialitatea datelor Calcul 100% pe client, cu canvas HTML5 (zero încărcări) Încarcă designuri și fotografii pe servere la distanță
Cum funcționează

Cum găsești culorile dominante și ponderea (%) în 3 pași

Nu trebuie să instalezi niciun program. Totul rulează direct în browser.

1

Trage una sau mai multe imagini

Trage JPG, PNG, WebP, SVG sau AVIF în spațiul de lucru. Pixelii transparenți sunt excluși automat, ca să nu deformeze procentele.

2

Alege numărul de clustere (k = 3, 5, 6 sau 8)

Alege k=3 pentru Primar/Secundar/Accent (regula 60-30-10) sau k=6–k=8 pentru un audit cromatic mai fin.

3

Copiază HEX / JSON sau descarcă PNG

Apasă un card de cluster ca să copiezi HEX-ul, copiază raportul JSON complet sau descarcă un PNG de înaltă rezoluție.

Cum găsește K-Means++ culoarea dominantă și ponderea (%)

Răspuns rapid: Spre deosebire de cuantizarea pe grilă fixă, K-Means++ grupează iterativ pixelii în spațiul RGB 3D în jurul a k centroizi naturali și împarte numărul de pixeli ai fiecărui cluster la pixelii opaci, ca să obțină ponderea exactă (%).

La un banner de brand, o captură UI sau o fotografie de produs, nu ajunge să știi ce culori există — trebuie să știi și câtă greutate vizuală (% din suprafață)are fiecare.Extractorul de culoare dominantăUtiliome rulează un pipeline deterministK-Means++ în 8 iterații, direct în browser:

  1. Filtrare cu alfa: pixelii transparenți (alpha < 128 în PNG, WebP sau decupaje SVG) sunt scoși înainte de clustering, ca spațiul transparent să nu fie numărat ca negru (#000000) sau alb (#FFFFFF).
  2. Inițializare K-Means++: seamănă k centroizi maximizând distanța euclidiană la pătrat (d² = ΔR² + ΔG² + ΔB²), deci același fișier dă mereu același rezultat.
  3. Convergență și roluri:ordonează clusterele după pondere (%) și identifică suprafațadominantă primară, tonul secundarșiaccentul cu croma cea mai mare.

Regula 60-30-10 și teme UI dinamice

Răspuns rapid: Cu k = 3, verifici dacă o machetă, o ilustrație sau o fotografie respectă regula 60-30-10 și vezi cum arată culorile pe un card UI live, cu scor WCAG.

În UI/UX, design interior și identitate de brand, compozițiile echilibrate urmează de obicei regula 60-30-10:

Rang cluster Pondere țintă Rol în sistemul de design și previzualizarea Utiliome
#1 Dominant primar ~55% – 65% Fundal / suprafață: stabilește luminozitatea (mod întunecat sau luminos) pe cardul de previzualizare
#2 Ton secundar ~25% – 35% Carduri, navigație și containere: susține fundalul fără să concureze
#3 Accent ~5% – 15% Butoane CTA și insigne: ales din clusterul cu saturația HSL (S%) cea mai mare și testat la contrast WCAG 2.1 față de dominantul primar

Culoare dominantă sau paletă extrasă

Răspuns rapid: Folosește extractorul de culoare dominantă când ai nevoie de procente K-Means, audit 60-30-10 și previzualizare Primar/Secundar/Accent. Folosește Extrage paleta când vrei 5–12 mostre diverse, filtre de stare și un eyedropper.

Alege unealta după ce măsori: suprafața statisticăsaucuratoria creativă:

Cerință Extractor de culoare dominantă (această unealtă) Extrage paleta de culori
Acoperire exactă % și bară stivuită Da (clustere K-Means k = 3, 5, 6, 8 cu pondere %) Nu (optimizează diversitatea, nu suprafața)
Card live Primar / Secundar / Accent + WCAG Da (insignă de contrast în timp real) Nu (benzi uniforme de mostre)
Eyedropper pe pixel Clustering automat de centroizi Da (apasă orice pixel ca să eșantionezi și să fixezi)
Filtre de stare și CSS/Tailwind Exportă raport JSON % și grafic PNG Da(variabile CSS :root, config Tailwind și card PNG)
Întrebări

Întrebări despre extractorul de culoare dominantă și K-Means

Tot ce trebuie să știi ca să folosești gratuit Extractor de culoare dominantă de la Utiliome.

Cum se calculează procentul culorii dominante (%)?

Utiliome rulează clustering K-Means++ pe toți pixelii opaci (ignoră pixelii transparenți din PNG/WebP/SVG). Fiecare pixel ajunge la centroizii RGB cel mai apropiat, iar numărul de pixeli al clusterului se împarte la totalul pixelilor opaci.

Fundalul transparent al unui PNG afectează rezultatul?

Nu. Orice pixel cu alfa sub 50% (alpha < 128) este exclus înainte de K-Means, ca zonele transparente din jurul logo-urilor sau iconițelor să nu deformeze procentele.

Ce valoare k verifică cel mai bine regula 60-30-10?

Alege „k=3” în bara laterală. Trei clustere arată imediat împărțirea Primar, Secundar și Accent, ca să vezi cât de aproape e compoziția de 60% / 30% / 10%.

Cum alege previzualizarea culoarea de accent?

Clusterul #1 după pondere devine fundalul dominant, #2 suprafața secundară. Utiliome evaluează saturația HSL a celorlalte clustere și pune clusterul cel mai viu ca accent CTA, apoi calculează contrastul WCAG 2.1.

Când folosesc extractorul de culoare dominantă și când paleta?

Extractorul de culoare dominantă este pentru procente de acoperire, clustering K-Means și contrast de temă. Extrage paleta este pentru eșantionare cu eyedropper, filtre Pastel/Vibrant/Cald/Rece și variabile CSS/Tailwind.

Imaginile sunt încărcate în cloud la analiză?

Niciodată. Decodarea, matematica K-Means și raportul PNG rulează 100% local, în browser.