Palette di colori

Palette di colori per app mobile

In un'app i colori indicano cosa si può toccare, cosa è attivo e cosa è andato bene o male. Queste 12 palette includono sfondo, superfici, un colore principale e testo, in base al tipo di app, con codici HEX da portare in Figma, Flutter, SwiftUI o React Native.

Fintech blu e verde

Blu per la fiducia e verde per saldi e operazioni riuscite.

Delivery arancione

L'arancione evidenzia i pulsanti d'ordine e le promozioni.

Salute e benessere

Tranquilla; per app di prenotazioni mediche, abitudini o monitoraggio.

Dark mode viola

Sfondo grigio molto scuro invece del nero puro, con accento viola chiaro.

Social rosa e viola

Per social network, dating o creator.

Produttività minimal

Molto leggibile; per gestori di attività e strumenti di lavoro.

Formazione gialla

Allegra e chiara; per app di lingue o apprendimento.

Fitness energico

Lime e rosso su fondo scuro; per allenamenti e metriche.

Meditazione lavanda

Morbida e calma; per sonno, meditazione o diario personale.

Viaggi turchese e sabbia

Evoca spiaggia e sole; per prenotazioni e guide di viaggio.

Cibo fresco verde

Per supermercati, ricette o nutrizione.

Shopping premium

Neutra ed elegante; lascia il ruolo principale alle foto dei prodotti.

Tocca un colore per copiarne il codice HEX. L'icona della matita apre la palette nell'editor per modificarla.

Definisci i colori di stato fin dall'inizio

Ogni app ha bisogno di colori per errore, successo, avviso e informazione. Scegli toni coerenti con la tua palette e non usare il colore dell'errore per altro, come i pulsanti del brand. Affianca al colore un'icona o un testo, così si capisce anche senza affidarsi solo a lui.

Progetta anche la dark mode

Quasi tutti i telefoni permettono la modalità scura e molti utenti la tengono attiva. Non basta invertire i colori: usa grigi molto scuri invece del nero puro e abbassa un po' la saturazione degli accenti, così non vibrano sullo sfondo.

Controlla contrasto e aree di tocco

Il testo deve avere un contrasto di almeno 4,5:1 con il suo sfondo, secondo le WCAG. I pulsanti devono apparire diversi quando sono attivi, premuti o disattivati. Prova l'app all'aperto e con la luminosità bassa, che è come la usano in tanti.

Colori di queste palette

Bianco fumoBiancoLinoArancioneNero carboneBianco sporcoVerde pinoEbanoBianco nevePlatinoBlu di PrussiaAvorioAmbraGiallo fluoChampagneAzzurro Tiffany

Domande frequenti

Quanti colori deve avere un'app?

Di solito un colore principale, uno secondario facoltativo, neutri per sfondi e testi, e quattro colori di stato: errore, successo, avviso e informazione.

Che colore usare per il pulsante principale di un'app?

Il colore principale del tuo brand, purché contrasti bene con lo sfondo. Usalo solo per l'azione più importante di ogni schermata.

Altre palette: design

Continua a esplorare