20 palette arancioni e grigie moderne con codici colore Hex

Una palette di colori arancione e grigio è un classico moderno: l’arancione porta energia e personalità, mentre il grigio aggiunge controllo, chiarezza e una solida base neutra di alta qualità.

Di seguito trovi 20 palette arancione-grigio con codici HEX, più consigli pratici per utilizzarle nel branding, nell’interfaccia utente, nel packaging e negli interni.

Perché le palette arancione-grigio funzionano così bene

Arancione e grigio funzionano perché bilanciano naturalmente temperatura ed emozione: l’arancione trasmette calore, attivismo e umanità, mentre il grigio comunica freddezza, stabilità e professionalità.

Questo contrasto crea una gerarchia istantanea nel design. I grigi possono gestire la tipografia, le griglie e le superfici, mentre l’arancione diventa un accento controllato per CTA, evidenziazioni e informazioni chiave.

È anche un abbinamento flessibile in diversi settori – dalla finanza alla moda – perché puoi modificare l’atmosfera cambiando la saturazione: l’arancione brillante dà energia, quello bruciato è raffinato e l’albicocca tenue è rilassante.

Oltre 20 idee di palette arancione-grigio (con codici HEX)

1) Ember Concrete

HEX: #ff7a18 #ffb26b #f2efe9 #8a8f98 #2f3238

Atmosfera: audace, radicata, moderna

Ideale per: sistemi di identità di marca e banner hero di siti web

Il calore deciso di ember sopra ai neutri cemento ricorda le luci della città sull’asfalto bagnato. Usa il carbone più scuro per i titoli, il grigio medio per la struttura UI e il bianco sporco per mantenere ariosi i layout. L’arancione brillante funziona meglio come accento controllato per pulsanti, badge o dati chiave. Consiglio: mantieni la copertura dell’arancione sotto il 15% per conservare un look moderno e premium.

Esempio immagine di ember concrete generato con media.io

Media.io

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

Provalo ora gratis

2) Sunrise Slate

HEX: #ff6f3c #ffd1a6 #e6e9ef #6b7280 #111827

Atmosfera: fresca, ottimista, nitida

Ideale per: dashboard UI e visual per analytics

Le tonalità dell’alba su ombre ardesia regalano una chiarezza mattutina e pulita. Come palette arancione-grigio, funziona al meglio quando il pesca chiaro è usato per i pannelli e il blu-ardesia scuro ancora la navigazione. Riserva l’arancione intenso per le CTA primarie e per evidenziare grafici, guidando subito l’attenzione. Consiglio: abbinalo ad icone sottili e spaziature generose per un’interfaccia ariosa.

Esempio immagine di sunrise slate generato con media.io

3) Citrus Steel

HEX: #ff8a00 #ffc857 #d9dde3 #5c6670 #1f2933

Atmosfera: energetica, industriale, nitida

Ideale per: landing page di prodotti tech e sezioni funzionalità

Il citrus energico risalta sugli acciaio come marcature di sicurezza su metallo satinato. Usa il tono dorato per evidenze secondarie e lascia l’arancione più acceso per una sola azione principale a schermo. Il grigio chiaro e fresco è perfetto come sfondo per card, mentre lo slate scuro supporta titoli leggibili. Consiglio: aggiungi divisori sottili da 1px in grigio medio per un look ingegneristico e preciso.

Esempio immagine di citrus steel generato con media.io

4) Terracotta Fog

HEX: #d9633a #f3b39b #faf7f2 #9aa0a6 #3c4043

Atmosfera: morbida, accogliente, elegante

Ideale per: inviti di matrimonio e cartoleria per eventi

La terracotta delicata che si fonde nella nebbia chiara trasmette romanticismo e sensazioni tattili, come argilla e lino. Usa il bianco crema come base della carta e imposta il testo nel grigio più profondo per la leggibilità. L’arancione desaturato funziona bene per monogrammi, bordi e piccoli motivi floreali senza risultare eccessivo. Consiglio: aggiungi un tocco di texture allo sfondo mantenendo la tipografia raffinata e minimale.

Esempio immagine di terracotta fog generato con media.io

5) Apricot Graphite

HEX: #ff9f66 #ffd8c2 #f7f7f5 #7a7f87 #2b2f36

Atmosfera: calda, minimale, raffinata

Ideale per: moodboard per interni moderni e home decor

