Le 20 Migliori Palette di Colori Nero Blu Grigio con Codici Hex

Una palette di colori nero, blu e grigio è una scelta ideale per interfacce moderne, branding di qualità e interni rilassanti perché bilancia autorità (nero), fiducia (blu) e versatilità (grigio).

Di seguito trovi 20 combinazioni di colori nero blu grigio, da più cupe a più luminose, con codici HEX, oltre a consigli pratici e prompt AI che puoi riutilizzare per generare immagini coordinate.

Perché le palette nero blu grigio funzionano così bene

Nero, blu e grigio creano naturalmente una gerarchia chiara: i toni scuri definiscono la struttura, i grigi supportano la leggibilità e il blu indica azione e fiducia. Questo trio è particolarmente efficace per UI in cui stati, enfasi e navigazione devono essere immediatamente comprensibili.

Queste tinte hanno anche una sensazione “completa” e premium. Nero e antracite trasmettono autorità, mentre il blu aggiunge un tocco moderno e tecnologico—senza necessità di saturazioni accese.

Infine, gli schemi di colore nero blu grigio sono flessibili nei diversi media. Puoi usarli in dark mode, layout chiari, stampa o interni, poi aggiungere un neutro caldo (come crema) per ammorbidire l’atmosfera se serve.

Oltre 20 idee di palette nero blu grigio (con codici HEX)

1) Porto di Mezzanotte

HEX: #0b1320 #0f2438 #1b4f72 #6b7785 #d7dee6

Atmosfera: cupo, raffinato, costiero

Ideale per: landing page fintech UI

Le luci cupe del porto e i riflessi nell'acqua profonda creano un’atmosfera raffinata e sicura. Questa palette nero blu grigio trasmette affidabilità per il fintech e il SaaS, specialmente mantenendo lo sfondo scuro e affidando la leggibilità al grigio più chiaro. Tienila con spazi bianchi netti e un accento caldo come crema per bottoni o dati chiave. Consiglio: riserva il blu brillante per una sola CTA primaria, così eviti confusione visiva.

Esempio immagine di porto di mezzanotte generata con media.io

Media.io

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

Provalo ora gratis

2) Azzurro Grafite

HEX: #0a0d10 #1d2a3a #2b6cb0 #8a97a6 #eef2f6

Atmosfera: elegante, tecnologico, ad alto contrasto

Ideale per: dashboard UI app

Ombre di grafite con un tocco di azzurro creano un mood nitido e moderno. Funziona bene per dashboard dove la gerarchia conta, con pannelli scuri per la struttura e grigi chiari per respiro visivo. Abbina a icone semplici e divisori sottili per mantenere pulizia. Consiglio: usa l’azzurro solo come elemento saturo per grafici e stati attivi.

Esempio immagine di azzurro grafite generata con media.io

3) Onda d’Acciaio Minimal

HEX: #111418 #223042 #3a86c8 #9aa6b2 #cfd6de

Atmosfera: minimale, calma, contemporanea

Ideale per: presentazione slide deck

Toni acciaio calmi con un morbido blu risultano moderni senza essere invadenti. Perfetto per slide deck, soprattutto se vuoi grafici leggibili e dall’aspetto professionale. Abbina a tanto spazio negativo e forme geometriche invece di foto. Consiglio: mantieni i titoli quasi neri e usa il grigio medio per il testo principale, così riduci l’abbagliamento ai proiettori.

Esempio immagine di onda d’acciaio minimal generata con media.io

4) Ufficio Nuvola Tempestosa

HEX: #0f1115 #202a34 #2f4a63 #7d8b99 #f3f5f7

Atmosfera: professionale, solido, sobrio

Ideale per: hero banner sito corporate

Neutri tempesta portano presenza stabile e credibile. Ottima per hero corporate dove tipografia e messaggio sono centrali, sostenuti da una profondità blu discreta. Abbina a fotografia monocromatica e sfondo bianco sporco per mantenerla accessibile. Consiglio: aggiungi una sottolineatura blu sottile per guidare senza sovrastare il testo.

Esempio immagine di ufficio nuvola tempestosa generata con media.io

