Modern Flat Tones: 20 Combinazioni di Palette con Codici Hex

I colori piatti sono moderni, leggibili e facili da adattare su diversi schermi—perfetti per UI, branding, poster e stampa. Quando i toni sono puliti (senza sfumature), il tuo layout, la tipografia e la gerarchia parlano da soli.

Di seguito trovi 20 idee per palette di colori piatti con codici HEX, mood e consigli pratici d’uso—più esempi di prompt AI che puoi riutilizzare per generare visual abbinati.

Perché le palette flat funzionano così bene

Le palette flat eliminano il rumore visivo. Senza sfumature e texture pesanti, gli utenti visualizzano più rapidamente, gli stati dell’UI risultano più chiari e la tipografia rimane nitida su tutti i dispositivi.

Sono inoltre prevedibili in fase di produzione. I riempimenti solidi si riproducono più costantemente in workflow web, app e stampa, ed è più facile standardizzarli nei sistemi di design.

Soprattutto, i colori flat rendono la gerarchia ovvia. Puoi assegnare ruoli (superficie, primario, accento, testo) e mantenere la coerenza dell’interfaccia o del layout mentre cresce.

20+ idee di palette di colori piatti (con codici HEX)

1) Neutri Terracotta Calmanti

HEX: #f2e9e4 #c9ada7 #9a8c98 #4a4e69 #22223b

Mood: radicato, calmo, raffinato

Ideale per: linee guida editoriali per il brand

Radicati e simili a una galleria, questi neutri terracotta ricordano carta di lino, ombre morbide e fiducia silenziosa. Funzionano benissimo per pagine di linee guida, lookbook e presentazioni di fascia alta dove la tipografia ha bisogno di spazio. Abbinali a uno sfondo caldo avorio e a un accento d’inchiostro profondo per i titoli. Consiglio: mantieni il testo principale nel blu navy più scuro e usa il mauve per evidenziare senza perdere il contrasto.

Esempio di immagine di neutri terracotta calmanti generato con media.io

Media.io

Media.io è uno studio AI online per creare e modificare video, immagini e audio direttamente dal browser.

Provalo gratis ora

2) Mint Pop

HEX: #e8f9fd #79dae8 #0aa1dd #2155cd #092a5e

Mood: fresco, nitido, energico

Ideale per: mockup UI dashboard 2D

Freschi e tecnologici, questi toni dal mint al navy evocano acqua chiara, dati puliti e feedback veloce. Splendono in dashboard, pannelli analytics e widget SaaS dove la gerarchia è fondamentale. Bilancia il cyan brillante con una sidebar navy profonda e mantieni le superfici chiare per leggibilità. Consiglio: usa il blu vivace per i pulsanti principali e l'acquamarina più soft per stati hover o secondari.

Esempio di immagine di mint pop generato con media.io

3) Soda Pesca

HEX: #fff1e6 #ffd7ba #ffb085 #ff7a59 #2d3047

Mood: giocoso, caldo, moderno

Ideale per: poster promozionale social media

Giocoso e invitante, questo mix richiama frizzantezza alla pesca, crema soft e un accento tramonto vivace. Queste combinazioni flat sono perfette per promo social, annunci di creator e grafiche di citazioni incisive. Abbina il corallo all'indigo profondo per contrasto tipografico, lasciando il pesca chiaro come sfondo. Consiglio: evita le sfumature, punta su forme decise per mantenere il look pulito e moderno.

Esempio di immagine di soda pesca generato con media.io

4) Appunti di Campo Forestali

HEX: #f6f4d2 #c8d5b9 #8fc0a9 #68b0ab #4a7c59

Mood: terreni, calmi, naturalistici

Ideale per: concept packaging ecosostenibile

Terrosi e rilassanti, questi verdi ricordano foglie pressate, carta riciclata e una camminata mattutina. Perfetti per packaging eco, etichette sostenibili e branding wellness naturale. Abbinali a texture kraft o a uno sfondo crema pulito per un look sincero e arioso. Consiglio: usa il verde più scuro per testo normativo e i verdi medi per icone mantenendo la leggibilità su base chiara.

Esempio di immagine di appunti di campo forestali generato con media.io

5) Arcade Notturno

HEX: #f7b801 #f18701 #f35b04 #3d348b #0e0b16

Mood: audace, elettrico, drammatico

Ideale per: design flyer evento

Elettrici e ad alto contrasto, questi toni evocano luci arcade, snack notturni e titoli decisi. Ideali per flyer evento, poster club e campagne grafiche che richiedono energia immediata. Abbina aranci caldi al violetto profondo per impatto, mantenendo il nero come spazio negativo per evitare rumori. Consiglio: limita le pesature tipografiche a due in modo che il colore sia protagonista.