L’albicocca calda contro il graphite ricorda una stanza al sole con dettagli in pietra opaca. Usa il pesca tenue come accento per tessili, arte o piccoli elementi d’arredo, mentre il graphite dà solidità alle superfici e ai profili di mobili. Il quasi-bianco mantiene la scena pulita e moderna, soprattutto con legno naturale o metallo nero. Consiglio: ripeti il grigio medio in due o tre punti per creare ritmo visivo senza appesantire.

Esempio immagine di apricot graphite generato con media.io

6) Pumpkin Ash

HEX: #ff6a00 #ffad66 #ececec #9b9b9b #3a3a3a

Atmosfera: sicura, decisa, urban style

Ideale per: annunci social stories e grafica promozionale

Le tonalità zucca su grigi cenere richiamano i poster di strada sotto le luci al neon. Queste combinazioni arancione-grigio funzionano meglio se il grigio più scuro supporta la tipografia e l’arancione acceso è riservato per prezzi o etichette limited edition. Usa il grigio pallido per dare respiro e garantire leggibilità su mobile. Consiglio: mantieni alto il contrasto e usa font bold per mantenere l’impatto anche in piccolo formato.

Esempio immagine di pumpkin ash generato con media.io

7) Copper Pebble

HEX: #c65a2e #e8a37a #f1f0ee #a3a6ab #44474d

Atmosfera: artigianale, terrigna, raffinata

Ideale per: packaging caffè e etichette prodotti artigianali

Il rame artigianale con grigi ciottolo richiama chicchi tostati, ceramiche e carta timbrata a mano. Lascia il neutro crema come base per l’etichetta e il grigio più scuro per ingredienti e info legali. Il rame è ideale per marchi o sigilli, soprattutto se abbinato a una texture leggermente granulosa. Consiglio: aggiungi piccoli dettagli lineari in rame per incorniciare il layout senza oscurare il nome del prodotto.

Esempio immagine di copper pebble generato con media.io

8) Tangerine Storm

HEX: #ff5f1f #ffb199 #dfe3ea #748092 #212a33

Atmosfera: dinamica, grintosa, tecnologica

Ideale per: banner per gaming e overlay streaming

Il mandarino elettrico che taglia i grigi tempestosi comunica rapidità, impatto e un effetto cinematografico. Usa il blu-grigio scuro come sfondo primario per far risaltare gli accenti arancioni senza affaticare la vista. La tonalità chiara può ammorbidire pannelli chat o statistiche mantenendo coerenza. Consiglio: abbinalo a forme diagonali sottili per rafforzare la sensazione di movimento.

Esempio immagine di tangerine storm generato con media.io

9) Persimmon Smoke

HEX: #e85d2a #ffb38a #f5f1ea #8b8f95 #2a2d31

Atmosfera: calma, boutique, accogliente

Ideale per: branding skincare e boutique e-commerce

I neutri fumosi con il caldo kaki-mela evocano una spa lounge con luce soffusa. Usa la tonalità crema per sfondi e griglie prodotti, mantenendo la tipografia sul quasi-nero per la chiarezza. L’accento kakimela brilla su pulsanti add to cart, valutazioni e piccole icone. Consiglio: limita le sfumature e prediligi blocchi di colore netti per un effetto di alta gamma.

Esempio di immagine di fumo di cachi generato tramite media.io

10) Carbone Calendula

HEX: #ff9a1f #ffd36a #f4f3ef #6a6f77 #1c1f24

Atmosfera: energizzante, editoriale, sicuro

Ideale per: presentazioni e template keynote

I tocchi di calendula sul carbone sembrano istanti sotto i riflettori su un palco scuro. Usa il carbone per le slide di titolo e i divisori, poi inserisci la calendula per richiamare attenzione, sulle icone e nei grafici. Il neutro chiaro mantiene le slide con molti contenuti leggibili quando serve una pagina più calma. Consiglio: scegli un unico stile di accento calendula, come sottolineature o piccoli blocchi, e applicalo in tutta la presentazione.

Esempio di immagine carbone calendula generato tramite media.io

11) Terra di Siena Bruciata Drift

HEX: #b84e2a #e58f6a #f6efe8 #9097a1 #333842

Atmosfera: tradizionale, all'aperto, robusto

Ideale per: etichette e cartellini per attrezzatura outdoor

