Palette di colori nero e grigio: 20 idee con codici Hex

Una palette di colori nero e grigio è uno dei modi più semplici per rendere un design moderno, sicuro e pulito. Dai layout UI alla stampa, queste tonalità neutre creano struttura istantanea senza togliere attenzione ai contenuti.

Qui sotto trovi più di 20 idee di palette nero e grigio con i codici HEX, oltre a suggerimenti pratici su contrasto, tipografia e scelta dei colori d’accento.

Perché le palette nero e grigio funzionano così bene

Le palette nero e grigio sono naturalmente organizzate: la gamma di valori crea gerarchia, spaziatura ed enfasi senza dover ricorrere a molte gradazioni di colore. Sono quindi ideali per layout dove conta la chiarezza—dashboard, pagine editoriali, schermate prodotto e sistemi di brand.

Trasmettono anche un senso di atemporalità. Perché i neutri non seguono le mode come le palette vivaci, una palette monocromatica o basata su carbone/ardesia può rimanere rilevante più a lungo e adattarsi facilmente tra web, stampa e packaging.

Infine, le combinazioni nero-grigio rendono i colori d’accento più potenti. Un singolo verde acqua, cobalto, corallo o lime può diventare subito “cliccabile” nella UI o “speciale” sulla stampa, perché la base è molto equilibrata.

20+ Idee di palette colore nero e grigio (con codici HEX)

1) Ardesia di Mezzanotte

HEX: #0B0D10 #1A1F26 #2E3640 #7C8794 #E6E9EE

Atmosfera: elegante, notturno, minimalista

Ideale per: dashboard ui saas

Le tonalità della mezzanotte evocano uno skyline cittadino ad alto contrasto e superfici di vetro pulite. Questa palette nero e grigio brilla in dashboard, analytics e schermate amministrative dove la gerarchia è importante. Abbinala a un bianco sporco per gli spazi e un solo accento acceso per le azioni primarie. Consiglio d’uso: mantieni il corpo del testo sul grigio più chiaro e riserva il quasi-nero per intestazioni e navigazione.

Esempio di immagine ardesia di mezzanotte generata con media.io

Media.io

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

Provalo ora gratis

2) Studio Cemento

HEX: #111315 #2A2D30 #4A4F55 #B8BDC3 #F4F5F7

Atmosfera: industriale, silenzioso, raffinato

Ideale per: sito portfolio architettura

Le vibrazioni industriali del cemento risultano calme, strutturate e con un senso di eleganza discreta. I grigi medi valorizzano foto e render, senza renderle dure. Usali con uno sfondo bianco caldo e linee nere sottili per una griglia editoriale. Consiglio d’uso: usa il grigio più chiaro per bande di sezione così i layout respirano senza perdere il mood minimale.

Esempio di immagine studio cemento generata con media.io

3) Sussurro di Grafite

HEX: #0F1114 #23262B #3B4048 #9AA2AD #DADFE6

Atmosfera: morbido, moderno, sobrio

Ideale per: presentazione brand guidelines

Le tinte di grafite suggeriscono moderazione, chiarezza ed artigianato moderno. Funzionano perfettamente per un brand book dove tipografia, spaziatura e regole logo devono comunicare sicurezza. Da abbinare ad un colore attenuato (blu polveroso o salvia) per gli accenti secondari. Consiglio: tieni grafici e campioni colore su grigio chiaro per evitare il bagliore del bianco puro nelle presentazioni.

Esempio di immagine sussurro di grafite generata con media.io

4) Fodera d’Argento

HEX: #101215 #2C2F35 #5B616B #C7CDD6 #FFFFFF

Atmosfera: brillante, pulito, raffinato

Ideale per: pagina prodotto ecommerce

I neutri rifiniti trasmettono ariosità, freschezza e attenzione al prodotto, come dettagli cromati sotto le luci di uno studio. L’estremità chiara mantiene le pagine affidabili e facili da leggere. Da abbinare a una sola tonalità CTA satura (cobalto o corallo) per layout orientati alla conversione. Consiglio: utilizza il grigio medio per divisori e microtesti, così le info importanti restano in evidenza.

Esempio di immagine fodera d’argento generata con media.io

5) Segnale di Tempesta

HEX: #0E1013 #1F242B #3E4652 #A0A9B5 #E9EDF2

Atmosfera: cupo, tecnologico, mirato

Ideale per: landing page cybersecurity

