20 Abbinamenti di Palette Colori per Portfolio (+ Codici HEX)

Una palette di colori per il portfolio efficace fa molto più che avere un aspetto “gradevole”—stabilisce silenziosamente aspettative sul tuo gusto, sul tuo mestiere e su quanto sia curato il tuo lavoro. La giusta combinazione di colori neutri e accenti rende più facile sfogliare i case study e più affidabile il CTA.

Di seguito trovi oltre 20 idee di palette colori per portfolio (con codici HEX) che puoi copiare, modificare e visualizzare per siti web, CV, presentazioni e personal branding.

Perché le palette per portfolio funzionano così bene

I colori di design del portfolio svolgono molte funzioni: creano gerarchie, guidano l’attenzione e aiutano i visitatori a capire cosa conta di più (ruolo, risultati, e visual chiave). Quando la palette è coerente, il tuo lavoro appare più omogeneo, anche tra progetti diversi.

La maggior parte delle ottime combinazioni di colori per portfolio punta su una base neutra (così il contenuto rimane leggibile) e utilizza un solo accento deciso per azioni e evidenze. Questo approccio mantiene l’interfaccia tranquilla e allo stesso tempo ben marcata.

Infine, uno schema di colori affidabile riduce gli ostacoli: il contrasto pulito migliora l’accessibilità, mentre l’uso ripetuto degli accenti abitua l’occhio a riconoscere subito link, pulsanti e stati interattivi.

Oltre 20 idee di palette colori per portfolio (con codici HEX)

1) Midnight Linen

HEX: #0b1320 #1f2a44 #f2efe8 #c7b8a6 #b46a55

Atmosfera: raffinata, calma, editoriale

Ideale per: mockup della homepage portfolio UI 2d

Raffinata e calma, come il lino sotto la luce notturna in studio, queste tonalità equilibrano blu inchiostro profondi con neutri caldi e tattile. Usa le sfumature scure per titoli e navigazione, poi lascia che il lino e la sabbia caratterizzino le sezioni e gli spazi bianchi. Terracotta funziona al meglio come accento discreto per pulsanti, tag o link chiave. Consiglio: mantieni alto il contrasto abbinando testo #0b1320 su sfondo #f2efe8 per un effetto nitido e quasi stampato.

Esempio immagine di midnight linen 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 gratuitamente

2) Studio Concrete

HEX: #2b2d31 #5a6068 #d8dadd #f7f7f5 #ff6b4a

Atmosfera: industriale, moderno, energico

Ideale per: poster di graphic design su sfondo neutro

Industriale e moderno, questo set ricorda muri di cemento, luce soffusa e un pennarello neon vivace. Costruisci layout con i grigi per gerarchia tipografica e struttura, lascia che il bianco caldo apra lo spazio negativo. L’arancio-rosso è perfetto come elemento focale per CTA o una headline. Consiglio: limita l’accento a uno o due elementi per mantenere la palette sofisticata, non sportiva.

Esempio immagine di studio concrete generato con media.io

3) Gallery Sage

HEX: #1f2f2b #3f5f55 #a6b89a #e7e4d9 #c07a4b

Atmosfera: terra, curato, tranquillo

Ideale per: layout kit brand identity su sfondo neutro

Terroso e curato, questi verdi e neutri caldi evocano una galleria silenziosa con cornici in legno naturale. Usa il verde-nero intenso per loghi e titoli, il salvia e l’avena per sfondi e pannelli. Il rame è ideale per sigilli, icone o una linea di evidenza nel brand kit. Consiglio: abbina il rame a tanto spazio #e7e4d9 per mantenere un look premium.

Esempio immagine di gallery sage generato con media.io

4) Ink and Coral

HEX: #0d1b2a #1b263b #415a77 #e0e1dd #ff5d5d

Atmosfera: sicuro, pulito, alto contrasto

Ideale per: mockup pagina case study UI 2d

Sicuro e pulito, i blu inchiostro ricordano una giacca elegante, mentre il corallo aggiunge un tocco creativo moderno. Usa la tonalità più scura per testo principale e navigazione, il grigio chiaro per lo sfondo delle sezioni. Il corallo è ottimo per un solo colore d’azione in tutta la UI come link e progressi. Consiglio: ammorbidisci grandi blocchi scuri con #415a77 per evitare un effetto pesante in cima alla pagina.

Esempio immagine di ink and coral generato con media.io

5) Terracotta Proof

HEX: #2a1f1a #6b3f2a #c56b45 #f3e9df #2f4f4f

Atmosfera: artigianale, caldo, solido

Ideale per: mockup packaging realistico in studio

