Fargepalettgenerator: hent ut fra bilde

Hent ut dominerende farger fra ethvert foto og lag perfekte designharmonier som kan eksporteres til CSS og Tailwind.

100% privat
HEX / RGB / HSL
CSS-eksport
Umiddelbar analyse
Steg

Slik lager du en profesjonell fargepalett

Fra visuell inspirasjon til kode på 3 trinn.

1

Last opp inspirasjon

Velg ethvert foto, skjermbilde eller design som du liker.

2

AI-analyse

Algoritmen vår henter ut de 5 dominerende fargene og beregner deres harmonier (komplementære, triader).

3

Kopier koden

Klikk for å kopiere HEX-koden, eller eksporter komplett konfigurasjon for Tailwind CSS.

Profesjonelle fargeverktøy

Alt du trenger for designsystemet ditt.

Smart ekstraksjon

Vi velger ikke tilfeldige piksler. Vi identifiserer de visuelt dominerende tonene i bildet.

Tilfeldig modus

Skaperblokkering? Generer uendelig mange paletter tilfeldig med gyldige harmonier i ett klikk.

Fargeteori

Beregn automatisk komplementære og analoge farger for hver hentet tone.

Tailwind ready

Kopier det nøyaktige JSON-objektet å lime inn i `tailwind.config.js`-filen din.

CSS-eksport

Last ned CSS-variabler (`:root`) klare til bruk i ethvert nettprosjekt.

Full personvern

Analysen skjer i nettleseren din. Inspirasjonsbildet ditt lastes aldri opp til skyen.

Anvendt fargeteori

Hvordan du bruker disse palettene i prosjektene dine.

60-30-10-regelen

Når du har hentet ut paletten din, bruk denne gyldne regelen fra interiør- og webdesign: bruk den dominerende fargen i 60% av plassen (bakgrunn), den sekundære i 30% (kort/seksjoner) og aksenten i 10% (knapper/CTA).

Matematisk balanse for det menneskelige øye.

Hvorfor eksportere til HSL?

Selv om HEX er populært, foretrekker profesjonelle designere HSL (Hue, Saturation, Lightness). Det lar deg lage varianter av en farge bare ved å justere Lightness uten å endre nyansen, perfekt for :hover-tilstander eller mørke moduser.

Full kontroll over fargevarianter.

Merkevarekonsekvens

Hvis du designer en bedriftspresentasjon, last opp firmaets logo. Verktøyet vårt henter ut de nøyaktige merkevarefargene og sikrer at all grafikken og teksten din matcher den visuelle identiteten perfekt.

Null merkevarefeil.

Kvantisering: hvordan vi velger farger

Naivt ville du tatt gjennomsnittet av alle piksler, resultatet er en gjørmete brun for hvert foto. Vi bruker median-cut-kvantisering: algoritmen deler fargerommet i bøtter med lignende piksler og velger så sentroiden i hver bøtte. Resultat: 5 visuelt distinkte farger som faktisk representerer bildet, ikke et matematisk gjennomsnitt. Samme algoritme har GIF-kodere brukt i 30 år for å komprimere til 256 farger.

Median-cut slår k-means og naivt gjennomsnitt i palettekstraksjon.

WCAG-kontrast: delen som de fleste paletter ignorerer

En palett kan være vakker og likevel ikke oppfylle tilgjengelighetskravene: lysegrått på hvitt ser fint ut i Figma og forsvinner for synshemmede brukere. WCAG 2.2 krever kontrastforhold 4,5:1 for brødtekst og 3:1 for stor tekst. Etter at du har hentet ut paletten din, kjør hver tekst-på-bakgrunn-kombinasjon gjennom en kontrastsjekker og bruk den mørkeste hentede tonen for brødtekst, aldri den vakreste.

Vakker palett + dårlig kontrast = utilgjengelig side.

Formatsammenligning

Velg riktig format for ditt bruk