5) Notte Artica UI

HEX: #0b0e13 #1a2330 #1f6feb #a8b3bf #e6ebf0

Atmosfera: nitida, notturna, molto chiara

Ideale per: UI app mobile dark mode

Contrasti artici su superfici della notte danno un effetto pulito e veloce. Il blu vivace appare interattivo, perfetto per navigazione in dark mode, toggle e collegamenti. Abbina a icone lineari semplici e ombre discrete per evitare confusione. Consiglio: per il testo scegli il grigio chiaro invece del bianco puro per ridurre l’affaticamento agli occhi.

Esempio immagine di notte artica UI generata con media.io

6) Denim Cemento

HEX: #121212 #2a2f35 #2b4c7e #88939f #d9dee3

Atmosfera: urbano, pratico, bilanciato

Ideale per: layout lookbook streetwear

Grigi cemento urbani con profondità denim sono pratici e attenti allo stile. Sono ideali per lookbook e cataloghi dove serve uno sfondo moderno e cool alla fotografia prodotto. Leggibile anche in stampa quando i grigi medi reggono il layout e il blu è usato con parsimonia. Consiglio: le didascalie in grigio chiaro, il blu solo su titoli sezione.

Esempio immagine di denim cemento generata con media.io

7) Cobalto Fumo

HEX: #0c0f14 #243447 #2f81f7 #5f6b76 #b9c2cc

Atmosfera: energica, fumosa, moderna

Ideale per: overlay stream esports

Toni fumo scuri con un lampo di cobalto sono energici e competitivi. Usali per overlay, scoreboard e basso terzo dove il contrasto dev’essere immediato. Abbina a font condensati e separatori angolari per un look più deciso. Consiglio: il blu brillante non superi il 10-15% del layout per restare d’impatto.

Esempio immagine di cobalto fumo generata con media.io

8) Ardesia Blueprint

HEX: #0e1013 #1c2836 #274c77 #98a4b3 #f0f2f4

Atmosfera: strutturata, intelligente, calma

Ideale per: sito portfolio architettura

Ardesia e blu blueprint evocano precisione e progettazione. Perfetta per portfolio di architetti e ingegneri dove il layout deve essere pulito, ordinato e di facile lettura. Abbina a linee guida sottili e ampi margini per riforzare l’effetto blueprint. Consiglio: il tono più chiaro come sfondo pagina, il più scuro per la navigazione per una cornice elegante.

Esempio immagine di ardesia blueprint generata con media.io

9) Molo Nebbioso

HEX: #0d1014 #2b3a42 #1d5c8a #aab4bf #e9edf2

Atmosfera: nebbioso, silenzioso, accogliente

Ideale per: header blog e sistema tipografico

Grigi nebbia al molo con blu oceano addolcito risultano quieti e facili da leggere. Questa palette è ottima per blog e pagine lunghe in cui conta più il comfort che il colpo di scena. Abbina a sfondo caldo effetto carta e illustrazioni a linea sottile per un tocco editoriale morbido. Consiglio: il grigio medio per i secondi testi e i link sempre blu per coerenza nella navigazione.

Esempio di immagine di un molo nebbioso generato con media.io

10) Digital Steel

HEX: #0a0c10 #202737 #345995 #707b86 #d5dbe2

Atmosfera: pulito, tecnico, moderno

Ideale per: pagina delle funzionalità di un prodotto SaaS

Toni tecnici puliti che ricordano il metallo spazzolato e il vetro lucidato. Usali su pagine funzionali dove icone, diagrammi e screenshot richiedono una cornice calma. Abbinare con un unico accento caldo, come un badge crema smorzato, per umanizzare il layout. Consiglio: mantieni lo sfondo chiaro e usa la tonalità più scura solo per titoli ed etichette chiave.

Esempio di immagine di digital steel generato con media.io

11) Museum Evening

HEX: #0f1216 #252c35 #2a5d9f #7a8694 #f5f6f7

Atmosfera: raffinato, elegante, discreto

Ideale per: volantino invito evento

