Le 20 migliori palette di colori urbani con codici Hex

Le palette di colori urbani catturano l’atmosfera della vita moderna in città: neutri terrosi, ombre nitide e accenti caldi che rendono bene sia su schermo che in stampa.

Di seguito trovi oltre 20 idee di palette di colori urbani con codici HEX, più prompt AI pronti all’uso che puoi copiare su Media.io per generare rapidamente immagini coordinate.

Perché le palette urbane funzionano così bene

Le palette urbane sembrano “reali” perché si basano sui colori che le città forniscono naturalmente: grigi cemento, antracite asfalto, blu nebbiosi, rossi mattone e calda luce interna.

Inoltre, sono incredibilmente pratiche. I neutri smorzati facilitano la disposizione di tipografia, icone e foto prodotto, mentre un solo colore accento crea una gerarchia chiara per CTA, etichette e punti salienti.

Soprattutto, le palette urbane funzionano bene su tutto il sistema del brand—da componenti UI a poster, packaging e template social senza risultare troppo “alla moda”.

Oltre 20 idee di palette colori urbane (con codici HEX)

1) Sidewalk Latte

HEX: #F4AFA5 #C9C6C1 #3B2F2F #8E9A93 #F7F3EE

Mood: accogliente, autentico, moderno

Ideale per: branding caffetteria e design menu

Calda e cittadina: queste tonalità ricordano una tazza di latte in mano durante una mattina fresca sul marciapiede. È una palette urbana amichevole per menu, tessere fedeltà e piccolo packaging dove conta il calore. Abbina l’accento salmone al testo espresso per contrasto, mantenendo lo sfondo arioso in bianco sporco. Consiglio d’uso: usa il grigio salvia per i titoli secondari per mantenere l’impaginato calmo, non lezioso.

Esempio immagine “sidewalk latte” generato con media.io

Media.io

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

Provalo Ora Gratis

2) Acciaio e Agrumi

HEX: #4C5866 #D7DCE2 #F2B441 #23262A #2F7C8A

Mood: nitido, energico, sicuro di sé

Ideale per: UI mockup landing page startup tecnologica

Grigi acciaio nitidi con un tocco di agrumi evocano grattacieli di vetro e pendolarismo veloce. L’abbinamento funziona perfettamente per dashboard e hero section dove serve chiarezza più una call-to-action forte. Tieni l’antracite per la navigazione e usa l’agrume solo per pulsanti, badge e metriche chiave. Consiglio d’uso: limita il teal a grafici o link per mantenere leggibile la gerarchia degli accenti.

Esempio immagine “acciaio e agrumi” generato con media.io

3) Crepuscolo Neon Alley

HEX: #1B1A22 #3B2A4A #E64B7A #F1C84C #B6B8C5

Mood: audace, elettrico, vita notturna

Ideale per: design poster evento nightlife

Rosa elettrico e luce dorata su ombre profonde sembrano neon riflessi sull’asfalto bagnato. Usa la base scura per grandi blocchi di testo e lascia agli accenti accesi i dettagli come date, DJ o fasce biglietti. Abbina forme geometriche semplici per evitare confusione visiva, e mantieni il grigio pallido per spaziature e leggibilità. Consiglio d’uso: prova una sfumatura dal viola quasi al nero dietro il titolo per profondità immediata.

Esempio immagine “crepuscolo neon alley” generato con media.io

4) Giardino sul Tetto

HEX: #2E5D50 #8FB8A6 #E7D7C6 #C46A4A #3C3C3C

Mood: fresco, boutique, rilassato

Ideale per: visual per sito hotel boutique

Verdi freschi e terracotta calda evocano vasche fiorite e angoli relax sui tetti. Queste tonalità funzionano ottimamente sulle pagine hospitality, soprattutto per servizi, sezioni booking e didascalie. Abbina la crema delicata al verde profondo per contrasto, poi riserva la terracotta per pulsanti o highlights. Consiglio d’uso: usa l’antracite per il testo corpo per un look premium e facile da leggere.

Esempio immagine “giardino sul tetto” generato con media.io

5) Cemento Metropolitana

HEX: #2D2F33 #6C7077 #B8BCC2 #F1F2F4 #A66B5B

Mood: professionale, architettonico, sobrio

Ideale per: brochure immobiliare e schede annunci

Grigi cemento lucidi con una nota di rame spento ricordano la hall di un nuovo edificio nell’ora di punta. Questa palette urbana è ideale per layout immobiliari che richiedono fiducia, struttura e un calore sottile. Abbina l’accento rame a una fotografia potente, e usa il grigio chiaro come tela pulita per planimetrie e dettagli. Consiglio d’uso: titoli in quasi-nero e testo corpo su grigio pallido per chiarezza da stampa.

