Idee palette colori bianco blu grigio: 20 combinazioni con codici hex

Una palette di colori bianco, blu e grigio è una scelta ideale per interfacce pulite, branding rilassante e ambienti moderni. Il bianco rende le composizioni più ariose, il blu aggiunge chiarezza e fiducia, mentre il grigio offre struttura senza creare confusione visiva.

Di seguito trovi 20 combinazioni curate di bianco, blu e grigio con codici HEX, oltre a casi d’uso pratici e prompt di intelligenza artificiale che puoi riutilizzare per generare visual coerenti.

Perché le palette Bianco Blu Grigio funzionano così bene

Le tonalità bianco blu grigie sono naturalmente leggibili: il bianco fornisce spazi di contrasto, il grigio supporta la tipografia e la suddivisione, il blu attira l’attenzione senza l’intensità dei toni caldi. Questo equilibrio rende la palette sempre “disegnata” anche con pochi elementi.

Il blu trasmette anche forti sensazioni di affidabilità e chiarezza, motivo per cui è comune in UI, sanità, finanza e strumenti di produttività. Abbinato a neutri grigi, l’effetto rimane professionale e non giocoso.

La cosa più importante è che queste palette sono versatili. Puoi scegliere uno stile ultraminimalista per look essenziali, oppure intensificare i blu e i toni carbone per sezioni principali di grande impatto e intestazioni ad alto contrasto.

Oltre 20 idee di combinazioni Bianco Blu Grigio (con codici HEX)

1) Minimal artico

HEX: #ffffff #e9eef3 #b7c6d6 #4a7fb0 #2b3642

Atmosfera: nitida, moderna, ariosa

Ideale per: dashboard ui per saas

Nitida e moderna come neve fresca sotto un cielo limpido, questa combinazione mantiene interfacce leggere senza risultare sterile. Perfetta per dashboard, schermate analitiche e pannelli di amministrazione dove conta il contrasto. Abbinala a un solo accento vivace come lime o ambra per stati chiave e avvisi. Consiglio: usa il grigio più scuro solo per la tipografia, evitando blocchi pesanti.

Esempio d’immagine di minimal artico generato con media.io

Media.io

Media.io è uno studio AI online per creare ed editare video, immagini e audio direttamente nel browser.

Provalo ora gratis

2) Foschia costiera

HEX: #fbfdff #dfe8f2 #9fb6cc #3e6f98 #5a616b

Atmosfera: calma, costiera, discreta

Ideale per: hero e landing page di siti web

La calma della nebbia costiera e i blu dell’orizzonte donano a questa palette un carattere rilassato e premium. Perfetta per landing page, portfolio e brand di consulenza che richiedono sicurezza pacata. Abbina neutri caldi come sabbia o lino nelle foto per evitare che i blu risultino troppo freddi. Consiglio: usa il blu intermedio per le CTA e mantieni gli sfondi quasi bianchi per velocità e chiarezza.

Esempio d’immagine di foschia costiera generato con media.io

3) Porto d’acciaio

HEX: #f6f8fb #cfd8e3 #7f96ab #2f5f88 #1f2a33

Atmosfera: industriale, solida, sicura

Ideale per: identità di marca b2b

Solida e industriale come un porto all’alba, queste tonalità trasmettono affidabilità e concretezza. Per i sistemi di identità b2b, il bianco mantiene uno stile professionale mentre il blu profondo aggiunge autorevolezza. Tra le combinazioni bianco blu grigio, questa brilla se ci aggiungi un accento metallico singolo come un effetto argento o cromato sottile. Consiglio: mantieni i gradienti minimi e lascia che i blocchi piatti facciano il lavoro principale.

Esempio d’immagine di porto d’acciaio generato con media.io

4) Ufficio nordico

HEX: #ffffff #eef2f6 #c0c7cf #6b8fb2 #3a424c

Atmosfera: pulita, pratica, ordinata

Ideale per: presentazione slide deck

Pulita e pratica come un ufficio nordico, i neutri mantengono i contenuti ordinati mentre il blu porta gerarchia. Ideale per slide, documentazione interna e aggiornamenti per investitori dove la struttura conta. Abbina icone semplici e tanto spazio per mantenere il tono nitido. Consiglio: riserva il blu per titoli e dati chiave, non i testi lunghi.

Esempio d’immagine di ufficio nordico generato con media.io

5) Glacier UI