Le tonalità tempestose evocano schermate criptate, server room e un senso di urgenza controllata. Queste combinazioni nero e grigio sono ideali per sicurezza, compliance e servizi IT che richiedono autorità senza apparire vistosi. Abbinale a verde acqua elettrico o lime per badge di stato e fiducia. Consiglio: mantieni i gradienti discreti e lascia che le icone decise comunichino il mood tech.

Esempio di immagine segnale di tempesta generata con media.io

6) Inchiostro e Nebbia

HEX: #0A0B0D #1B1D21 #343842 #B0B6C0 #F2F4F7

Atmosfera: cinematografico, morbido, elegante

Ideale per: rivista editoriale

L’inchiostro cinematografico contro i grigi nebbiosi trasmette eleganza e un tocco di mistero. Perfetto per i layout di lunga lettura dove la tipografia deve apparire ricercata e di alta gamma. Abbina a un bianco avorio caldo e linee sottili per una classica griglia editoriale. Consiglio: usa il grigio nebbia come sfondo delle didascalie per separare annotazioni senza bordi pesanti.

Esempio di immagine inchiostro e nebbia generata con media.io

7) Carbone da Museo

HEX: #0C0C0D #202022 #3A3A3F #8F8F96 #E8E8EA

Atmosfera: curato, silenzioso, da galleria

Ideale per: poster mostra d’arte

Le tinte carbone curate sono come una parete di galleria silenziosa sotto luci soffuse. Permettono ai titoli e alle date delle opere di risaltare senza competere con le immagini. Da abbinare a un unico colore acceso per il nome dell’artista in evidenza. Consiglio: mantieni generosi margini e allinea i testi a una griglia rigorosa per un risultato da museo.

Esempio di immagine carbone da museo generata con media.io

8) Acciaio Monocromo

HEX: #0D0F12 #262B31 #414A55 #6F7A88 #D9DEE6

Atmosfera: professionale, strutturato, aziendale

Ideale per: layout report annuale

I grigi acciaio suggeriscono struttura, affidabilità e informazioni ben organizzate. Sono ideali per report ricchi di grafici, tabelle ed evidenziazioni dati. Da abbinare a un accento misurato come il blu navy per separare le sezioni senza rompere la narrazione neutra. Consiglio: riserva la tonalità più scura solo ai titoli, così le pagine dense restano leggibili.

Esempio di immagine acciaio monocromo generata con media.io

9) Perla Ombreggiata

HEX: #0E0E10 #24262B #5A5F68 #C9CDD3 #FAFAFB

Atmosfera: lusso, morbido, alto contrasto

Ideale per: packaging prodotto beauty

I neri ombrosi abbinati ai grigi perlati trasmettono lusso, come tessuto satinato sotto i riflettori. Questa combinazione di nero e grigio funziona bene per bellezza, skincare e fragranze, dove una tipografia minimale valorizza la sensazione premium. Abbina con argento a effetto foil o un unico accento rosato per un tocco raffinato. Consiglio d’uso: mantieni i toni scuri opachi così che le zone in evidenza sembrino intenzionali, non lucide.

Esempio di immagine di perla in ombra generata con media.io

10) Silenzioso Tipografico

HEX: #0B0C0E #1C1F24 #2F353E #A7AFBA #F6F7F9

Atmosfera: calmo, tipografico, minimale

Ideale per: sistema tipografico blog

I neutri calmi creano una scena tranquilla per le parole, come inchiostro su carta liscia. La gamma di grigi rende facile costruire una gerarchia tipografica senza disturbo visivo. Abbina con un accento delicato (blu polveroso o terracotta) per link ed evidenziature. Consiglio d’uso: usa il grigio morbido per blocchi di codice e citazioni per mantenere scorrevole la lettura.

Esempio di immagine di tipografia silenziosa generata con media.io

11) Asfalto Minimal

HEX: #090A0B #16181B #2A2E34 #616873 #DDE1E7

Atmosfera: urbano, audace, moderno

Ideale per: lookbook streetwear

Le tonalità asfalto urbane appaiono audaci e moderne, come asfalto appena posato e riflessi al neon. Offrono forte contrasto alle foto d’abbigliamento mantenendo i layout minimal. Abbina con un unico accento vivace per date di lancio e prezzi. Consiglio d’uso: usa il grigio medio per etichette e taglie così che il prodotto resti protagonista.

Esempio di immagine di asfalto minimal generata con media.io

12) Fumo e Cromo

HEX: #0C0E10 #22262C #3C434E #8D98A6 #EEF1F5