Caldi e solidi come argilla, caffè, e carta vissuta, questi colori si adattano ai brand artigianali. Usa la crema come base del packaging, poi stratifica i toni terracotta su etichette e dettagli delle illustrazioni. Il verde scuro-teal crea uno stacco intelligente per elenchi ingredienti o piccoli badge. Consiglio: mantieni la tipografia in #2a1f1a per leggibilità e un finish artigianale premium.

Esempio immagine di terracotta proof generato con media.io

6) Soft Peach Grid

HEX: #2b2f3a #5d6472 #f6d6c9 #f8f4f0 #d0a37f

Atmosfera: amichevole, arioso, delicato

Ideale per: flyer evento design su sfondo neutro

Amichevoli e ariosi, questi toni richiamano carta blush, matita grafite e luci morbide in studio. Lascia il quasi-bianco dominare il canvas, poi costruisci struttura coi grigi ardesia per tipografia e linee di griglia. Pesca e beige caldo aggiungono accoglienza per date, callout o piccole icone. Consiglio: usa pesca dietro ai blocchi testo chiave per guidare lo sguardo senza eccessi.

Esempio immagine di soft peach grid generato con media.io

7) Sea Glass Resume

HEX: #0f1f2b #1f4d5a #5ea3a3 #d9f1ef #f4fbfa

Atmosfera: fresco, affidabile, sereno

Ideale per: layout pagina curriculum editoriale

Freschi e sereni, questi blu sea-glass evocano luce costiera e acqua limpida. Usa il navy intenso per titoli e testo, il teal per suddividere sezioni e icone. L’acqua chiara e il quasi-bianco rendono la pagina aperta e leggibile anche per contenuti lunghi. Consiglio: riserva #5ea3a3 alle barre competenze o timeline per mantenere il layout calmo e professionale.

Esempio immagine di sea glass resume generato con media.io

8) Bronze Blueprint

HEX: #0a1a2a #17324a #2b556e #b08d57 #f2ede3

Atmosfera: premium, tecnico, composto

Ideale per: mockup dashboard UI 2d

Premium e composto, questa palette ricorda un progetto disegnato in inchiostro con righello bronzo su carta avorio. I blu stratificati danno gerarchia a pannelli, grafici e sidebar senza essere invasivi. Il bronzo porta un evidenza efficace per stati attivi, metriche chiave o piccoli badge in palette pensate per credibilità. Consiglio: usa il bronzo su sfondi scuri per massima evidenza e un look curato.

Esempio immagine di bronze blueprint generato con media.io

9) Plum Notebook

HEX: #1d1024 #40214e #7a3b74 #e4d3ea #f0b7a6

Atmosfera: creativo, cupo, giocoso

Ideale per: grafica carousel social media su sfondo neutro

Cupreo e giocoso, questi toni prugna ricordano i margini di un blocco schizzi pieni di inchiostro e evidenziatori pastello. Usa il viola più scuro per titoli d’impatto e lascia che il lavanda ammorbidisca pannelli secondari e didascalie. L’accento pesca è ideale per un elemento ripetitivo, come i numeri delle slide o un semplice set di icone. Consiglio: evita di mettere lunghi paragrafi sulla prugna più scura; conservala per testi brevi e incisivi.

Esempio di immagine di quaderno prugna generata con media.io

10) Forest Paper

HEX: #101d18 #244b3a #5f8c6d #dfe8d9 #f7f4ea

Atmosfera: naturale, solido, restaurativo

Ideale per: illustrazione botanica ad acquerello

Naturali e restitutive, queste tonalità di verde sembrano foglie in ombra su carta fatta a mano. Usa il verde foresta intenso per contorni e titoli, poi costruisci la vegetazione medio tono con #244b3a e #5f8c6d. I verdi chiari e la crema calda creano sfondi morbidi per card, slide o margini illustrativi. Consiglio: mantieni il verde più scuro in piccole aree per conservare l’umore arioso e botanico.

Esempio di immagine di forest paper generata con media.io

11) Cobalt Accent

HEX: #0b1020 #142a6e #2e5fff #d9e2ff #f2f4f8

Atmosfera: nitido, digitale, energico

Ideale per: mockup hero section UI 2D

Nitida e digitale, questa palette ricorda la modalità notte con un bagliore blu laser del cursore. Mantieni la maggior parte delle superfici nei grigi tenui e pervinca pallido per un’interfaccia ordinata. Usa il blu cobalto per azioni primarie, tab selezionate e link, mentre il blu navy più scuro ancora i titoli. Consiglio: prova gradienti da #142a6e a #2e5fff per un banner hero moderno senza aggiungere altri colori.

Esempio di immagine di cobalt accent generata con media.io

12) Sandstone Mono

HEX: #1b1b1b #4a4a4a #8a8a8a #d6d2c4 #faf7f0