HEX: #fdfefe #e6f0fb #b8d2ee #3d78c2 #2d3440

Atmosfera: fresca, tecnologica, ottimista

Ideale per: schermate UI app mobile

Fresca e tecnologica come la luce che rimbalza sul ghiaccio, questa palette dà energia senza essere invasiva. Perfetta per UI di app mobili, onboarding e impostazioni che richiedono chiarezza amichevole. Abbina componenti arrotondati e ombre leggere per un’interfaccia accogliente. Consiglio: usa il grigio più scuro come colore principale del testo e il blu brillante solo per stati attivi.

Esempio d’immagine di glacier ui generato con media.io

6) Lino ardesia

HEX: #fafbfc #e3e6ea #a8b0b9 #5d7893 #2e333a

Atmosfera: morbida, bilanciata, raffinata

Ideale per: layout report editoriale

Morbida e raffinata come lino su ardesia, queste tonalità trasmettono discreta eleganza. Usale in report annuali, PDF lunghi e impaginati editoriali dove la leggibilità è essenziale. Abbinale a titoli con font serif e foto monocromatiche per un tocco di classe. Consiglio: mantieni gli sfondi avorio e usa il grigio medio per regole, tabelle e didascalie.

Esempio d’immagine di lino ardesia generato con media.io

7) Skyline piovoso

HEX: #f7fbff #d7e2ee #8ea3b8 #2e5f8f #3c4450

Atmosfera: intensa, urbana, elegante

Ideale per: sito web studio creativo

Sofisticata e urbana come uno skyline sotto la pioggia, questa palette bianco blu grigia è elegante e contemporanea. Perfetta per siti di studi creativi, pagine case-study e portfolio con immagini forti. Abbina tipografia di impatto e foto in bianco e nero per uno stile editoriale. Consiglio: aggiungi una sottolineatura blu sottile o una riga per guidare la lettura nelle pagine lunghe.

Esempio d’immagine di skyline piovoso generato con media.io

8) Inchiostro e neve

HEX: #ffffff #e8edf4 #c5ced8 #2a6aa6 #1b2430

Atmosfera: alto contrasto, nitida, focalizzata

Ideale per: ui login e autenticazione

Nitida e focalizzata come inchiostro su neve fresca, questa composizione offre gerarchia chiara e leggibilità perfetta. Ideale per login, impostazioni account e schermate dove la fiducia è fondamentale. Abbina campi semplici, tanto spazio e ombre minime per un aspetto pulito. Consiglio: usa la sfumatura più scura per etichette e errori, il blu solo per azioni principali.

Esempio d’immagine di inchiostro e neve generato con media.io

9) Brand cloudburst

HEX: #f9fcff #d9e9f9 #94b2cf #3b74ad #4b525d

Atmosfera: luminosa, affidabile, amichevole

Ideale per: annuncio social servizio tech

Luminosa e affidabile come il cielo che si schiarisce dopo la pioggia, queste tonalità sono amichevoli e capaci. Usale per annunci social, banner e grafiche di campagna dove conta la leggibilità immediata. Abbinale a un accento caldo come corallo o oro per aumentare l’attrattiva del clic. Consiglio: mantieni il testo su bianco/avorio e usa il blu più profondo per pulsanti e benefici chiave.

Esempio di immagine del marchio cloudburst generato con media.io

10) Cemento Marino

HEX: #f5f7fa #d0d6dd #9aa4af #356a9a #2a2f36

Atmosfera: concreto, pragmatico, moderno

Ideale per: confezione di prodotto per skincare

Concreto e pragmatico come il cemento marino, i neutri freddi mantengono tutto moderno e pulito. Funziona bene sulle confezioni quando si desidera un'atmosfera clinica e premium senza sembrare fredda. Abbina finiture opache e icone lineari minimali, e considera un'etichetta soft-touch per aggiungere calore. Consiglio d'uso: metti il blu più intenso su un piccolo sigillo o badge così che sia percepito come qualità, non rumore.

Esempio di immagine di cemento marino generata con media.io

11) Denim Polveroso

HEX: #ffffff #eef5fb #c6d9ea #5a86b8 #39424e

Atmosfera: morbido, casual, accogliente

Ideale per: modello per newsletter