Esempio immagine “cemento metropolitana” generato con media.io

6) Mattone e Nebbia

HEX: #B55A4A #E6E0D8 #6E7B83 #2C2A28 #F3B48B

Mood: heritage, calmo, da studio

Ideale per: sito portfolio architettura

Il calore del mattone e il grigio nebbioso suggeriscono facciate antiche sotto cieli coperti. Usa il neutro chiaro per le pagine progetto e lascia a mattone e pesca il compito di evidenziare dettagli chiave come ubicazione, anno o premi. Abbina tanto spazio bianco e filetti sottili così il lavoro resta protagonista. Consiglio d’uso: l’antracite per didascalie e misure mantiene il tocco disciplinato e architettonico.

Esempio immagine “mattone e nebbia” generato con media.io

7) Attraversamento Pedonale Minimal

HEX: #0F1012 #FFFFFF #B9BDC5 #E0D6C7 #D66A5E

Mood: minimale, editoriale, alto contrasto

Ideale per: impaginazione lookbook moda editoriale

Il contrasto netto tra bianco e nero con neutri caldi e morbidi richiama le strisce pedonali pulite e le vetrine lucide. Perfetto per lookbook, copertine guidate dalla tipografia e didascalie d’immagine che richiedono respiro. Abbina l’accento salmone-corallo ai separatori di sezione o ai numeri pagina, invece che a grandi blocchi. Consiglio d’uso: mantieni le foto leggermente desaturate così la carta neutra calda risalta.

Esempio immagine “attraversamento pedonale minimal” generato con media.io

8) Teal Tram

HEX: #1F6A78 #86A9B0 #F7E7D3 #D27C5D #1C2024

Mood: arioso, città costiera, invitante

Ideale per: grafica header blog viaggio

Teal e sabbia delicata evocano un viaggio in tram verso l’acqua con edifici assolati che scorrono. Usa il teal per barre titoli e navigazione, poi lascia la crema rendere confortevoli letture lunghe. Abbina il corallo a badge, pin su mappe o tag di categoria per guidare la lettura. Consiglio d’uso: testo corpo in quasi-antracite per leggibilità senza la durezza del nero puro.

Esempio immagine “teal tram” generato con media.io

9) Ruggine Magazzino

HEX: #7A3E2E #B46A4E #D9C1A7 #4A4F55 #1F1F1F

Mood: robusto, artigianale, industriale

Ideale per: packaging lattina birra artigianale

I marroni arrugginiti e i toni scuri e grintosi evocano legno di recupero, travi d'acciaio e una taproom artigianale. Queste tonalità sono perfette per un packaging dove la texture e l'autenticità sono importanti, soprattutto abbinati a caratteri tipografici audaci e timbri semplici. Accosta il beige sabbia a illustrazioni di luppolo o grano per evitare che l'etichetta risulti troppo pesante. Consiglio d'uso: utilizza il grigio medio per i testi legali così da mantenerli visibili senza attirare troppo l'attenzione.

Esempio d'immagine di ruggine da magazzino generata con media.io

10) Gallery Greige

HEX: #F2EEE8 #D6CEC4 #A39B92 #5A5957 #C98B7A

Mood: calmo, curato, moderno

Ideale per: kit di branding per interior design minimalista

Gli strati soft greige ricordano una parete di galleria tranquilla con luci calde e cornici opache. Questa palette urbana è ideale per guide di brand, presentazioni e copertine di portfolio che necessitano di un'eleganza discreta. Abbina il grigio scuro a tipografia sans-serif pulita e usa il terracotta spento per accenti e firme. Consiglio d'uso: mantieni gli sfondi nella tonalità più chiara e riserva quelle più scure per struttura e gerarchia.

Esempio d'immagine di gallery greige generata con media.io

11) Asphalt Bloom

HEX: #24262B #5E6A75 #C7CDD2 #F2AFA5 #8A3B4A

Mood: elegante, romantico, notturno urbano

Ideale per: creatività pubblicitaria per prodotto skincare

I toni asfalto scuro con blush e frutti di bosco ricordano fiori contro uno skyline notturno. Usa questa combinazione per pubblicità di bellezza dove vuoi eleganza senza risultare troppo pastello. Accosta il blush a testi prodotto puliti e riserva il berry per piccoli richiami come percentuali o benefici. Consiglio d'uso: scegli uno sfondo grigio freddo così che il blush risulti fresco e non dolce.