Atmosfera: minimale, senza tempo, da galleria

Ideale per: layout rivista editoriale

Minimale e da galleria, questi toni grigi e sabbia richiamano pietra, mina di matita e carta d'archivio. Usa nero e antracite per la tipografia, e affidati ai neutri caldi chiari per margini e blocchi di sfondo. Il grigio medio è ottimo per didascalie, note a piè pagina e regole leggere che guidano il lettore. Consiglio: aggiungi texture tramite grana della carta o leggero disturbo invece di inserire altro colore.

Esempio di immagine di sandstone mono generata con media.io

13) Cherry on Slate

HEX: #1a2433 #334155 #64748b #f1f5f9 #e11d48

Atmosfera: moderno, sicuro, nitido

Ideale per: mockup landing page prodotto UI 2D

Moderna e nitida, i blu ardesia creano un ritmo deciso mentre il rosso ciliegia aggiunge un tocco di carattere. Usa lo sfondo chiaro per respiro e mantieni le sfumature ardesia per navigazione, card e bordi delicati. Per idee di combinazione colori da portfolio che mantengono professionalità, la ciliegia funziona meglio come unico colore d’azione su bottoni e link. Consiglio: tieni il rosso lontano da lunghi blocchi di testo e riservalo per micro-interazioni ed evidenziazioni.

Esempio di immagine di cherry on slate generata con media.io

14) Aurora Mint

HEX: #0e1b2a #224b46 #4fd1c5 #d9fff8 #fff7e6

Atmosfera: fresca, ottimista, luminosa

Ideale per: screens onboarding UI 2D

Fresca e luminosa, menta e teal profondo sembrano luce che passa attraverso il vetro. Usa il blu navy come colore di testo principale, poi lascia che menta e acqua chiara riempiano pannelli, card e forme illustrative amichevoli. La crema calda è una sottile controparte che evita un’interfaccia troppo fredda. Consiglio: usa la menta più brillante per indicatori di progresso e stati di successo così da rendere la user experience gratificante.

Esempio di immagine di aurora mint generata con media.io

15) Mocha Canvas

HEX: #231b16 #4b342a #8c6a4a #d8c3a5 #f2efe9

Atmosfera: accogliente, artigianale, premium

Ideale per: foto realistica etichetta prodotto in studio

Accoglienti e artigianali, questi marroni e crema evocano caffè tostato, taccuini in pelle e tela grezza. Usa i toni più scuri per testo e loghi, poi costruisci il calore con i marroni medi su etichette e pattern. I neutri chiari mantengono la composizione pulita e raffinata per packaging o cataloghi. Consiglio: aggiungi rilievi sottili o dettagli in foil nei marroni medi per profondità senza introdurre nuove tinte.

Esempio di immagine di mocha canvas generata con media.io

16) Sunset Type

HEX: #121826 #2a2f45 #ff8a5b #ffd2a6 #fff3e9

Atmosfera: caldo, moderno, invitante

Ideale per: poster tipografico su sfondo neutro

Caldi e invitanti, questi toni sembrano luce del tramonto contro una parete di studio scura. Usa l’indaco profondo per testo audace e allineamento deciso, poi sovrapponi pesca e albicocca per punti luce e forme di supporto. Il blush chiaro mantiene lo sfondo morbido e leggibile, specialmente su grandi poster o copertine slide. Consiglio: prova l’albicocca (#ffd2a6) dietro i titoli per creare immediata gerarchia senza extra grafici.

Esempio di immagine di sunset type generata con media.io

17) Icy Lavender

HEX: #131a2a #2f3a5f #a3a6ff #e8e9ff #f7f7ff

Atmosfera: fredda, raffinata, futuristica

Ideale per: mockup pagina impostazioni UI 2D

Fredda e raffinata, questa miscela lavanda ricorda vetro ghiacciato e aria limpida invernale. Usa il navy più scuro per titoli e switch, poi lascia che il lilla riempia sfondi e card. Il pervinca brillante è ideale per toggle selezionati e slider senza effetto neon. Consiglio: mantieni i bordi delicati usando #e8e9ff così che la UI rimanga ariosa e moderna.

Esempio di immagine di icy lavender generata con media.io

18) Vintage Cyanotype

HEX: #071a2a #0b3a53 #2c7da0 #a9d6e5 #eaf4f4

Atmosfera: nostalgica, accademica, oceanica

Ideale per: layout copertina rivista editoriale

Nostalgici e oceanici, questi blu richiamano le stampe cianotipo e antichi atlanti. Usa il navy profondo per testate e blocchi di testo, e il blu medio per sottotitoli e richiami. Le sfumature acquamarina chiare creano spazi negativi puliti che restano vivaci senza sembrare bianchi. Consiglio: aggiungi linee sottili e icone minuscole in #2c7da0 per un effetto accademico e curato.

