Utiliome

Trekk ut fargepalett fra bilde

Trekk ut paletter med 5–12 farger fra foto eller illustrasjon, prøv piksler med pipette, og eksporter CSS-variabler, Tailwind-tokens eller PNG-fargekort.

Ingen opplastingerIngen påmeldingPartibehandling
5–12 Harmonious SwatchesClick-to-Pick EyedropperHEX / RGB / HSL / CSS / TailwindPNG Palette Card Export
Last ned
Frakoblet motor klar100 % privat arbeidsområde i nettleseren • Null opplastinger til skyen
Verktøy du kanskje også trenger

Relaterte verktøy

Dominant fargeuthenter

Finn de dominerende fargene og nøyaktig pikseldekning (%) i ethvert bilde med lokal K-Means-klynging. Forhåndsvis UI-temaer, WCAG-kontrast og HEX/RGB.

Fargepalettgenerator

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

Tilgjengelig fargekontroll

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

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.

Konverter SVG til PNG

Konverter øyeblikkelig dine SVG vektorbilder til høykvalitets PNG-format direkte i nettleseren din.

100 % privat • Ingen filserveropplasting

Hvorfor bruke Utiliomes palettuthenter og pipette?

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

Perseptuell avstands- og harmonifiltrering

Trekker ut 5, 6, 8 eller 12 distinkte fargeprøver ved hjelp av perseptuell RGB avstandsfiltrering slik at paletten fanger høylys, mellomtoner og skygger uten nesten dupliserte fargeprøver.

Interaktiv klikk-på-bilde pipette

Klikk hvor som helst direkte på det opplastede bildet for å prøve den eksakte pikselens HEX/RGB/HSL-verdi, fest den foran på paletten og kopier den til utklippstavlen.

Forhåndsinnstillinger for humør (Vibrant, Pastell, Warm, Cool)

Filtrer ekstraherte bildefarger etter HSL metning, lyshet og fargetonevinkel for å generere levende, myk pastell, varme eller kule designskjemaer fra samme kildebilde.

1-klikk CSS, Tailwind, JSON og PNG Swatch-kort

Kopier :root CSS egendefinerte egenskaper, Tailwind colors-objekter eller JSON-matriser med ett klikk, eller last ned et høyoppløselig 1200×800 PNG-palettkort som viser bildet ditt og HEX-koder.

Utiliome vs tradisjonelle skyalternativer

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

Funksjon Utiliome (lokal nettleser) Eldre skykonverterere
Interaktiv Pixel pipette Klikk hvor som helst på bildelerretet for å prøve og feste nøyaktige pikselfarger Rettet automatisk genererte fargeprøver uten manuell pikselplukking
Harmoni- og stemningsfiltrering 5–12 fargeprøver + balanserte, levende, pastellfargede, varme og kule HSL-filtre 5 statiske fargeprøver som ofte gjentar gjørmete bakgrunnsgrå
Utvikler og designereksport HEX, RGB, HSL + CSS :rotvariabler, Tailwind konfig, JSON & PNG Kort Manuell én etter én HEX kopiering eller eksport med betalingsmur
Personvern og hastighet 100 % klientside HTML5 Canvas-utvinning (ingen serveropplasting) Laster opp moodboards og private klientressurser til skyservere
Slik fungerer det

Slik trekker du ut en fargepalett fra et bilde i 3 trinn

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

1

Slipp ett eller flere bilder eller illustrasjoner

Dra og slipp et hvilket som helst JPG, PNG, WebP, SVG eller AVIF bilde i slippsonen. Utiliome dekoder piksler lokalt i nettleserens RAM.

2

Velg antall fargeprøver, humør og velg egendefinerte piksler

Velg 5, 6, 8 eller 12 fargeprøver, filtrer etter Palettstemning (Balansert, Vibrant, Pastell, Warm eller Cool), eller klikk direkte på bildet for å feste spesifikke aksentpiksler.

3

Kopier HEX / CSS / Tailwind eller last ned PNG-kort

Klikk en hvilken som helst fargeprøve for å kopiere dens HEX, RGB eller HSL kode, eksportere :root CSS variabler eller Tailwind tokens i sidefeltet, eller laste ned et delbart PNG palettkort.

Hvordan perseptuell fargekvantisering bygger harmoniske paletter fra bilder

Kort svar: Naiv pikseltelling gir ofte 6 nesten identiske nyanser av himmelblått eller skyggegrå. Utiliome kombinerer 3D RGB histogrambinning med euklidisk perseptuell avstandsfiltrering (ΔRGB >= 34) og HSL humørbegrensninger for å sikre at hver fargeprøve i paletten din er visuelt distinkt.

Når et fotografi inneholder 12 millioner piksler, tilhører over 70 % av disse pikslene ofte en enkelt bakgrunnsgradient (som en blå himmel, mørk studiobakgrunn eller løvverk). En enkel frekvenssortering produserer en monoton palett som savner den 3 % levende fokalaksenten som gjør komposisjonen pop.

Utiliomes Harmonious Palette Engine løser dette i tre trinn:

  1. Sub-samplet 24-trinns romlig kvantisering: Sampler ikke-transparente piksler (alpha >= 128) over et normalisert lerretsrutenett og gir gjennomsnitt av sanne RGB-verdier innenfor hver klyngeboks slik at utdataprøver reflekterer autentiske fotografiske toner i stedet for kunstige rutenetts midtpunkter.
  2. HSL Stemnings- og kromfiltrering:Konverterer kandidatkasser til fargetone (0°–360°), metning (0 %–100 %) og lyshet (0 %–100 %), slik at du kan isolereVibrant(S >= 35%),Myk pastell (L >= 60 %, S <= 75%) (L >= 60 %, S <= 75%), eller §K**Warm7§), eller Kul (70° < H < 310°) harmonier.
  3. Minste euklidiske fargeavstand (ΔE / ΔRGB Guardrail): Håndhever en minimum 3D RGB vektorseparasjon mellom utvalgte fargeprøver slik at høylys, mellomtoner og aksenter alle er representert.