Esempio d'immagine di asphalt bloom generata con media.io

12) Night Train

HEX: #0B0E14 #1E2A3A #4F6D7A #C7A27C #EAE2D6

Mood: suggestivo, affidabile, cinematografico

Ideale per: schermate di onboarding app

Blu navy e ardesia profondi sembrano la vista dal finestrino di un treno con le luci della città che scorrono via sfocate. Il beige caldo aggiunge un tocco premium ideale per app fintech, viaggi o per membri. Abbina la crema a titoli grandi e mantieni i pulsanti nel beige per un percorso visivo chiaro. Consiglio d'uso: usa l’ardesia per i testi secondari così da mantenere lo sfondo scuro confortevole, non troppo severo.

Esempio d'immagine di night train generata con media.io

13) Side Street Pastels

HEX: #F6C6B4 #F1E6D8 #B7C0C7 #8E9CA6 #5B4B4B

Mood: soffice, intimo, moderno-classico

Ideale per: set d'invito per fuga in città

Pesca delicato e crema su carta evocano una stradina tranquilla all’ora d’oro. Queste tonalità sono ideali per inviti che desiderano romanticismo con un tocco contemporaneo. Accosta i grigi freddi a una tipografia serif pulita e usa il cacao intenso per nomi e dettagli chiave. Consiglio d'uso: aggiungi sottili linee grigie per mantenere la struttura senza perdere la leggerezza dell’insieme.

Esempio d'immagine di side street pastels generata con media.io

14) Corner Bakery Signage

HEX: #F3D1B8 #C06B5A #3A2F2C #A1A9A5 #F7F5F1

Mood: accogliente, artigianale, di quartiere

Ideale per: grafiche per insegna e poster di negozio

Toni pasticceria caldi e marrone cacao evocano cartelli scritti a mano davanti alla panetteria di quartiere. Usa la base crema per leggibilità e lascia che il rosso terracotta sia il marchio del brand. Accosta il grigio-verde smorzato a ingredienti o etichette secondarie per non rendere la palette troppo dolce. Consiglio d'uso: stampa il marrone scuro come colore principale del testo per un effetto più soft rispetto al nero puro.

Esempio d'immagine di corner bakery signage generata con media.io

15) Skyline Bluehour

HEX: #2C3E50 #4B5D67 #95A5A6 #E0C097 #E76F51

Mood: aziendale, raffinato, proiettato al futuro

Ideale per: design copertina per rapporto annuale

Toni blue-hour con accenti caldi evocano lo skyline poco prima che si accendano tutte le luci. Perfetta per rapporti aziendali e presentazioni in cui serve autorevolezza senza sembrare fredda. Abbina sezioni ardesia-blu a grafici color sabbia, poi usa il corallo per callout e successi chiave. Consiglio d’uso: mantieni le icone nel grigio-blu chiaro per un ritmo visivo coeso e professionale.

Esempio d'immagine di skyline bluehour generata con media.io

16) Tram Ticket

HEX: #F5F0E6 #D1C5B6 #2F3A3D #4F8A8B #E07A5F

Mood: organizzato, retro-moderno, chiaro

Ideale per: design infografico mappa della metropolitana

Carta crema e carbone inchiostrato ricordano il fascino dei vecchi biglietti del tram, puliti e collezionabili. Questa combinazione urbana è perfetta per mappe, orari e infografiche dove conta la chiarezza più della decorazione. Usa il teal per le linee di percorso e riserva il corallo per una linea o punti di interscambio importanti. Consiglio d’uso: mantieni le etichette in carbone ed evita tratti troppo sottili per una leggibilità ottimale anche in piccolo formato.

Esempio d'immagine di tram ticket generata con media.io

17) Pavement Peach

HEX: #F4AFA5 #F8EDE3 #C9C3BB #6D6A67 #2B2B2B

Mood: amichevole, moderno, social-first

Ideale per: template carosello social media

Pesca delicato su neutri caldi ricorda un marciapiede soleggiato e vetrine minimali. Usa la crema chiara per la maggior parte delle slide, pesca per titoli, adesivi o prezzi. Accosta il carbone scuro a spaziatura generosa per testi leggibili su mobile. Consiglio d'uso: mantieni le ombre delicate e prediligi forme semplici per un look pulito, accattivante nello scrolling.

Esempio d'immagine di pavement peach generata con media.io

18) Rainy Plaza

HEX: #3D4A4F #6E7F86 #B4C0C6 #E9E3DA #9C5C4B

Mood: fresco, costante, outdoor

