Utiliome

Dominant fargeuthenter

Finn de nøyaktige dominante fargene og pikseldekningen (%) i ethvert bilde med lokal K-Means-klynging, med roller for primær/sekundær/aksent og WCAG-kontrast.

Ingen opplastingerIngen påmeldingPartibehandling
K-Means Pixel Coverage %Primary / Accent Theme PreviewHEX / RGB / HSL / JSONPNG Report Card
Last ned
Frakoblet motor klar100 % privat arbeidsområde i nettleseren • Null opplastinger til skyen
Verktøy du kanskje også trenger

Relaterte verktøy

Trekk ut fargepalett

Trekk ut 5–12 harmoniske farger fra et bilde. Pipette og eksport til HEX, RGB, HSL, CSS, Tailwind eller PNG. 100 % privat.

Tilgjengelig fargekontroll

Sjekk WCAG 2.1 kontrastoverholdelse, simuler fargeblindhet, og oppdag tilgjengelige fargepar.

Fargepalettgenerator

Generer, juster og eksporter vakre fargepaletter og graderinger for ditt neste UI-prosjekt.

Material-palettgenerator

Generer Material Design 3 og Material Design 2 fargepaletter, tonale nyanser og UI-forhåndsvisninger fra hvilken som helst farge eller opplastet bilde.

CSS-gradientgenerator

Lag og tilpass vakre CSS-gradienter visuelt og kopier koden umiddelbart.

Bildestørrelsesinspektør

Inspiser bildedimensjoner, filstørrelse og MIME-type direkte i nettleseren din.

100 % privat • Ingen filserveropplasting

Hvorfor bruke Utiliomes K-Means-analyse av dominant farge og dekning?

Bygget fra grunnen av for strengt personvern, umiddelbar utførelse og null friksjon. Ingen abonnementer, betalingsmurer eller kontoregistreringer kreves.

Ekte K-Means-pikselarealdekning (%)

Deler bildepiksler inn i k = 3-, 5-, 6- eller 8 statistiske klynger og beregner den nøyaktige prosenten (%) av ikke-transparent flate hver dominant farge dekker.

Live primær / sekundær / aksent UI-mockup

Tildeler automatisk #1 dominant bakgrunn, #2 sekundær flate og aksent med høyest metning til en live UI-kortforhåndsvisning med WCAG 2.1-kontrast i sanntid.

Proporsjonal stablet fordelingslinje

Visualiser bildets kromatiske balanse med en proporsjonal stablet prosentlinje og ettklikks HEX-, RGB-, HSL- og JSON-dekningsrapporter.

100 % privat kjøring i nettleseren og batch-faner

Analyser flere produktbilder, app-skjermbilder eller merkevarebannere sekvensielt i lokalt nettleserminne og last ned en 1200×760 PNG-rapport om dominant farge.

Utiliome vs tradisjonelle skyalternativer

Sammenlign vår lokale første WebAssembly-motor med eldre skyverktøy.

Funksjon Utiliome (lokal nettleser) Eldre skykonverterere
Klyngematematikk og areal-andel (%) Deterministisk K-Means++-klynging med nøyaktig %-pikseldekning per farge Enkel bøtteavrunding uten prosentandelsdata
UI-temarolle og WCAG-kontrastforhåndsvisning Mapper automatisk primær, sekundær og aksent + live WCAG-kontrastforhold Rå fargeliste uten UI-kontekst eller kontrastjekk
Statistisk JSON- og visuell PNG-rapport Ettklikks JSON-rapport (HEX, RGB, HSL, %, rolle) + nedlastbart PNG-diagram Kun manuell HEX-kopiering
Personvern 100 % HTML5 Canvas-beregning på klientsiden (ingen serveropplasting) Laster opp proprietære design og bilder til eksterne servere
Slik fungerer det

Slik finner du dominante farger og pikselandel (%) i 3 enkle trinn

Ingen programvareinstallasjon kreves. Alt kjører direkte i nettleseren din.

1

Slipp ett eller flere bilder

Dra og slipp JPG-, PNG-, WebP-, SVG- eller AVIF-filer i arbeidsområdet. Transparente bakgrunnspiksler utelates automatisk, slik at de aldri skjever dekningsprosentene.

2

Velg K-Means-klyngeantall (k = 3, 5, 6 eller 8)

Velg k=3 for en ren primær/sekundær/aksent-fordeling (60-30-10-regelen), eller k=6 til k=8 for en granulær kromatisk revisjon.

3

Kopier HEX / JSON-rapport eller last ned PNG-fordeling

Klikk på et klyngekort for å kopiere HEX-koden, kopier hele JSON-prosentrapporten, eller last ned en høyoppløst PNG-rapport om dominant farge.

Hvordan K-Means++-fargeklynging finner ekte dominante farger og pikselandel (%)

Kort svar: I motsetning til fast rutenettkvantisering som deler kontinuerlige gradienter i vilkårlige bøtter, grupperer K-Means++ piksler iterativt i 3D RGB-rom rundt k naturlige sentroider og deler hver klynges pikselantall på totalt ugjennomsiktige piksler for nøyaktig areal-andel (%).

Når du analyserer et merkevarebanner, UI-skjermbilde eller produktfoto, er det bare halve ligningen å vite hvilke farger som finnes — du trenger også å vite hvor mye visuell vekt (% av flaten) hver farge bærer.