Morbido e accogliente come denim consumato e cotone pulito, questa combinazione trasmette familiarità e facilità di lettura. Usalo per newsletter, aggiornamenti di prodotto e annunci di comunità dove la chiarezza è più importante del dramma. Abbinalo a pulsanti arrotondati e illustrazioni semplici per un tono accogliente. Consiglio d’uso: mantieni il testo principale in grigio antracite e usa il blu medio per gli header delle sezioni per guidare la lettura veloce.

Esempio di immagine di denim polveroso generata con media.io

12) Ceramica Invernale

HEX: #fbfbfd #e1e8ef #b0bccc #3f6f9e #2f3844

Atmosfera: lucida, calma, professionale

Ideale per: brochure clinica sanitaria

Lucido e calmo come una ceramica invernale, questi toni risultano igienici e rassicuranti. Come combinazione di bianco, blu e grigio, è perfetta per brochure sanitarie, segnaletica clinica e portali paziente dove fiducia e chiarezza sono fondamentali. Abbina tanto spazio bianco e pittogrammi semplici per mantenere le informazioni digeribili. Consiglio d’uso: scegli foto con toni pelle caldi per bilanciare la palette fredda.

Esempio di immagine di ceramica invernale generata con media.io

13) Planimetria Argento

HEX: #f8fbff #dbe6f2 #a5b7c9 #2f6ea5 #2b3138

Atmosfera: tecnico, preciso, sicuro di sé

Ideale per: presentazione architettura

Tecnico e preciso come una planimetria argento, questa palette sostiene layout strutturati e diagrammi dettagliati. Usa per proposte, presentazioni e schede tecniche dove la precisione deve essere elegante. Abbina linee sottili e spaziatura a griglia per un look coeso e ingegnerizzato. Consiglio d’uso: mantieni i diagrammi in sole due tonalità, poi riserva il blu più profondo per le chiamate all’attenzione.

Esempio di immagine di planimetria argento generata con media.io

14) Clinica Luminosa

HEX: #ffffff #edf3f8 #c9d4df #4c7fb3 #3a3f47

Atmosfera: sterile, sicura, rassicurante

Ideale per: interfaccia portale medico

Sterile ma rassicurante come una stanza visita impeccabile, questi colori facilitano la ricerca di informazioni essenziali. Sono ottimi per portali paziente, flussi appuntamenti e pagine risultati laboratorio dove la calma è essenziale. Abbinali a colori stato chiari come verde e ambra per i risultati, da tenere limitati solo ai badge. Consiglio d’uso: usa bordi grigio chiaro invece di ombre pesanti per un’interfaccia più pulita.

Esempio di immagine di clinica luminosa generata con media.io

15) Ghiaccio di Mezzanotte

HEX: #f7fbff #d3e2f1 #90aed0 #245f98 #1a1f27

Atmosfera: drammatico, elegante, premium

Ideale per: landing page cyber sicurezza

Drammatico e premium come il ghiaccio di mezzanotte, i toni profondi aggiungono serietà mentre i blu chiari lo mantengono incisivo. Usalo per cybersecurity, fintech o prodotti enterprise dove è fondamentale trasmettere fiducia. Abbina titoli ad alto contrasto ed effetti glow discreti usati con parsimonia. Consiglio d’uso: evita grandi sezioni scure; usale solo per aree hero e footers.

Esempio di immagine di ghiaccio di mezzanotte generata con media.io

16) Grafite Morbida

HEX: #fcfdff #e7eaee #b3b9c1 #4a7aa4 #2c323a

Atmosfera: silenziosa, matura, versatile

Ideale per: modello curriculum professionale

Silenziosa e matura come la grafite morbida su carta brillante, questa palette ha un aspetto curato senza essere appariscente. Ideale per curriculum, CV e one-pager personali dove la tipografia deve guidare il design. Abbina una singola linea blu sottile e tanto spazio vuoto per un tocco moderno. Consiglio d’uso: mantieni gli header blu e il testo in grafite per migliorarne la leggibilità.

Esempio di immagine di grafite morbida generata con media.io

17) Neutro Ghiandaia Blu

HEX: #ffffff #eef1f5 #c2cbd4 #3b6fa8 #444a52

Atmosfera: fresco, bilanciato, affidabile

Ideale per: brochure immobiliare

Fresco e affidabile come una ghiandaia blu tra i rami invernali, questi colori risultano puliti e di fiducia. La combinazione bianco-blu-grigio funziona molto bene per brochure immobiliari, annunci immobiliari e guide di quartiere. Abbina accenti in legno caldo o beige nelle foto per mantenere il tutto invitante. Consiglio d’uso: usa il blu per tab delle sezioni e per evidenziare le mappe così la navigazione risulta immediata.