Esempio di immagine di arcade notturno generato con media.io

6) Ufficio Cielo Soft

HEX: #f3f8ff #deecff #b1d4e0 #3e7cb1 #1f2f56

Mood: arioso, affidabile, calmo

Ideale per: UI landing page SaaS

Ariosi e rassicuranti, questi blu cielo danno idea di onboarding chiaro e inbox tranquilla. Una palette flat così va bene per landing page SaaS, sezioni feature e tavole prezzi dove la fiducia è centrale. Abbina molto spazio bianco e un unico navy per navigazione per mantenere l'esperienza salda. Consiglio: usa il blu medio come CTA primaria e toni pallidi per sfondi di sezione per guidare lo scroll.

Esempio di immagine di ufficio cielo soft generato con media.io

7) Albicocca Desertica

HEX: #fff4e0 #f2c6a0 #e07a5f #3d405b #81b29a

Mood: caldo, artigianale, bilanciato

Ideale per: invito di nozze moderno

Caldi e artigianali, questi toni evocano pietra arrostita dal sole, blush albicocca e foglie di salvia fresche. Perfetti per inviti di matrimonio moderni, save-the-date e set di cancelleria minimalista. Abbina l’ardesia profonda alla crema per tipografia pulita, usa l'albicocca come evidenziatore delicato. Consiglio: mantieni gli abbellimenti semplici, come linee sottili o piccole icone, per eleganza senza rusticità.

Esempio di immagine di albicocca desertica generato con media.io

8) Biblioteca Agrumata

HEX: #fff3b0 #ffcf56 #f29e4c #1b998b #2d3047

Mood: intelligente, solare, sicuro

Ideale per: copertina libro

Intelligente e solare, questa palette richiama pagine evidenziate, scorza di agrumi e un tranquillo sottolineatura teal. Perfetta per copertine di saggistica, workbook di corsi e giacche tipografiche audaci. Abbina indigo intenso al giallo per leggibilità, usa teal per un accento moderno. Consiglio: mantieni le immagini minime e lascia che la tipografia oversize porti il design così i colori restano nitidi.

Esempio di immagine di biblioteca agrumata generato con media.io

9) Bubbletea Lilla

HEX: #f8e8ee #fcd5ce #d8e2dc #bee1e6 #a0c4ff

Mood: soft, carino, rilassante

Ideale per: pubblicità prodotto skincare

Soffice e confortante, questi pastelli evocano la schiuma del bubbletea, zucchero lilla e packaging arioso. Ideali per adv skincare, lanci di prodotti delicati e banner wellness dal tono calmo. Abbina a uno sfondo bianco pulito o blush pallido, mantieni la tipografia leggera ma a alto contrasto. Consiglio: scegli un pastello dominante per il prodotto principale e usa gli altri come blocchi di supporto per evitare effetto slavato.

Esempio di immagine di lilac bubbletea generato utilizzando media.io

10) Sprint monocromatico

HEX:#f8f9fa#e9ecef#adb5bd#495057#212529

Mood:Minimale, veloce, concentrato

Ideale per:set di icone e componenti dell'interfaccia utente

Minimali e focalizzati, questi grigi sembrano una tavola da sprint pulita e uno spazio di lavoro senza distrazioni. Sono perfetti per set di icone, componenti dell'interfaccia utente e documentazione dove vince la coerenza. Abbinare con un singolo colore di accento del marchio altrove nel vostro sistema, e mantenere questi neutri per la struttura. Suggerimento per l'uso: riserva la tonalità più scura per il testo e i bordi e utilizza la più chiara per le superfici per mantenere il contrasto accessibile.

Esempio di immagine di sprint monocromatico generato utilizzando media.io

11) Trasporto marittimo

HEX:#e0fbfc#98c1d9#3d5a80#293241#ee6c4d

Mood:nautico, audace, professionale

Ideale per:Presentazione slide deck

Nautici e professionali, questi colori evocano grafici di spedizione, aria fresca e un segnale corallino sicuro. Utilizza questo schema di colori piatti per slide deck, report e modelli di keynote che hanno bisogno di chiarezza con un po' di personalità. Abbinare pale aqua con deep navy per i divisori di sezione, e tenere coral solo per i numeri chiave o CTA. Suggerimento per l'uso: ripetere l'accento corallo in piccole dosi attraverso le diapositive per creare un ritmo coerente.

Immagine Esempio di trasporto marittimo generato utilizzando media.io

12) Notte di Sakura