La terra di siena bruciata con grigi freschi richiama sentieri nel canyon e tela usurata. Usa il grigio scuro per testi e codici a barre, mentre la terra di siena diventa tale per timbri o badge cuciti. Il tono caldo si abbina bene con carta marrone e finiture opache. Consiglio: scegli un font bold condensato per enfatizzare lo stile robusto e utilitario.

Esempio di immagine terra di siena bruciata drift generato tramite media.io

12) Ambra Lega

HEX: #ff7f11 #ffbf69 #f8f5f0 #7b8794 #2d3439

Atmosfera: elegante, premium, equilibrato

Ideale per: app fintech e schermate onboarding

L'ambra elegante contro i grigi simil-legno trasmette fiducia con una nota di calore. Questa palette arancione-grigia funziona bene quando il grigio scuro sostiene la navigazione e l'ambra è riservata per stati di avanzamento e azioni primarie. Usa il neutro chiaro per schermate intere per evitare affaticamento visivo. Consiglio: mantieni le ombre soffici e affidati a spaziatura e contrasto per la gerarchia.

Esempio di immagine ambra lega generata tramite media.io

13) Scorza d'Arancia Minimal

HEX: #ff8c2b #ffe0c2 #ffffff #b0b4bb #22262b

Atmosfera: pulito, amichevole, moderno

Ideale per: kit UI e librerie di componenti SaaS

Gli accenti vivaci della scorza d’arancia su bianchi puliti danno freschezza, semplicità e massima usabilità. Usa il quasi-nero per i testi, il grigio chiaro per i bordi e la tonalità pesca per hover o tab selezionate. L’arancione rende di più quando applicato su un solo tipo di componente, come pulsanti primari o toggle. Consiglio: testa il contrasto sulle piccole etichette per garantire l’accessibilità.

Esempio di immagine scorza d'arancia minimal generata tramite media.io

14) Ruggine e Nuvola

HEX: #cc5a2e #f0a67a #e8eef3 #6e7b88 #253040

Atmosfera: intenso, architettonico, sofisticato

Ideale per: portfolio di architettura e pagine case study

Il calore della ruggine su blu e grigi nuvola trasmette sensazione architettonica e dramma discreto. Usa il grigio-blu pallido come sfondo, poi metti il corpo del testo nell’ardesia scura per una leggibilità nitida. La ruggine evidenzia bene numeri di sezione, link e tag dei progetti. Consiglio: abbina a grandi fotografie e griglie sottili per valorizzare la struttura.

Esempio di immagine ruggine e nuvola generata tramite media.io

15) Cicoria Corallo

HEX: #ff6b5a #ffb3aa #f2f2f2 #8d939a #2b2b2f

Atmosfera: giocoso, trendy, accessibile

Ideale per: pubblicità di prodotti beauty e post social

L’energia del corallo con i grigi cicoria è giocosa ma raffinata, come in un editoriale beauty moderno. Usa il corallo tenue per grandi campi di colore, il grigio scuro per titoli evitando così un effetto troppo zuccheroso. Il neutro chiaro fa risaltare la fotografia prodotto senza competere. Consiglio: aggiungi forme arrotondate semplici per rafforzare lo stile amichevole dei toni corallo.

Esempio di immagine cicoria corallo generata tramite media.io

16) Zafferano Urbano

HEX: #f28c00 #ffd08a #f7f6f3 #7c828a #30343a

Atmosfera: urbano, caldo, deciso

Ideale per: menu di ristoranti e branding café

La temperatura dello zafferano con i grigi urbani ricorda un café accogliente nella frenesia cittadina. Usa il bianco sporco come base menu, le sezioni in grigio scuro per lettura immediata. Lo zafferano è ideale per titoli, icone e linee di enfasi. Consiglio: scegli immagini dai toni caldi per armonizzare col giallo zafferano ed evita foto dai toni freddi contrastanti.

Esempio di immagine zafferano urbano generata tramite media.io

17) Papaya Stone

HEX: #ff7a3d #ffc4a3 #f1ede6 #9aa3ad #39414a

Atmosfera: soleggiato, naturale, rilassato

Ideale per: packaging home goods ed etichette lifestyle

