Farvepaletter

Farvepaletter til mobilapps

I en app viser farverne, hvad man kan trykke på, hvad der er aktivt, og hvad der gik godt eller galt. De 12 paletter her har baggrund, flader, hovedfarve og tekst til forskellige typer apps, med HEX-koder, du kan tage med til Figma, Flutter, SwiftUI eller React Native.

Fintech i blå og grøn

Blå for tillid og grøn for saldi og gennemførte transaktioner.

Leveringsorange

Orange får bestillingsknapper og tilbud til at skille sig ud.

Sundhed og velvære

Rolig; til apps til lægetider, vaner eller opfølgning.

Mørk tilstand i lilla

En meget mørkegrå baggrund i stedet for helt sort, med en lyselilla accent.

Social rosa og lilla

Til sociale netværk, dating eller skabere.

Minimalistisk produktivitet

Meget læsbar; til to do-lister og arbejdsværktøjer.

Pædagogisk gul

Glad og tydelig; til sprog- eller læringsapps.

Energisk træning

Lime og rød på mørk baggrund; til træningspas og statistik.

Meditationslavendel

Blød og rolig; til apps til søvn, meditation eller dagbog.

Rejser i turkis og sand

Minder om strand og sol; til bookinger og rejseguider.

Frisk madgrøn

Til apps til dagligvarer, opskrifter eller kost.

Premiumshopping

Neutral og elegant; lad produktbillederne stå i centrum.

Tryk på en farve for at kopiere HEX-koden. Med blyantikonet åbner du paletten i editoren for at tilpasse den.

Fastlæg statusfarver fra starten

Hver app har brug for farver til fejl, succes, advarsel og information. Vælg toner, der passer til din palet, og brug ikke fejlfarven til andet, som brandknapper. Kombinér farven med et ikon eller tekst, så det er tydeligt uden kun at stole på farven.

Design også mørk tilstand

De fleste mobiler har mørk tilstand, og mange har den slået til. Det er ikke nok at invertere farverne: brug meget mørkegrå toner i stedet for helt sort, og sænk mætningen i accenterne lidt, så de ikke vibrerer mod baggrunden.

Tjek kontrast og trykflader

Tekst skal have mindst 4,5:1 i kontrast til baggrunden ifølge WCAG. Knapper skal se forskellige ud, når de er aktive, trykket ned eller deaktiveret. Test appen udendørs og med lav lysstyrke, for sådan bruger mange den.

Farver fra disse paletter

RøghvidHvidLinnedOrangeKulsortBrækket hvidFyrregrønIbenholtSnehvidPlatinPreussisk blåElfenbenRavgulNeongulChampagneTiffanyblå

Ofte stillede spørgsmål

Hvor mange farver skal en app have?

Som regel en hovedfarve, en valgfri sekundær farve, neutrale toner til baggrunde og tekst og fire statusfarver: fejl, succes, advarsel og information.

Hvilken farve skal appens hovedknap have?

Brandets hovedfarve, så længe den står godt i kontrast til baggrunden. Brug den kun til den vigtigste handling på hver skærm.

Flere farvepaletter: design

Udforsk videre