Toni serali raffinati che evocano una galleria silenziosa con dettagli illuminati. Questa palette è ideale per inviti dove la tipografia deve essere premium e rilassata. Abbinare con righe sottili, maiuscoletto e molto spazio bianco per creare un layout da museo. Consiglio: imposta lo sfondo in bianco sporco e usa il blu solo per enfatizzare data e luogo.

Esempio di immagine museum evening generato con media.io

12) Winter Transit

HEX: #101318 #1f2a35 #1b6aa5 #94a0ad #dfe5eb

Atmosfera: fresco, puntuale, metropolitano

Ideale per: design poster segnaletico

Toni freschi dei mezzi evocano puntualità e un’atmosfera urbana, come la segnaletica di un tragitto invernale. Ideale per poster segnaletici e grafici informativi dove contrasto e chiarezza sono essenziali. Abbinare con frecce geometriche e una griglia rigorosa per garantire massima leggibilità a distanza. Consiglio: usa il blu per elementi direzionali e la gamma di grigi per testo e blocchi di sfondo.

Esempio di immagine winter transit generato con media.io

13) Inkstone Studio

HEX: #0b0b0d #242933 #3c5a80 #6e7885 #c9d0d8

Atmosfera: creativo, concreto, moderno-classico

Ideale per: layout portfolio fotografico

Ombre inchiostro con note blu smorzate donano creatività e solidità. Usalo per portfolio fotografici dove la cornice dev’essere scura, minimale e priva di distrazioni. Abbina fotografie in scala di grigi e stati hover delicati per mantenere l’attenzione sulle immagini. Consiglio: margini generosi e grigio chiaro per didascalie e metadati.

Esempio di immagine inkstone studio generato con media.io

14) Harborline Branding

HEX: #0c1016 #1a2b3d #215e9a #808c9a #f1f4f7

Atmosfera: affidabile, raffinato, premium

Ideale per: tavola identità di marca

Toni portuali raffinati comunicano fiducia, stabilità e sicurezza. Questa palette blu grafite è ideale per sistemi di brand identity, da loghi a cancelleria, funzionando bene sia in digitale sia in stampa. Abbina un solo neutro caldo come crema o sabbia per aggiungere accoglienza. Consiglio: testare i grigi su carta non patinata per assicurarsi che non risultino troppo freddi.

Esempio di immagine harborline branding generato con media.io

15) Quiet Monochrome

HEX: #0f1113 #2a2e33 #3a4a5a #9aa3ad #f6f7f8

Atmosfera: tranquillo, minimalista, equilibrato

Ideale per: template curriculum e lettera motivazionale

Strati monocromatici tranquilli trasmettono calma e concentrazione, come un documento ben revisionato. Sono ideali per curriculum dove tipografia, spaziatura e gerarchia devono essere cristalline. Abbina una sola riga blu-grigia sottile per separare le sezioni e tutto il resto mantiene neutro. Consiglio: evita riempimenti pesanti e affidati a peso, dimensione e spaziatura.

Esempio di immagine quiet monochrome generato con media.io

16) Blueprint Poster

HEX: #0b0f15 #1f2d3a #0f5fa6 #8b98a6 #e7edf3

Atmosfera: deciso, grafico, strutturato

Ideale per: poster conferenza

Blu blueprint vivaci su neutri scuri strutturati danno un aspetto smart e diretto. Questo set è eccellente per poster di conferenze che necessitano sezioni ben distinte e leggibilità immediata. Da abbinare a tipografia sans-serif e iconografia semplice per mantenere modernità. Consiglio: lo sfondo più chiaro come base e il blu evidenzia le tracce o i relatori.

Esempio di immagine blueprint poster generato con media.io

17) Nautical Terminal

HEX: #0a0d11 #17212b #234a7a #6f7c89 #cfd7df

Atmosfera: nautico, innovativo, costante

Ideale per: sito documentazione sviluppatore

Profondità nautica con toni scuri da terminal danno una sensazione tecnica e stabile. Usalo per siti documentazione dove blocchi di codice, navigazione e titoli richiedono separazione chiara. Abbina accenti monospace per il codice e blu solo su link, tab e stati focus. Consiglio: sfondi dei blocchi codice leggermente più chiari della pagina per farli emergere senza contrasti duri.