HEX:#ffe5ec#ffb3c6#ff8fab#a4133c#590d22

Mood:Romantico, Drammatico, Lusso

Ideale per:Copertina album musicale

Romantica con un aspetto drammatico, questa tavolozza sembra i fiori di ciliegio sotto le luci del palco. Si adatta alle copertine di album pop e R&B, all'arte singola e alla grafica merch di artisti che necessitano di un cuore audace. Abbinare il rosa pallido con la tonalità del vino profondo per un forte contrasto focale e mantenere la tipografia semplice. Suggerimento per l'uso: Usa il tono più scuro come vignetta o cornice per rendere i rosa più brillanti sembrano intenzionali, non zuccherati.

Esempio di immagine di sakura night generato utilizzando media.io

13) mattina alpina

HEX:#f1faee#a8dadc#457b9d#1d3557#e63946

Mood:Croccante, avventuroso, chiaro

Ideale per:blog di viaggio hero header

Croccanti e avventurosi, questi toni evocano aria fredda, laghi ghiacciaii e un marcatore rosso brillante. Funzionano bene per intestazioni di blog di viaggio, guide di destinazione e sezioni di eroi editoriali. Abbinare il blu navy con la menta pallida per una leggibilità pulita, quindi usare il rosso con parsimonia per indicare le azioni chiave. Suggerimento per l'uso: mantenere l'illustrazione dell'eroe semplice e geometrica in modo che i colori leggano istantaneamente con ampi rapporti di aspetto.

Esempio di immagine di alpine morning generato utilizzando media.io

14) Caffè Terracotta

HEX:#f7ede2#f5cac3#f28482#84a59d#2a9d8f

Mood:Accogliente, accogliente, artigianale

Ideale per:Caffè menu design

Accoglienti e amichevoli, questi colori sembrano latte al vapore, ceramiche blush e una pianta di menta sul bancone. Sono perfetti per i menu dei caffè, la segnaletica delle piccole imprese e gli inserti per l'imballaggio degli alimenti. Abbinare i rosa caldi con i verdi più freschi per mantenere il layout equilibrato e utilizzare la crema come sala respiratoria. Suggerimento per l'uso: impostare i prezzi nel verde più profondo in modo che rimangano leggibili contro i toni di sfondo più morbidi.

Esempio di immagine di terra cotta cafe generato utilizzando media.io

15) Console Retro

HEX:#eae2b7#fcbf49#f77f00#d62828#003049

Mood:retro, punchy, nostalgico

Ideale per:Schermi di onboarding dell'app

Retro e punchy, questi toni ricordano le console vintage, i token arcade e le richieste di schermo in grassetto. Queste combinazioni di colori piatti sono eccellenti per gli schermi onboarding dove si desidera una rapida comprensione e uno slancio giocoso. Abbinare blu navy con crema per una copia chiara, quindi utilizzare arancione o rosso per il progresso e gli evidenziamenti. Suggerimento per l'uso: mantenere le illustrazioni semplici e utilizzare raggi angolari coerenti in modo che l'aspetto rimanga coerente tra i passi.

Esempio di immagine di retro console generato utilizzando media.io

16) Calcestruzzo freddo

HEX:#f4f4f4#d9d9d9#b0bec5#546e7a#263238

Mood:Industriale, moderno, sobrio

Ideale per:Architettura portfolio layout

Industriale e sobrio, questo set sembra calcestruzzo, acciaio e morbida luce coperto. Si adatta a portfolio di architettura, casi di studio e presentazioni in studio in cui il lavoro dovrebbe rimanere al centro della scena. Abbinare il carbone più scuro con un sacco di margini grigio chiaro, e mantenere il blu-grigio come un sottile segnale di sezione. Suggerimento per l'uso: utilizzare regole sottili e spaziature generose invece di blocchi pesanti per mantenere una struttura premium e ariosa.

Esempio di immagine di calcestruzzo fresco generato utilizzando media.io

17) Mercato d'autunno

HEX:#fff1c1#f4d35e#ee964b#f95738#0d3b66

Mood:Festivo, caldo, sicuro di sé

Ideale per:Vendita stagionale banner

Festivi e caldi, questi toni evocano le bancarelle del mercato, la luce dorata e una giacca blu navy fresca. Sono ottimi per banner di vendita stagionale, intestazioni di e-mail e promozioni al dettaglio che necessitano di amichevole urgenza. Abbinare il blu navy con il giallo per un alto contrasto e mantenere l'arancione per distintivi o etichette sconto. Consiglio di utilizzo: evitare di utilizzare tutti i toni caldi contemporaneamente in grandi aree; Lasciate che un colore caldo domini e usate gli altri come accenti.