Atmosfera: futuristico, nitido, tecnologico

Ideale per: pubblicità prodotto hardware

Le tonalità nitide di fumo e cromo evocano ingegneria di precisione e superfici metalliche pulite. Questa palette nero-grigia è ottima per lanci hardware che devono sembrare taglienti e premium. Abbina con accenti blu freddi per specifiche tecniche ed evidenziazioni. Consiglio d’uso: posiziona i testi tecnici sui pannelli del grigio più chiaro per mantenere la leggibilità a colpo d’occhio.

Esempio di immagine di fumo e cromo generata con media.io

13) Lino in Ombra

HEX: #111214 #2A2C30 #4B4F56 #BFC3C9 #F1EFEA

Atmosfera: neutro caldo, accogliente, bilanciato

Ideale per: mood board d’interni moderni

I neutri caldi e ombreggiati ricordano la tappezzeria in lino e la luce soffusa del pomeriggio. L’off-white leggermente cremoso evita che la palette diventi fredda. Abbina con texture legno naturale e ottone spazzolato per un look moderno e vissuto. Consiglio d’uso: usa i toni scuri per cornici e arredi fissi, lascia che i tessuti portino i grigi più morbidi.

Esempio di immagine di lino in ombra generata con media.io

14) Quaderno Noir

HEX: #07080A #171A1F #2B313A #9099A6 #F7F8FA

Atmosfera: intelligente, accademico, concentrato

Ideale per: UI app per prendere appunti

Le tonalità quaderno noir trasmettono concentrazione e studio, come grafite su carta nitida. Aiutano i contenuti a risaltare mantenendo gli elementi UI discreti. Abbina con un colore d’accento calmo per tag e stati selezionati. Consiglio d’uso: mantieni i campi di input una sfumatura più chiara dello sfondo per rendere visibili gli anelli di focus senza eccesso.

Esempio di immagine di quaderno noir generata con media.io

15) Grafite Invernale

HEX: #0D0F13 #242A33 #3B4553 #AAB3C0 #F0F3F7

Atmosfera: fresca, ariosa, moderna

Ideale per: onboarding app per dispositivi mobili

I grigi invernali freschi trasmettono aria e modernità, come brina su vetro dagli spigoli netti. Offrono una base pulita per illustrazioni e testi brevi nelle schermate di onboarding. Abbina con un accento vivace per indicatori di progresso e pulsanti primari. Consiglio d’uso: lascia gli sfondi quasi bianchi e usa i grigi scuri solo nei titoli per evitare un primo impatto troppo pesante.

Esempio di immagine di grafite invernale generata con media.io

16) Carbonio e Sabbia

HEX: #0B0C0D #1E2024 #3D4046 #B0B3B8 #E8DDCF

Atmosfera: terroso, premium, concreto

Ideale per: etichetta per brand caffè

I toni di carbonio abbinati a un accento sabbia danno un senso terroso e raffinato, come chicchi tostati e carta kraft. Funzionano bene per etichette che richiedono un forte contrasto senza sembrare sterili. Abbina con linee illustrate semplici e texture cartacea tattile. Consiglio d’uso: stampa il tono più scuro leggermente ammorbidito (nero ricco) per evitare bordi fangosi su cartoncini non patinati.

Esempio di immagine di carbonio e sabbia generata con media.io

17) Fioritura Monocroma

HEX: #0B0C0E #1E2126 #3A3F47 #C3C7CE #F8F8F9

Atmosfera: soffice, botanica, ariosa

Ideale per: invito botanico acquerello

Le tonalità monocrome soffici ricordano petali nella nebbia e lavaggi d’inchiostro delicati. La gamma delicata supporta l’arte botanica mantenendo la leggibilità del testo. Abbina con linee grigio-argento e tanto spazio bianco per una cartoleria elegante. Consiglio d’uso: mantieni il testo dell’invito in carbone profondo, non nero puro, per armonizzare con la morbidezza dell’acquerello.

Esempio di immagine di fioritura monocroma generata con media.io

18) Neutro Prisma

HEX: #0E1012 #252A31 #4B5460 #9FA9B6 #ECEFF3

Atmosfera: pulito, flessibile, moderno

Ideale per: template presentazione

I neutri puliti trasmettono flessibilità e modernità, come una presentazione ben curata in una sala luminosa. Mantengono coerenza tra grafici, icone e fotografie su vari tipi di slide. Abbina con un unico accento del brand per intestazioni di sezione e metriche chiave. Consiglio d’uso: usa il tono più chiaro per gli sfondi e alterna con pannelli grigio pallido per alleggerire le slide dense.