Esempio di immagine di neutro ghiandaia blu generata con media.io

18) Metro Ghiacciato

HEX: #f9fbfc #dee5ea #a1adb7 #4f7ea9 #2a3037

Atmosfera: urbano, fresco, efficiente

Ideale per: ui app trasporti

Urbano ed efficiente come il finestrino di una metro ghiacciata, questa gamma è fresca, organizzata e riposante per la vista. Funziona bene per app di trasporto, strumenti di pianificazione e qualsiasi esperienza orientata alla mappa. Abbina con un accento vivace per le linee dei percorsi così le informazioni critiche risaltano. Consiglio d’uso: mantieni la base mappa chiara e usa il grigio scuro per le etichette per evitare confusione visiva.

Esempio di immagine di metro ghiacciato generata con media.io

19) Osservatorio Calmo

HEX: #ffffff #e5edf6 #b1c3d6 #3f73a6 #2f3640

Atmosfera: riflessivo, silenzioso, sofisticato

Ideale per: dashboard visualizzazione dati

Riflessivo e silenzioso come un osservatorio calmo, i toni aiutano la concentrazione e la lettura attenta. Usalo per dashboard di data visualization, portali di ricerca e pagine KPI dove la chiarezza conta più dello stile. Abbina colori di grafico coerenti e limita la saturazione così le tendenze sono facili da confrontare. Consiglio d’uso: usa griglie grigio chiaro e riserva il blu più intenso per la serie primaria.

Esempio di immagine di osservatorio calmo generata con media.io

20) Carta Nautica

HEX: #fbfeff #e2edf7 #c3d6e8 #2f6fae #3b4047

Atmosfera: brillante, nautico, editoriale

Ideale per: suite invito matrimonio

Brillante e nautica come carta nuova e aria di mare, questa palette bianco-blu-grigio risulta senza tempo ed elegante. È una scelta perfetta per inviti, annunci formali e cancelleria minimalista. Abbina effetti carta testurizzata e linee grigie sottili per mantenere il design raffinato. Consiglio d’uso: usa il blu solo per nomi o monogrammi e lascia che lo spazio bianco lavori per te.

Esempio di immagine di carta nautica generata con media.io

Quali colori si abbinano bene con il Bianco Blu Grigio?

Gli accenti caldi sono il modo più semplice per bilanciare la freddezza dei neutri blu-grigio. Prova corallo, pesca, ambra o oro smorzato per creare un chiaro punto focale su CTA, badge e highlight.

Per un effetto più silenzioso, abbina i toni bianco-blu-grigio a neutri morbidi come beige, sabbia, lino o taupe caldo in immagini e sfondi. Mantieni così la palette minimale e più umana.

Se desideri uno stile più deciso e tecnico, aggiungi accenti neri o un azzurro elettrico vivido in piccole dosi. Limita la saturazione per mantenere la palette di base pulita e coerente.

Come utilizzare una palette Bianco Blu Grigio in progetti reali

Inizia assegnando i ruoli: bianco/off-white per sfondi, grigio chiaro per superfici e divisori, grigio medio per testi secondari, blu per stati interattivi e carbone scuro per la tipografia primaria. Questo crea subito gerarchia e riduce i dubbi.

Nell’UI, riserva il blu più intenso per le “azioni” (pulsante primario, tab attivo, stato selezionato) e mantieni i neutri predominanti per un’interfaccia tranquilla. Per l’identità visiva, usa il blu come colore principale e lascia ai grigi il compito di reggere layout, griglie e testi di confezioni.

In interni o design di presentazioni, usa il bianco come tela, il grigio come struttura (cornici, grafici, tabelle) e il blu come ritmo (titoli, callout, accenti). Il risultato è moderno senza sembrare freddo.

Crea visual di palette Bianco Blu Grigio con l’IA

Per mockup coordinati veloci, genera visual coerenti usando la stessa palette e un formato prompt riutilizzabile. Ciò è particolarmente utile per landing page, concept di dashboard, brochure e varianti di ads social.

Con Media.io puoi trasformare una tua idea in immagini professionali in pochi minuti—poi iterare cambiando soltanto il “best for” (app UI, mood board, brochure) mantenendo la stessa palette bianco-blu-grigio.

Successivo: Palette di Colori Pesca Corallo