Esempio di immagine di vintage cyanotype generata con media.io

19) Olive Ledger

HEX: #161c12 #3b4a2a #7c8a5b #e6e2d3 #c9a66b

Atmosfera: tradizionale, terrosa, affidabile

Ideale per: mockup set cancelleria in studio

Tradizionale e affidabile, oliva e kaki ricordano antichi registri, sigilli in ceralacca e tele di libri consunti. Usa l’oliva scura per loghi e titoli, poi affidati alla pergamena chiara per sfondi e carta. Per combinazioni colore da portfolio d’effetto classico, l’oro smorzato è un elegante accento su linee, icone o sigilli. Consiglio: mantieni l’oro piccolo e consistente, come un punto luce per sezione, per conservare quell’atmosfera d’archivio.

Esempio di immagine di olive ledger generata con media.io

20) Rose Quartz Code

HEX: #1a1f2b #3b4252 #b48ead #e5d7e9 #f6f1f5

Atmosfera: morbida, intelligente, contemporanea

Ideale per: mockup sezione portfolio sviluppatore UI 2D

Morbida e raffinata, queste tinte ricordano editor di codice grigio crepuscolo riscaldati dalla luce quarzo rosa. Usa la coppia antracite per blocchi codice, nav e titoli, e lascia che i neutri blush portino lo sfondo della pagina. La malva è perfetta per tag, stati link e piccoli dati in evidenza senza sembrare infantile. Consiglio: per una palette leggibile, imposta il testo su #1a1f2b sopra #f6f1f5 e usa l’accento malva in un solo peso.

Esempio di immagine di rose quartz code generata con media.io

21) Clay and Cloud

HEX: #1c2230 #3d4a5c #b7c3d0 #eef2f6 #c46a5a

Atmosfera: bilanciata, professionale, accogliente

Ideale per: mockup pagina about UI 2D

Equilibrata e accogliente, questa combinazione ricorda denim tempestosi con argilla cotta al sole. Usa i blu-grigi profondi per struttura e tipografia, poi lascia che le tonalità nuvola illuminino grandi sezioni e card. L’argilla è un accento amichevole per CTA, marker timeline o piccole illustrazioni. Consiglio: mantieni le ombre leggere e usa #b7c3d0 per i bordi così il layout resta arioso.

Esempio di immagine di clay and cloud generata con media.io

Quali colori si abbinano bene al portfolio?

I neutri sono la spina dorsale della maggior parte delle palette portfolio perché permettono ai tuoi lavori di restare protagonisti. Pensa a inchiostro/navy, antracite, bianco caldo e grigio tenue per layout dove leggibilità e gerarchia contano.

Poi aggiungi un solo colore accento che segnali interattività e rilievo—bottoni, link, chip e metriche principali. Corallo, cobalto, menta, bronzo o oro spento funzionano tutti bene se usati con coerenza.

Se i tuoi progetti sono visivamente diversi, mantieni la combinazione colori portfolio sobria e lascia che siano le immagini a fornire varietà. Uno sfondo stabile + un solo accento di solito trasmettono più qualità che tanti toni in competizione.

Come usare una palette colori per portfolio nei progetti reali

Inizia assegnando ruoli, non solo scegliendo colori: uno per testo primario, uno per testo secondario, uno per superfici (card/sezioni), uno per bordi/divisori e uno per azioni accento. Questo rende la tua combinazione colori ripetibile tra le pagine.

Utilizza intenzionalmente il contrasto per l’accessibilità: testo scuro su superfici chiare resta la scelta più intuitiva per case study e CV. Riserva i colori saturi per piccoli momenti UI come tab attivi, hover e highlight.

Infine, mantieni coerenza tra i componenti: bottoni, tag, icone, grafici e callout devono condividere la stessa logica di accento affinché tutto il sito risulti progettato, non solo decorato.

Crea visualizzazione di palette portfolio con l’IA

Se stai proponendo un nuovo look per il tuo sito personale (o costruisci un brand kit), generare mockup veloci ti aiuta a validare una palette prima di impegnarti in un redesign completo. Un semplice hero, pagina case study o layout CV bastano spesso a testare la sensazione generale.

Con Media.io puoi trasformare rapidamente idee colore in immagini—poi iterare sui prompt, composizione e illuminazione finché i toni sono perfetti per la tua nicchia e pubblico.

Prova a creare un concept “modalità chiara” e uno “modalità scura” usando lo stesso colore accento così da mantenere coerenza nel brand su tutti i dispositivi.

Avanti: Palette di colori Oxford Blue