Esempio di immagine di neutro prisma generata con media.io

19) Interfaccia Ossidiana

HEX: #050607 #14171B #2B3138 #6A7380 #D7DCE3

Atmosfera: scuro, preciso, ad alto contrasto

Ideale per: sito documentazione sviluppatori

Le tonalità ossidiana evocano precisione e tecnica, come un editor di codice in una stanza buia. Queste combinazioni nero-grigio facilitano la distinzione tra navigazione, sidebar e blocchi di codice senza bordi rumorosi. Abbina con un accento controllato (ciano o ambra) per link ed evidenziazioni di sintassi. Consiglio d’uso: mantieni il testo del codice su un pannello leggermente più chiaro rispetto allo sfondo pagina per ridurre l’affaticamento visivo.

Esempio di immagine di interfaccia ossidiana generata con media.io

20) Nebbia Urbana

HEX: #101216 #2A2F37 #474F5B #B7BEC8 #F3F5F8

Atmosfera: fresca, equilibrata, cittadina

Ideale per: brochure immobiliare

I grigi nebbia urbana trasmettono freschezza ed equilibrio, come la foschia mattutina su torri di vetro. Sono perfetti per brochure immobiliari dove progetti e foto richiedono chiarezza e calma. Abbina con un accento metallico tenue per prezzi e servizi principali. Consiglio d’uso: imposta il testo principale in grigio scuro e i titoli leggermente più chiari del nero per evitare un contrasto eccessivo su stampa.

Esempio di immagine di nebbia urbana generata con media.io

21) Mono Workshop

HEX: #0A0B0D #1C1F24 #3A3F47 #7F8792 #E5E8ED

Atmosfera: pratico, artigiano, organizzato

Ideale per: volantino evento laboratorio

Le tonalità pratiche da laboratorio richiamano strumenti, superfici pulite e un mood da maker senza fronzoli. La gamma di grigi stretta rende facile consultare orari, speaker e info location. Abbina con un unico accento deciso per data e link d’iscrizione. Consiglio d’uso: usa il grigio chiaro per i blocchi sezione così il volantino rimane strutturato senza riquadri pesanti.

Esempio di immagine di mono workshop generata con media.io

Quali colori stanno bene con il nero e grigio?

Il nero e grigio si abbina facilmente ad accenti energici come teal, lime, cobalto, corallo o magenta: perfetto per far risaltare CTA, highlight o etichette chiave. Su una base neutra, anche una piccola area d’accento è evidente.

Per combinazioni più morbide e premium, prova accenti smorzati come verde salvia, blu polveroso, blush o sabbia calda. Mantengono il mood monocromatico aggiungendo calore e personalità.

Se progetti per la stampa, valuta i metallici (argento, peltro, oro champagne) come "colori" d’accento tramite foil, inchiostro o finiture materiche. Si abbinano bene al carbone senza rendere rumoroso il layout.

Come usare una palette nero e grigio in progetti reali

Costruisci la gerarchia con valori, non colori extra: usa quasi-neri per titoli/navigazione, grigi medi per secondari UI e divisori, grigi chiarissimi o off-white per superfici. Le pagine risultano così strutturate e prive di disordine visivo.

Attenzione a contrasto e leggibilità. Invece di nero puro su bianco puro ovunque, usa testo carbone scuro su sfondo off-white per lunghe letture, riserva il nero più profondo solo per elementi di rilievo.

Per evitare un effetto “piatto”, aggiungi profondità con spaziature, ombre delicate e gradienti morbidi—soprattutto nei temi scuri. Tieni questi effetti minimi per una palette sempre pulita e professionale.

Crea visual con palette nero e grigio con l’IA

Se vuoi vedere in anteprima una palette nero-grigia su dashboard, poster, packaging o template slide, genera rapide visualizzazioni AI. È un modo veloce per testare mood, contrasto e idee d’accento prima di realizzare il design finale.

Usa i codici HEX della palette come vincolo, poi descrivi layout e stile della luce (studio, editoriale, cinematografico, UI minimale). Puoi iterare velocemente cambiando leggermente i prompt per trovare il mood giusto in pochi minuti.

Quando trovi un risultato che ti piace, esportalo e riutilizzalo come mood board di riferimento per web, stampa o linee guida del brand.

Avanti: Palette di Colori Rosa Verde