Eksportere bildepaletter til produksjon: CSS Egenskaper, Tailwind CSS og designkort

Kort svar: Når du trekker ut eller finjusterer en palett med pipetten på lerretet, kan du eksportere den umiddelbart som CSS :root-variabler, et Tailwind theme.extend.colors-objekt, en strukturert JSON-matrise eller et 1200×800 PNG-presentasjonskort.

Å flytte fra visuell inspirasjon til frontend-kode eller klientmoodboards bør ikke kreve kopiering og innliming av seks heksadesimale koder én etter én:

Eksportmål Utdataformat Beste arbeidsflytbruk
Individuelle fargeprøveklikk #HEX, rgb(r, g, b) eller hsl(h, s%, l%) Lime inn enkeltfarger i Figma, Photoshop, Canva eller Illustrator
CSS Variabler (:root) --palette-1: #...; --palette-2: #...; Vanilla CSS, Astro, Svelte og Web Components tema
Tailwind CSS Konfig colors: { "brand-100": "#...", ... } Slipper direkte inn i tailwind.config.mjs eller @theme blokker
PNG Palettprøvekort 1200 × 800 px høyoppløselig PNG med bilde + HEX etiketter Deling av moodboards i Slack, Notion, pitchdekk og merkevareretningslinjer

Ekstraher fargepalett vs. dominant fargeuttrekker: Hvilket verktøy bør du bruke?

Kort svar: Bruk Extract Color Palette når du vil ha et mangfoldig, estetisk balansert 5–12 fargeskjema med stemningsfiltre, en interaktiv pikselpipet og CSS/Tailwind eksport. Bruk Dominant Color Extractor når du trenger statistisk K-Means pikselområdedekningsprosent (%) og WCAG UI-tema-kontrastanalyse.

Utiliome gir to spesialiserte bildefargeanalyseverktøy skreddersydd for ulike kreative og tekniske oppgaver:

Funksjon / mål Trekk ut fargepalett (Dette verktøyet) Dominant Color Extractor
Kjernealgoritme Perseptuell avstandsmangfold + HSL stemningsfiltrering (Balanced, Vibrant, Pastel, Warm, Cool) UovervåketK-Means clustering (k = 3..8) måler nøyaktig pikselområdedekning %
Manuell Pixel pipette Klikk hvor som helst på bildet for å prøve og feste nøyaktige pikselfarger Automatiserte statistiske klyngecentroider
Primær utgang 5–12 harmoniske fargeprøver + CSS :root / Tailwind konfig + PNG Swatch-kort Rangert % dekningsstolpediagram + Primær/sekundær/aksent UI-kort forhåndsvisning + WCAG kontrastforhold
Best for Grafiske designere, illustratører, merkevaremoodboards og CSS/Tailwind palettoppretting UI/UX dynamisk tema, produktfotografering bakgrunnsrevisjoner og fargedistribusjonsanalyse
FAQ

Ofte stilte spørsmål om palettuthenting og design tokens

Alt du trenger å vite om å bruke Utiliomes gratis Trekk ut fargepalett fra bilde.

Hvordan velger jeg en bestemt farge fra en liten detalj i bildet mitt?

Bare klikk direkte på den delen av bildet inne i editorens lerret! Den innebygde pipetten prøver nøyaktig 1×1 piksel under markøren, fester den som den første fargeprøven i paletten din og kopierer fargekoden til utklippstavlen.

Hva er forskjellen mellom stemningsfiltrene Balansert, Vibrant og Pastell?

Balanced Full trekker ut de mest representative distinkte fargene over hele lyshets- og metningsspekteret. Levende filtrerer ut dempede gråtoner og nesten svart/hvitt (krever metning >= 35 %), mens Soft Pastell prioriterer høye lette, milde toner.

Kan jeg eksportere den utpakkede paletten direkte til Tailwind CSS eller CSS variabler?

Ja. I høyre sidefelt under '3. Kodeformat og kopier eksport', klikk på 'Kopier CSS Variabler (:root)' eller 'Kopier Tailwind Konfigurasjon' for å kopiere en klar til å lime inn kodeblokk som inneholder alle fargeprøver i paletten din.

Hva genererer 'Last ned PNG palettkort'?

Den gjengir et rent presentasjonskort på 1200×800 px med det opplastede kunstverket ditt på et mørkt studiolerret over en rad med avrundede fargeprøver merket med deres eksakte HEX-koder – klare til å slippe inn i klientkortstokker, Notion-dokumenter eller sosiale innlegg.

Når bør jeg bruke Extract Color Palette vs. Dominant Color Extractor?

Bruk Extract Color Palette når du vil ha et inspirerende 5–12 fargeprøvedesignskjema, stemningsfiltrering og en interaktiv pipette. Bruk Dominant Color Extractor når du vil vite den nøyaktige statistiske prosentandelen (%) av bildet som dekkes av hver fargeklynge ved hjelp av K-Means.

Sendes mine opplastede bilder til en server for å trekke ut farger?

Aldri. All pikselprøvetaking, histogramkvantisering og PNG-kortgjengivelse skjer 100 % lokalt i nettleseren din via HTML5 Canvas 2D API.