Esempio di immagine nautical terminal generato con media.io

18) Smoky Cobalt Packaging

HEX: #0e0f12 #2a3038 #1f5fbf #a3adba #f2f4f6

Atmosfera: premium, deciso, moderno

Ideale per: packaging per prodotti grooming

Neutri fumé premium con energia cobalto trasmettono modernità e un tocco maschile senza essere aggressivi. Questi toni sono ottimi per packaging di prodotti grooming dove i toni matt scuri comunicano qualità e il blu dà freschezza. Da abbinare a tipografia minimale e finitura soft touch per un effetto tattile. Consiglio: stampa il cobalto come colore spot o dettaglio foil per un highlight controllato e di alto livello.

Esempio di immagine smoky cobalt packaging generato con media.io

19) Rainy Day Editorial

HEX: #101217 #2d3640 #2a5674 #9aa7b4 #f7f8fa

Atmosfera: morbido, riflessivo, editoriale

Ideale per: layout articolo magazine

Neutri morbidi da giorno di pioggia evocano riflessione e stile silenzioso. Ideali per layout magazine dove lunghi testi richiedono contrasto delicato e ritmo rilassato. Abbinare a titoli serif e linee blu chiare per sottotitoli per creare una cadenza editoriale. Consiglio: didascalie immagini in grigio medio per una pagina ariosa e coerente.

Esempio di immagine rainy day editorial generato con media.io

20) Nightshift Dashboard

HEX: #070a0f #1b2430 #2d6cdf #65707d #d8dee6

Atmosfera: focalizzato, moderno, data-driven

Ideale per: UI dashboard analytics

Toni nightshift focalizzati evocano una control room pensata per le decisioni. Tra le combinazioni nero blu grigio, questa è ottima per analytics perché il contrasto mantiene i grafici leggibili senza affaticare la vista. Usa visualizzazioni dati neutre e il blu per filtri selezionati, tab attive, linee chiave. Consiglio: limita il blu brillante a una sola serie per grafico per mantenere chiare le comparazioni.

Esempio di immagine nightshift dashboard generato con media.io

Quali colori stanno bene con nero blu grigio?

I neutri caldi sono il miglior upgrade: crema, avorio, sabbia e beige caldo ammorbidiscono l’aspetto “tech” e rendono i layout scuri più accoglienti. Sono eccellenti per bottoni, badge e pannelli di sfondo.

Per un contrasto più netto, aggiungi il bianco brillante con parsimonia (soprattutto per il testo e i dettagli) e mantieni la maggior parte del testo in grigio chiaro per ridurre l’abbagliamento. Se serve un secondo accento, metalli smorzati (argento, peltro) e verdi desaturati completano la base fredda senza competere col blu.

In caso di dubbio, limita la saturazione: un solo accento blu principale, un neutro caldo e il resto in neri/grigi per un look controllato e premium.

Come usare una palette nero blu grigio nei progetti reali

Parti dai ruoli invece che dalle percentuali: assegna quasi-nero a navigazione e intestazioni, ardesia scura a superfici/card, grigio medio a testo secondario e grigio chiaro/bianco sporco agli sfondi. Poi scegli un blu come colore interattivo (link, tab attive, stati selezionati).

Nel branding, testa la palette sia in digitale che in stampa. I grigi possono cambiare a seconda della luce e della carta, quindi valida il carbone e il grigio medio prima della produzione di carta e packaging definitivo.

Per interni, tratta il blu come il colore della “profondità” (parete accentata, mobili, tessili), mentre grigi e neri ancorano hardware e arredi. Aggiungi luci crema o legno per evitare un effetto freddo nella stanza.

Crea visualizzazioni palette nero blu grigio con l’AI

Se hai già i codici HEX, puoi trasformarli velocemente in mockup UI, poster, tavole brand e packaging coerenti con l’AI. La chiave è descrivere chiaramente il layout e includere esplicitamente i valori colore nel prompt.

Usa una palette alla volta e specifica dove compare il blu (CTA, link, grafici, bordi). Così l’output resta pulito ed evita colori accidentali extra.

Successivo: Palette di colori crema