FargemodellFormatEksempelBest for
HEX #RRGGBB Rask kopier/lim inn
Generell webdesign
RGB rgb(r, g, b) Digital manipulering
Skjermvisning
HSL hsl(h, s%, l%) Nyansejustering
Designsystemer
Tailwind JSON-objekt Konfigurasjon
Frontend-utviklere

FAQ om farger

Raske svar om verktøyet

Hvordan velger dere de dominerende fargene?
Vi bruker en kvantiseringsalgoritme som grupperer lignende piksler og avgjør hvilke toner som har størst visuell vekt i bildet, og ignorerer bakgrunnsstøy.
Kan jeg eksportere paletten til Photoshop eller Figma?
Ja. Du kan kopiere HEX-kodene individuelt. For Figma anbefaler vi HEX-formatet, som er universell standard.
Er palettgenereringen gratis?
Helt og holdent. Ingen begrensninger og ingen vannmerker. Du kan bruke verktøyet til alle personlige eller kommersielle prosjekter.
Hva er en fargetriad?
Det er en kombinasjon av tre farger som er jevnt fordelt på fargesirkelen. Det genererer høy kontrast samtidig som harmonien bevares. Verktøyet vårt kan foreslå triader basert på hovedfargen.
Fungerer det med WebP- og SVG-bilder?
Ja, ekstraktoren støtter JPG, PNG, WebP og SVG. Hvis bildet kan vises i nettleseren kan vi hente ut fargene.
Hvordan bruker jeg Tailwind-konfigurasjonen?
Kopier JSON-koden vi genererer og lim den inn i seksjonen theme.extend.colors i tailwind.config.js-filen din. Det oppretter klasser som bg-primary eller text-accent automatisk.
Lagres bildene mine et sted?
Nei. Analysen er 100% client-side. Bildet ditt lastes inn i nettleserens midlertidige minne, analyseres og forkastes. Ingen, ikke engang vi, ser det du laster opp.
Kan jeg lagre paletten min?
For øyeblikket kan du laste ned en tekstfil med kodene eller ta et skjermbilde. Vi jobber med en PDF-eksportfunksjon.
Hvordan henter jeg ut merkevarepaletten fra en logo?
Last opp en PNG- eller JPG-logo. Ekstraktoren finner de dominerende tonene, for de fleste logoer er det 2-4 merkevarefarger pluss en nøytral. Lagre HEX-verdiene i designsystemet ditt som --brand-primary, --brand-secondary osv. For maksimal trohet, jobb fra den opprinnelige vektorkilden (SVG) hvis du har den, ettersom JPG-komprimering kan flytte logoens farger 1-2% per kanal.
Hva er forskjellen mellom komplementære, analoge og triadiske?
Komplementære = farger overfor hverandre på sirkelen (rød og grønn), høy kontrast, fanger blikket. Analoge = naboer på sirkelen (blå, blågrønn, grønn), rolige, harmoniske. Triadiske = tre farger jevnt fordelt (120 grader fra hverandre), livlige men balanserte. Velg komplementære for CTA, analoge for bakgrunner, triadiske for barne- eller leke-merkevarer.
Kan jeg hente paletter fra skjermbilder og UI-design?
Ja, dra inn en Figma-eksport, en Dribbble-skjerm eller et skjermbilde fra en konkurrents nettsted. Verktøyet henter de faktiske rendrede fargene, ikke kildens CSS. Nyttig for å reverse-engineere et designsystem eller raskt matche en ny komponent til en eksisterende. All behandling er lokal, skjermbildene dine forlater aldri nettleseren.

Relaterte verktøy

Komplementære verktøy for prosjektet ditt

Fotoredigerer

Medieoptimalisering

Meme-generator

Medieoptimalisering

HTML til bilde

Medieoptimalisering

Favicon-generator

Medieoptimalisering

Komprimer bilde

Medieoptimalisering