Utiliomes dominante fargeuthenterkjører en 8-iterasjons deterministiskK-Means++-klyngelinje rett i nettleseren:

  1. Alfa-bevisst pikselfiltrering: Transparente bakgrunnspiksler (alpha < 128 i PNG, WebP eller SVG-utklipp) strippes før klynging, slik at tomrom aldri telles som svart (#000000) eller hvitt (#FFFFFF).
  2. K-Means++-spredningsinitialisering: Sår k startsentroider ved å maksimere kvadrert euklidisk avstand (d² = ΔR² + ΔG² + ΔB²) mellom startfrø, og garanterer deterministiske, gjentakbare resultater hver gang du slipper samme fil.
  3. Sentroidkonvergens og rolleklassifisering:Rangerer konvergerte klynger etter pikselandel (%) for å identifisereprimær dominantflate,sekundær toneogaksent med høyest kroma.

Revidere 60-30-10-regelen og dynamisk UI-tematisering med dominante farger

Kort svar: Med klyngeantall k = 3 kan designere og utviklere sjekke om et oppsett, en illustrasjon eller et romfoto følger den klassiske 60-30-10-fargeandelen — og forhåndsvise hvordan de nøyaktige fargene presterer som live UI-korttema med WCAG-kontrast.

I UI/UX-ingeniørarbeid, interiørdesign og merkevaresystemer følger balanserte komposisjoner typisk 60-30-10-regelen:

Klyngerang Mål areal-andel Designsystemrolle og Utiliome live-forhåndsvisning
#1 Primær dominant ~55 % – 65 % Bakgrunn / lerret: Setter den overordnede luminansstemningen (mørk vs. lys modus) i live-temakortet
#2 Sekundær tone ~25 % – 35 % Kort, navigasjon og beholdere: Støtter primærbakgrunnen uten å konkurrere om oppmerksomhet
#3 Aksent ~5 % – 15 % Handlingsknapper (CTA) og merker: Velges automatisk fra klyngen med høyest HSL-metning (S%) og testes for WCAG 2.1-kontrast mot den primære dominante fargen

Dominant fargeuthenter kontra Trekk ut fargepalett: velg riktig verktøy

Kort svar: Bruk Dominant fargeuthenter når du trenger statistiske K-Means-pikselprosent (%), 60-30-10-revisjon og live primær/sekundær/aksent UI-tema. Bruk Trekk ut fargepalett når du vil ha en variert 5–12-prøve kreativ palett med stemningsfiltre og klikk-for-å-plukke-pipette.

Velg mellom de to komplementære fargeverktøyene ut fra om du trenger statistisk areal-målingellerkreativ prøvekurasjon:

Arbeidsflytbehov Dominant fargeuthenter (dette verktøyet) Trekk ut fargepalett
Nøyaktig pikseldekning % og stablet linje Ja (k = 3, 5, 6, 8 K-Means-klynger med %-andel) Nei (optimaliserer for prøvevariasjon fremfor areal-andel)
Live primær / sekundær / aksent UI-kort + WCAG-kontrast Ja (kontrastforhold-merke i sanntid) Nei (renderer jevne prøvestriper)
Interaktiv klikk-på-bilde-pipette Automatisert sentroidklynging Ja (klikk på en piksel for å sample og feste)
Stemningsfiltre (livlig / pastell / varm / kald) og CSS/Tailwind Eksporterer JSON %-rapport og PNG-fordelingsdiagram Ja(eksporterer :root CSS-variabler, Tailwind-config og PNG-prøvekort)
FAQ

FAQ om dominant fargeuthenter og K-Means-klynging

Alt du trenger å vite om å bruke Utiliomes gratis Dominant fargeuthenter.

Hvordan beregnes den dominante fargeprosenten (%)?

Utiliome kjører K-Means++-klynging over alle ugjennomsiktige piksler i bildet (og ignorerer transparente PNG-/WebP-/SVG-piksler). Hver piksel tildeles nærmeste RGB-klyngesentroid, og hver klynges pikselantall deles på totalt ugjennomsiktige piksler for nøyaktig arealprosent.

Påvirker en transparent PNG-bakgrunn resultatene for dominant farge?

Nei. Enhver piksel med alfa under 50 % (alpha < 128) utelates før K-Means-klynging starter, slik at transparente områder rundt logoer, produktutklipp eller ikoner aldri skjever de dominante fargeprosentene.

Hva er beste K-Means-klyngeantall (k) for å sjekke 60-30-10-regelen?

Velg «k=3» i sidestolpen. Å gruppere bildet i 3 dominante klynger viser umiddelbart primær-, sekundær- og aksentprosentene, slik at du ser hvor tett komposisjonen matcher 60 % / 30 % / 10 %-forholdet.

Hvordan velger live-temforhåndsvisningen aksentfargen?

Mens klynge #1 etter pikselandel blir primær dominant bakgrunn og #2 blir sekundær flate, evaluerer Utiliome HSL-metningen i de øvrige klyngene og tildeler den mest livlige, høy-kroma-klyngen som aksent-CTA — og beregner deretter WCAG 2.1-kontrastforholdet mellom dem.

Når bør jeg bruke Dominant fargeuthenter kontra Trekk ut fargepalett?

Bruk Dominant fargeuthenter når du trenger statistiske pikseldekningsprosent (%), K-Means-klynging og UI-temakontrast. Bruk Trekk ut fargepalett når du vil sample piksler manuelt med pipette, filtrere etter pastell/livlig/varm/kald, eller kopiere CSS-/Tailwind-variabler.

Lastes bildene mine opp til en skyserver under fargeanalysen?

Aldri. All bildedekoding, K-Means-klyngematematikk og PNG-rapportgenerering kjører 100 % lokalt i nettleseren.