La luminosità della papaya con i neutri pietra dà una sensazione rilassata, come grembiuli in lino e cucine illuminate dal sole. Qui le combinazioni arancio e grigio brillano se la papaya viene usata per badge o motivi e l’ardesia scura gestisce i nomi prodotto. Il beige caldo mantiene la palette organica e poco tech. Consiglio: usa materiali opachi e poca copertura d’inchiostro per un look calmo e sostenibile.

Esempio di immagine papaya stone generata tramite media.io

18) Cemento Luce del Fuoco

HEX: #ff5a1f #ffb07c #f5f5f5 #7f8790 #20252b

Atmosfera: alto contrasto, moderno, d’effetto

Ideale per: poster evento e promozioni musica notturna

L’arancione luce del fuoco contro i grigi cemento trasmette drammaticità, come un riflettore nella foschia. Usa il quasi-nero per tipi forti, il grigio medio per informazioni secondarie, il grigio chiaro per dare respiro. Riserva l’arancione per nome artista, data o un elemento grafico d’impatto. Consiglio: usa una griglia rigorosa per mantenere il dramma leggibile e controllato.

Esempio di immagine cemento luce del fuoco generata tramite media.io

19) Segnale d’Autunno

HEX: #e76f00 #ffbe73 #f9f3e8 #80868f #151a20

Atmosfera: stagionale, deciso, classico

Ideale per: header newsletter e visual blog

I toni segnale d’autunno si ispirano all’aria frizzante, ai maglioni caldi e alla tipografia pulita. Usa il quasi-nero per titoli e testi lunghi e lascia la crema chiara come sfondo. L’arancione brillante è perfetto per piccoli tocchi su link, punti elenco o tag di sezione. Consiglio: abbina con fotografie tenui ed evita immagini troppo sature per coesione cromatica.

Esempio di immagine segnale d’autunno generata tramite media.io

20) Grigio Neon Safety

HEX: #ff4d00 #ff9b5e #f0f2f5 #9ea4ad #2a2f36

Atmosfera: sportivo, vistoso, contemporaneo

Ideale per: branding e sistemi etichetta abbigliamento sportivo

L’arancione neon con grigi puliti è sportivo e dinamico, come un outfit da allenamento sotto i riflettori. Usa il grigio più scuro per loghi e testi, il neon solo per elementi evidenti come marcature taglia, zip o angoli delle etichette. Il grigio chiaro mantiene il sistema ordinato e moderno. Consiglio: usa tanto spazio negativo così il neon appare intenzionale e non casuale.

Esempio di immagine grigio neon safety generata tramite media.io

Quali colori si abbinano bene con l’arancione-grigio?

Arancione e grigio si abbinano facilmente a bianchi brillanti e bianchi sporchi per una base moderna e pulita. Aggiungi nero o carbone profondo per maggiore contrasto su tipografia e accessibilità.

Per un look più naturale, integra neutri caldi come beige, sabbia o kraft; rendono l’arancione meno “tecnologico” e più organico. Nei layout freddi, sfondi blu-grigi e accenti navy tenui mantengono la palette tranquilla e strutturata.

Per un tocco in più, piccole dosi di teal, menta o azzurro ghiaccio possono completare l’arancione senza contrastare: basta mantenerli secondari così l’arancione resta il protagonista.

Come usare una palette arancione-grigio in progetti reali

Inizia con il grigio come colore principale: sfondi, navigazione, superfici e gerarchia testuale. Poi usa l’arancione con parsimonia per azioni (pulsanti principali), enfasi (tag) e indicatori (grafici), così l’attenzione è guidata volontariamente.

Scegli un livello di saturazione di arancione e mantienilo costante nei componenti per evitare confusione visiva. Se servono più arancioni, riserva quello più acceso agli elementi principali e usa tonalità più morbide per hover, selezione o stati di fondo.

In stampa e packaging, i grigi opachi e i bianchi sporchi rendono l’arancione più raffinato. Considera la texture (grana carta, ombre soffici) e mantieni alto contrasto per ingredienti e legal.

Crea visuali di palette arancione-grigio con l’IA

Se hai codici HEX ma servono mockup reali—poster, UI, packaging o interni—la generazione immagini AI può tradurre rapidamente la tua palette in visual coerenti.

Con Media.io, puoi descrivere il layout che desideri (es. “dashboard card”, “etichetta caffè” o “poster evento”) e mantenere il bilanciamento arancio-grigio dal concept all’esportazione.

Prossimo: Palette di colori verde Hunter