Färgpaletter

Färgpaletter för mobilappar

I en app visar färgerna vad som går att trycka på, vad som är aktivt och vad som gick bra eller fel. De här 12 paletterna har bakgrund, ytor, huvudfärg och text för olika typer av appar, med HEX-koder som du kan ta med till Figma, Flutter, SwiftUI eller React Native.

Fintech i blått och grönt

Blått för förtroende och grönt för saldon och lyckade transaktioner.

Leveransorange

Orange får beställningsknappar och erbjudanden att sticka ut.

Hälsa och välmående

Lugn; för appar för läkartider, vanor eller uppföljning.

Mörkt läge i lila

En mycket mörkgrå bakgrund i stället för helsvart, med en ljuslila accent.

Socialt rosa och lila

För sociala nätverk, dejting eller kreatörer.

Minimalistisk produktivitet

Mycket läsbar; för att-göra-listor och arbetsverktyg.

Pedagogiskt gult

Glad och tydlig; för språk- eller läroappar.

Energisk träning

Lime och rött på mörkt; för träningspass och statistik.

Meditationslavendel

Mjuk och lugn; för appar för sömn, meditation eller dagbok.

Resor i turkos och sand

Påminner om strand och sol; för bokningar och reseguider.

Fräscht matgrönt

För appar för matvaror, recept eller kost.

Premiumshopping

Neutral och elegant; låt produktbilderna stå i centrum.

Tryck på en färg för att kopiera HEX-koden. Med pennikonen öppnar du paletten i editorn för att anpassa den.

Bestäm färger för lägen från början

Varje app behöver färger för fel, lyckat, varning och information. Välj toner som passar din palett och använd inte felfärgen till något annat, som varumärkesknappar. Kombinera färgen med en ikon eller text så att det är tydligt utan att bara lita på färgen.

Designa även mörkt läge

De flesta mobiler har mörkt läge, och många har det påslaget. Det räcker inte att invertera färgerna: använd mycket mörkgrå toner i stället för helsvart och sänk mättnaden i accenterna lite så att de inte vibrerar mot bakgrunden.

Kontrollera kontrast och tryckytor

Text ska ha minst 4,5:1 i kontrast mot bakgrunden, enligt WCAG. Knappar ska se olika ut när de är aktiva, nedtryckta eller inaktiverade. Testa appen utomhus och med låg ljusstyrka, för så använder många den.

Färger från de här paletterna

RökvitVitLinneOrangeKolsvartBruten vitTallgrönEbenholtsSnövitPlatinaPreussiskt blåElfenbenBärnstenNeongulChampagneTiffanyblå

Vanliga frågor

Hur många färger ska en app ha?

Oftast en huvudfärg, en valfri sekundär färg, neutrala toner för bakgrunder och text, och fyra färger för lägen: fel, lyckat, varning och information.

Vilken färg ska appens huvudknapp ha?

Varumärkets huvudfärg, så länge den kontrasterar bra mot bakgrunden. Använd den bara för den viktigaste åtgärden på varje skärm.

Fler färgpaletter: design

Utforska vidare