Ideale per: layout catalogo abbigliamento outdoor

Grigi freddi e blu nebbiosi evocano una piazza piovosa con ombrelli in movimento lento. Questi toni sono perfetti per cataloghi dove le foto prodotto richiedono una cornice solida e pratica. Usa l’accento terracotta-perlato per prezzi o callout e mantieni i neutri chiari come base di carta. Consiglio d'uso: scegli il grigio-blu intermedio per divisori e tabelle in modo che il layout resti organizzato senza risultare caotico.

Esempio d'immagine di rainy plaza generata con media.io

19) District Night Market

HEX: #2A1F2D #5C3D5A #D96C5F #F0B44C #E6E4DF

Mood: vivace, speziato, notturno

Ideale per: flyer festival street food

Ombre prugna con accenti corallo e oro evocano lanterne sopra un affollato mercato notturno. Usa i toni più scuri per blocchi di sfondo e accenti caldi per guidare l’occhio su line-up, location e orario. Accosta il neutro chiaro alle aree di testo in modo che i dettagli restino leggibili anche con colori forti. Consiglio d'uso: scegli una tipografia semplice e spessa per reggere gli accenti saturi.

Esempio d'immagine di district night market generata con media.io

20) Modern Loft

HEX: #F1E9DD #C9B9A6 #7C7A73 #2C2C2C #C46D5C

Mood: caldo, raffinato, contemporaneo

Ideale per: hero landing page prodotto arredamento

Neutri caldi da intonaco con accento terracotta evocano un loft silenzioso con linee pulite e luce morbida del pomeriggio. Usa il tono crema come base principale, struttura i layout con titoli carbone e griglie ben definite. Abbina il terracotta per pulsanti o etichette prodotto per aggiungere calore senza sovrastare la fotografia. Consiglio d’uso: mantieni i pannelli secondari in taupe così la pagina risulta stratificata e premium.

Esempio d'immagine di modern loft generata con media.io

21) Underpass Ink

HEX: #111316 #3E4650 #9AA3AD #E6DFD5 #F4A07B

Mood: grintoso, nitido, moderno

Ideale per: poster grafico lancio streetwear

Neri inchiostro e grigi freddi ricordano un sottopassaggio, mentre l'accento albicocca pare uno sticker appena applicato. Usa la base scura per tipografia audace e fotografie ad alto impatto. Abbina il neutro chiaro a blocchi informativi di prodotto e riserva l’albicocca per un elemento forte come data o prezzo. Consiglio d’uso: lascia margini generosi così che i toni forti risultino comunque eleganti e non opprimenti.

Esempio d'immagine di underpass ink generata con media.io

Quali colori abbinare all’urbano?

Le palette urbane si abbinano meglio con neutri strutturati: carbone, grigio cemento, bianco sporco e blu ardesia. Queste sfumature mantengono il layout leggibile e rendono omogenee le fotografie.

Per gli accenti, scegli un solo colore caldo (salmone, terracotta, rame, agrumi) o un solo highlight freddo (teal, blu acciaio) per guidare l’attenzione. Utilizzare “un solo accento forte” è ciò che rende il design cittadino moderno e non caotico.

Se ti serve un po' più di varietà, aggiungi un secondo accento su scala minore: pensa a link, linee di grafico o tag, mentre sfondo e testo restano ancorati alle tonalità neutre.

Come usare una palette urbana nei design reali

Parti da una base neutra (bianco sporco o grigio chiaro) per gli sfondi, poi riserva la tonalità più scura per la tipografia e la struttura UI. Questo crea il contrasto deciso tipico del design urbano.

Poi, assegna il colore di accento a una sola funzione: bottoni CTA, etichette prezzo, date eventi o metriche chiave. Quando ogni highlight ha la stessa tonalità, il design appare intenzionale e “urbano-pulito”.

Infine, mantieni la saturazione bilanciata. Le palette urbane sono più forti quando le fotografie sono leggermente desaturate e i colori dell'interfaccia rimangono smorzati, lasciando l’accento protagonista.

Crea visual urbani con l’AI

Vuoi mockup, poster e concept UI coordinati per qualsiasi palette urbana qui sopra? Copia il prompt sotto una palette e genera uno stile visivo coerente in pochi minuti.

Media.io rende facile fare iterazioni: prova diversi formati, cambia soggetto (da poster a landing page), e mantieni lo stesso mood cromatico per la coerenza di brand.

Quando hai un’immagine che ti convince, puoi affinarla per campagne, anteprime o slide di presentazione—senza uscire dal browser.

Prossimo: Palette di Colori Light Salmon