Fargepaletter

Fargepaletter for mobilapper

I en app viser fargene hva du kan trykke på, hva som er aktivt og hva som gikk bra eller galt. Disse 12 palettene har bakgrunn, flater, hovedfarge og tekst for ulike typer apper, med HEX-koder du kan ta med til Figma, Flutter, SwiftUI eller React Native.

Fintech i blått og grønt

Blått for tillit og grønt for saldoer og vellykkede transaksjoner.

Leveringsoransje

Oransje får bestillingsknapper og tilbud til å skille seg ut.

Helse og velvære

Rolig; til apper for legetimer, vaner eller oppfølging.

Mørk modus i lilla

En svært mørkegrå bakgrunn i stedet for helsvart, med en lyselilla aksent.

Sosial rosa og lilla

Til sosiale nettverk, dating eller skapere.

Minimalistisk produktivitet

Svært lesbar; til gjøremålslister og arbeidsverktøy.

Pedagogisk gul

Glad og tydelig; til språk- eller læringsapper.

Energisk trening

Lime og rødt på mørkt; til treningsøkter og statistikk.

Meditasjonslavendel

Myk og rolig; til apper for søvn, meditasjon eller dagbok.

Reiser i turkis og sand

Minner om strand og sol; til bestillinger og reiseguider.

Frisk matgrønn

Til apper for dagligvarer, oppskrifter eller kosthold.

Premiumshopping

Nøytral og elegant; la produktbildene stå i sentrum.

Trykk på en farge for å kopiere HEX-koden. Med blyantikonet åpner du paletten i editoren for å tilpasse den.

Bestem tilstandsfarger fra starten

Hver app trenger farger for feil, suksess, advarsel og informasjon. Velg toner som passer paletten din, og ikke bruk feilfargen til noe annet, som merkevareknapper. Kombiner fargen med et ikon eller tekst, så det er tydelig uten å stole bare på fargen.

Design også mørk modus

De fleste mobiler har mørk modus, og mange har den slått på. Det holder ikke å invertere fargene: bruk svært mørkegrå toner i stedet for helsvart, og senk metningen i aksentene litt så de ikke vibrerer mot bakgrunnen.

Sjekk kontrast og trykkflater

Tekst bør ha minst 4,5:1 i kontrast mot bakgrunnen, ifølge WCAG. Knapper skal se ulike ut når de er aktive, trykket ned eller deaktivert. Test appen utendørs og med lav lysstyrke, for slik bruker mange den.

Farger fra disse palettene

RøykhvitHvitLinOransjeKullsvartBrukket hvitFurugrønnIbenholtSnøhvitPlatinaPreussisk blåElfenbenRavgulNeongulChampagneTiffanyblå

Vanlige spørsmål

Hvor mange farger bør en app ha?

Som regel én hovedfarge, en valgfri sekundærfarge, nøytrale toner til bakgrunner og tekst, og fire tilstandsfarger: feil, suksess, advarsel og informasjon.

Hvilken farge bør hovedknappen i appen ha?

Merkevarens hovedfarge, så lenge den står godt i kontrast til bakgrunnen. Bruk den bare til den viktigste handlingen på hver skjerm.

Flere fargepaletter: design

Utforsk videre