Esempio di immagine del mercato autunnale generato utilizzando media.io

18) Gelateria

HEX:#fde2e4#fad2e1#c5dedc#dbe7e4#f0efeb

Mood:Dolce, leggero, arioso

Ideale per:invito baby shower

Dolci e ariosi, queste creme pastello e menta si sentono come cucchiai in una scatola di vetro refrigerato. Si adattano a inviti per baby shower, annunci morbidi e cancelleria delicata per feste. Abbinare con semplice serif o arrotondato sans tipo e mantenere lo sfondo per lo più crema per la leggibilità. Suggerimento per l'uso: Aggiungi un singolo colore di testo più scuro, come il carbone, in modo che i toni delicati non riducono la leggibilità.

Esempio di immagine di gelateria generata utilizzando media.io

19) Ritaglio della galassia

HEX:#f0f3bd#02c39a#00a896#028090#05668d

Mood:Futuristico, pulito, oceanico

Ideale per:Interfaccia utente mobile fintech

Futuristici e oceanici, questi teals sembrano un cruscotto luminoso in una stanza buia. Sono perfetti per l'interfaccia utente mobile fintech, gli schermi del portafoglio e i flussi di sicurezza in cui la chiarezza crea fiducia. Abbinare il lime pallido come colore evidenziante e mantenere il verde più profondo per la navigazione e le carte. Suggerimento per l'uso: utilizzare il verde-verde più brillante solo per gli stati di successo per rendere il feedback immediatamente riconoscibile.

Immagine Esempio di ritaglio di galassia generato utilizzando media.io

20) Studio illuminato dal sole

HEX:#fff8e7#fee440#00bbf9#00f5d4#9b5de5

Mood:Creativo, ottimista, moderno

Ideale per:Creatore portfolio homepage

Ottimisti e creativi, questi colori sembrano la luce del sole su una scrivania con pennarelli luminosi nelle vicinanze. Funzionano bene per i portfolio dei creatori, le homepage delle agenzie e i marchi personali giocosi. Abbinare il giallo caldo con abbondante crema in modo che non sopraffia, e usare il viola per i pulsanti o i collegamenti dei tasti. Suggerimento per l'uso: Scegli due colori dominanti per sezione e mantenere il resto come piccoli accenti per evitare una pagina rumorosa.

Esempio di immagine di sunlit studio generato utilizzando media.io

Quali colori si abbinano bene ai flat?

Le tavolozze di colori piatti si abbinano meglio a neutri chiari (bianco, bianco scuro caldo, grigio chiaro, carbone) perché preservano l'aspetto pulito e grafico e mantengono il contrasto prevedibile.

Prova un approccio "un eroe + un accento": scegli un tono piatto dominante per le superfici di grandi dimensioni, quindi un singolo accento ad alta energia per CTA, distintivi o numeri chiave. Questo mantiene il sistema moderno anziché rumoroso.

Se hai bisogno di più profondità senza gradienti, usa una rampa a gradini (chiara, media, scura) della stessa tonalità, più un accento a contrasto (come corallo contro blu navy o azzurro contro arancione).

Come usare una palette flat nei progetti reali

Assegnare ruoli a ciascun colore prima di progettare: sfondo/superficie, azione primaria, azione secondaria, testo e bordi. I colori piatti sembrano intenzionali quando ogni tono ha un lavoro.

Per l'interfaccia utente, mantenere i toni più chiari per le superfici e riservare il colore più scuro per il testo e i divisori per proteggere l'accessibilità. Per stampe e poster, utilizzare grandi forme piatte e meno stili di tipo in modo che la tavolozza rimanga nitida.

Per evitare un aspetto "simile a un giocattolo", limitare i colori saturi a piccole aree e lasciare che le tonalità più morbide gestiscano la maggior parte della tela, soprattutto nel branding moderno e nei layout dei siti web.

Crea visual flat con AI

Hai bisogno di un mockup veloce che si adatti alla tua tavolozza di design piatto? Genera immagini coerenti (poster, schermi dell'interfaccia utente, copertine, imballaggi) riutilizzando uno stile di prompt e scambiando solo i segnali di colore.

Con Media.io puoi incollare le istruzioni sopra riportate, modificare il rapporto aspetto e creare un insieme di immagini coerenti che corrispondono al tuo sistema di marca, senza ricominciare da zero ogni volta.

Una volta che ti piace un risultato, salva il prompt come modello in modo che le risorse future rimangano coerenti tra le campagne, le pagine e le piattaforme.

Prossimo: Palette di colori Dandelion