20 Palette Giallo Blu: Codici Colori HEX e Consigli di Design

Una tavolozza di colori giallo-blu è uno dei modi più semplici per ottenere un contrasto istantaneo che sembra comunque amichevole. Il giallo porta calore e attenzione, mentre il blu aggiunge calma struttura e fiducia.

Di seguito sono riportate 20 idee fresche per la tavolozza gialla e blu (con codici esagonali) che puoi utilizzare per il branding, l'interfaccia utente, i poster, l'imballaggio e la stampa, oltre a rapidi suggerimenti per la leggibilità e l'accessibilità.

Perché le tavolozze gialle e blu funzionano così bene

Il giallo e il blu si bilanciano naturalmente: il giallo sembra energico e ottimista, mentre il blu sembra stabile e affidabile. Insieme, creano una chiara gerarchia visiva, perfetta per progetti che richiedono sia cordialità che struttura.

Da un punto di vista di usabilità, molte coppie giallo/blu offrono una forte separazione tra accenti e fondazioni. Ciò rende più facile evidenziare chiamate all'azione, etichette e stati importanti dell'interfaccia utente senza sopraffare la pagina.

In stampa e branding, questo duo è anche flessibile: può leggere coastal e casual, premium e nautico, oppure moderno e tech-forward a seconda delle scelte di tonalità e dei neutri che aggiungi.

20+ idee di tavolozza di colori giallo blu (con codici esagonali)

1) Porto soleggiato

esagonale:#FFD166#0B4F6C#1B98E0#F6F7EB#2E2D4D

umore:Costiera, ottimista, fresco

Migliore per:Sito web di viaggio hero banner

Costiera e ottimista, si sente come la luce del sole su un molo con acqua profonda in lontananza. Utilizzare il giallo brillante per chiamare all'azione e mantenere la navy più scura per i titoli per bloccare la leggibilità. Abbinalo a un sacco di spazio bianco e luce neutra per evitare rumore visivo. Suggerimento: riserva il blu vivido per gli stati di hover in modo che l'interfaccia sia ancora calma.

Esempio di immagine di sunlit harbor generato utilizzando media.io

Media.io

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

Provalo ora gratuitamente

2) Denim al limone

esagonale:#FFE66D#2B59C3#1E2A78#F7F3E3#3A3A3A

umore:casual, giovanile, fiducioso

Migliore per:lookbook del marchio di streetwear

Casual e giovanile, ricorda le magliette sbiadite dal sole con denim scuro e cuciture pulite. Queste combinazioni di colori giallo e blu funzionano bene per tipi audaci, distintivi e richieste di prezzo senza sentirsi troppo rumorosi. Equilibra il contrasto con sfondi bianchi e testo a carbone per un finale più editoriale. Suggerimento: mantenere il giallo su elementi più piccoli in modo che i blues profondi rimangano sotto controllo.

Esempio di immagine di lemon denim generato utilizzando media.io

3) Cartolina Riviera

esagonale:#FFC857#3A86FF#023047#E5F4FF#FFFAE1

umore:soleggiato, retrò, ventoso

Migliore per:Volantino evento estivo

Soleggiato e un po' retrò, evoca cieli da cartolina, ombrelloni da spiaggia e audaci francobolli di viaggio. Il blu chiaro funziona come sfondo arioso mentre il blu navy dà alla tua tipografia un'ancora sicura. Abbinare con semplici forme geometriche e un singolo carattere di visualizzazione per mantenerlo giocoso, non impegnato. Suggerimento: aggiungere un sottile bordo blu navy per incorniciare il volantino e migliorare la leggibilità.

Esempio di immagine di riviera cartolina generata utilizzando media.io

4) Cielo dell'ora dorata

esagonale:#FFB703#219EBC#8ECAE6#FBF8CC#2B2D42

umore:Caldo, arioso, edificante

Migliore per:Interfaccia utente dell'app benessere

Caldo e arioso, si sente come la luce del tardo pomeriggio che deriva in un cielo sereno. Utilizzare il blu pallido per i pannelli e le carte, quindi tirare il tono dorato in anelli di progresso e azioni chiave. Abbinalo a semplici icone di linea e spaziature generose per un'esperienza rilassante. Suggerimento: mantenere il testo del corpo nella tonalità a carbone per soddisfare le esigenze di contrasto su superfici blu chiaro.

Esempio di immagine di golden hour sky generato utilizzando media.io

5) agrumi nautici

esagonale:#F9C74F#003049#669BBC#FDF0D5#2F3E46

umore:Classico, marittimo, a terra

Migliore per:Progettazione del menu del ristorante

Classico e marittimo, suggerisce dettagli in ottone, grembiuli blu navy e guarnizioni di agrumi sul bar. Il neutro cremoso mantiene la sensazione premium della pagina, mentre il giallo evidenzia le offerte speciali e i titoli delle sezioni. Abbinalo a intestazioni serife e linee divisorie minime per un menu raffinato. Suggerimento: limitare il blu medio a piccole icone o proiettili in modo che la marina rimanga l'ancora principale.

Esempio di immagine di citrus nautical generato utilizzando media.io

6) Progetto di Buttercup

esagonale:#FDE74C#1D4E89#0B132B#EAF2FF#5BC0BE

umore:Energetico, tecnico, moderno

Migliore per:Pagina di destinazione SaaS

Energico e tecnico, assomiglia a biglietti adesivi luminosi su una griglia di progetto. Questa tavolozza di colori giallo-blu è ideale per chiamate di caratteristiche, icone e badge di fiducia dove si desidera chiarezza veloce. Abbinalo a bianchi freddi e ombre sottili per una sensazione guidata dal prodotto. Suggerimento: utilizzare il teal con parsimonia come accento secondario in modo che il contrasto primario rimanga coerente.

Immagine Esempio di blueprint buttercup generato utilizzando media.io

7) Surf dello zafferano

esagonale:#F6BD60#2D6CDF#00A6FB#F7EDE2#1B1B3A

umore:Sportivo, luminoso, ottimista

Migliore per:poster sportivi

Sportivo e ottimista, porta l'energia di tavole da surf, maglie e sabbia riscaldata dal sole. I blues elettrici danno movimento e impatto, mentre lo zafferano caldo mantiene il look amichevole. Abbinati a forme condensate grassetti e ad alto contrasto per una leggibilità immediata da lontano. Suggerimento: impostare lo sfondo in bianco scuro e lasciare che l'indaco più scuro gestisca tutto il testo piccolo.

Esempio di immagine di saffron surf generato utilizzando media.io

8) Inchiostro Canario

esagonale:#FFEA00#1F2A44#3E5C76#F8F9FA#0D1321

umore:Alto contrasto, Editoriale, Elegante

Migliore per:Modello di newsletter

Ad alto contrasto e editoriale, sembra un evidenziatore brillante su una pagina con inchiostro scuro. Utilizzare il tono canario per etichette, etichette di rottura e collegamenti chiave in modo che la scansione rimanga facile. Abbinare con pulito sans-serif tipo e spaziatura rigorosa per mantenere il layout nitida. Suggerimento: evitare grossi blocchi gialli; Un piccolo accento è sufficiente per indirizzare l'attenzione.

Esempio di immagine di inchiostro canario generato utilizzando media.io

9) ardesia di narciso

esagonale:#FFD500#4A6FA5#166088#E8EDF2#3A3F44

umore:Pratico, calmo, affidabile

Migliore per:deck di presentazione aziendale

Pratico e calmo, suggerisce uno spazio di lavoro sicuro con un tocco di ottimismo. I toni di ardesia mantengono grafici e tabelle facili da leggere, mentre l'accento di narciso evidenzia i punti da asporto. Abbinalo a semplici visualizzazioni dei dati e iconografia contenuta per un mazzo lucido. Suggerimento: utilizzare il grigio più scuro per la copia del corpo e riservare il blu per le intestazioni e le serie di grafici.

Esempio di immagine di ardesia di narciso generato utilizzando media.io

10) Mango Cobalto Pop

esagonale:#FFBE0B#3F37C9#4361EE#F3F0FF#1B263B

umore:Audace, giocoso, ad alto impatto

Migliore per:Annuncio di lancio del prodotto

Audace e giocoso, sembra una segnaletica al neon contro un cielo notturno. Combinazioni di colori giallo e blu come queste sono ottime per annunci di lancio in cui hai bisogno di un contrasto immediato e di un bordo moderno. Abbinare con grandi tipi, forme semplici e un sacco di spazio negativo in modo che i colori facciano la parola. Suggerimento: mantenere le ombre sottili e fare affidamento sul deep navy per la struttura.

Esempio di immagine di mango cobalt pop generato utilizzando media.io

11) sabbia calda e mare

esagonale:#F4D35E#2E86AB#0A2342#FFFBEA#7A7A7A

umore:Rilassato, naturale, invitante

Migliore per:branding boutique hotel

Rilassato e invitante, ricorda la sabbia illuminata dal sole, il vetro del mare e l'acqua profonda della sera. Il giallo caldo si legge come ospitalità e benvenuto, mentre il blu navy aggiunge un tono premium a loghi e cancelleria. Abbinalo a carta strutturata o a grani sottili per appoggiarti all'atmosfera boutique. Suggerimento: utilizzare il grigio per la copia secondaria in modo che la tavolozza rimanga morbida ed equilibrata.

Esempio di immagine di sabbia calda e mare generato utilizzando media.io

12) Autobus scolastico e Oxford

esagonale:#FFD60A#001D3D#003566#E9ECEF#212529

umore:Autoritario, sportivo, senza tempo

Migliore per:poster del club universitario

Autoritario e senza tempo, canalizza banner universitari e segnaletica nitida del campus. La forte marina rende le intestazioni ufficiali, mentre il giallo brillante migliora la visibilità per date e luoghi. Abbinate a caratteri sans-serif bloccati e una semplice griglia per un layout sicuro. Suggerimento: evitare linee sottili in giallo; Usa tratti più spessi in modo che rimanga leggibile da lontano.

Immagine esempio di school bus & oxford generato utilizzando media.io

13) Ceruleo al miele

esagonale:#FFC145#2D9CDB#1B4F72#FDF6E3#2C3E50

umore:Amichevole, luminoso, lucido

Migliore per:Pagina della categoria ecommerce

Amichevole e lucido, si sente come una pioggia di miele su una ceramica pulita con un splendore luminoso del cielo. Il cerulean è perfetto per collegamenti, filtri e stati di navigazione, mentre il tono miele attira l'attenzione sulle offerte. Abbinalo a sfondi bianchi caldi per mantenere le foto del prodotto naturali. Suggerimento: utilizzare il blu intenso per il testo del prezzo per mantenere il contrasto sulle sezioni pallide.

Esempio di immagine di cerulean al miele generato utilizzando media.io

14) Picnic pastello

esagonale:#FFF3B0#A9D6E5#2C7DA0#FAFAFA#6C757D

umore:Morbido, arioso, accessibile

Migliore per:invito baby shower

Morbido e arioso, evoca una coperta da picnic, un cielo chiaro e un dolce sole pomeridiano. Utilizzare il giallo pastello per bordi e piccoli motivi, poi appoggiarsi sul blu medio per nomi e dettagli chiave. Abbinare con delicate linee d'arte e tipografia arrotondata per un tono caldo e accogliente. Suggerimento: mantenere il grigio per le informazioni secondarie in modo che il testo principale rimanga nitido.

Esempio di immagine di pastel picnic generato utilizzando media.io

15) tecnologia solare

esagonale:#FFE45E#00509D#003F88#F5F7FF#2D3142

umore:Pulito, futuristico, sicuro di sé

Migliore per:Interfaccia utente dell'app mobile fintech

Pulito e futuristico, ricorda luminose luci di stato contro un pannello di controllo profondo. Una tavolozza di colori giallo-blu come questa si adatta agli schermi fintech dove la chiarezza e la fiducia contano. Abbinalo a bianchi freddi, divisori sottili e pesi di icona coerenti per un sistema ordinato. Suggerimento: utilizzare il giallo solo per gli stati di successo e le azioni primarie per mantenere l'interfaccia utente disciplinata.

Immagine Esempio di tecnologia solare generata utilizzando media.io

16) Porcellana di girasole

esagonale:#FFDD57#4D96FF#1E3A8A#FFFDF7#374151

umore:Fresco, ordinato, moderno-classico

Migliore per:Imballaggio utensili da cucina

Fresco e ordinato, sembra un girasole luminoso accanto alla porcellana lucida. Utilizzare il bianco e il giallo morbido per pulire lo spazio dell'imballaggio e portare il blu più forte per le etichette e i nomi dei prodotti. Abbinare con modelli minimi e una gerarchia chiara in modo da leggere premium, non occupato. Suggerimento: mantenere i codici a barre e il testo legale in grigio scuro per evitare blocchi di contrasto duri.

Immagine esempio di porcellana girasole generato utilizzando media.io

17) Marina nebbiosa

esagonale:#FEEA5A#5BC0EB#145DA0#E6F6FF#22333B

umore:Fresco, ventoso, rinfrescante

Migliore per:brochure sailing club

Fresco e ventoso, suggerisce nebbia mattutina presto sui moli e acqua limpida oltre. Il blu pallido è ideale per i pannelli di brochure di grandi dimensioni, mentre il blu più intenso mantiene leggibili titoli e didascalie. Abbinalo a un sacco di spazi bianchi e semplici icone nautiche per una lettura facile. Suggerimento: utilizzare il giallo come indizio di navigazione per le sezioni e i numeri di pagina.

Esempio di immagine di misty marina generato utilizzando media.io

18) Punzone primario retrò

esagonale:#FFD23F#2E55FF#0A1F44#FFFCF2#E76F51

umore:retro, punchy, Giocoso

Migliore per:poster del festival musicale

Retro e punchy, sembra poster serigrafati e neon notturno. Le combinazioni di colori giallo e blu brillano qui quando si desidera una gerarchia forte e una rapida indicazione delle fasi e dei tempi. Abbinare con tipi grossi, trame a mezzo tono e un insieme limitato di forme per mantenerlo coeso. Suggerimento: utilizzare l'arancio come terzo accento solo per i headliner in modo che rimanga speciale.

Immagine Esempio di retro primary punch generato utilizzando media.io

19) raggio di sole dell'ora blu

esagonale:#FFCC33#1D3557#457B9D#A8DADC#F1FAEE

umore:Cinematografico, calmo, ponderato

Migliore per:progettazione copertina libro

Cinematografico e calmo, evoca il momento subito dopo il tramonto in cui un ultimo raggio caldo taglia l'aria fresca. Usa il blu intenso per il titolo e il nome dell'autore, quindi aggiungi il giallo come piccolo elemento focale o emblema. Abbinare con morbidi gradienti e illustrazione sobria per un tocco letterario. Suggerimento: mantenere la menta leggera per lo spazio di sfondo in modo che la copertura non sembri pesante.

Esempio di immagine di raggio solare dell'ora blu generato utilizzando media.io

20) Costiera minima

esagonale:#F7D154#0F4C81#3B82F6#FFFFFF#111827

umore:Minimale, moderno, luminoso

Migliore per:logo di avvio e kit di marca

Minimale e moderno, si sente come un pulito studio bianco con un tagliente spruzzo di sole e mare. Il blu navy e quasi nero forniscono una solida base per i loghi, mentre il blu più brillante può alimentare i collegamenti e le risorse sociali. Abbinate con segni geometrici e un sacco di spazio libero per un'identità sicura e scalabile. Suggerimento: prova il giallo in piccole dimensioni per assicurarti che rimanga distinto dal bianco.

Esempio di immagine di coastal minimal generato utilizzando media.io

Quali colori vanno bene con il giallo blu?

I neutri sono il terzo colore più semplice: bianco, crema e grigio chiaro mantengono giallo e blu puliti, mentre il carbone o quasi nero migliora il contrasto del testo su blu pallido e giallo caldo.

Per un look più ricco, aggiungi blu navy o indaco come colore "struttura", quindi usa il giallo come accento. Questo approccio è comune nella progettazione dell'interfaccia utente perché mantiene i CTA luminosi senza rendere l'intera interfaccia rumorosa.

Se vuoi più personalità, piccoli colpi di corallo/arancio, azzurro o menta possono funzionare bene-basta tenerli limitati in modo che la relazione giallo-blu rimanga la stella.

Come utilizzare una tavolozza di colori giallo blu nei disegni reali

Inizia assegnando i ruoli: scegli uno blu come base principale (intestazioni, navigazione, testo del corpo), quindi riserva il giallo per i momenti di attenzione (pulsanti, badge, numeri chiave). Ciò impedisce al giallo di sopraffare il layout.

Per l'accessibilità, evitare il testo giallo su sfondi bianchi o chiari. Invece, utilizzare il giallo come sfondo o evidenziare con testo scuro in alto e testare le coppie di tasti per assicurarsi che il piccolo testo soddisfi le linee guida di contrasto.

Nella stampa, guarda la saturazione: i gialli brillanti possono cambiare a seconda della carta e dell'inchiostro. Usa un blu navy leggermente più profondo per la tipologia e considera i bianchi caldi per evitare che la tavolozza si senta fredda.

Crea visuali della tavolozza gialla e blu con l'intelligenza artificiale

Se stai presentando un concetto di marchio o costruendo un moodboard, la generazione di visuali rapidi ti aiuta a convalidare la tavolozza prima di impegnarti in un sistema di progettazione completo. È anche un modo semplice per testare come il giallo si legge a piccole dimensioni e come il blu si comporta su grandi sfondi.

Con Media.io puoi trasformare un'idea di tavolozza in poster, modelli di interfaccia utente, packaging o banner di eroi in pochi minuti, quindi iterare su stile, illuminazione e layout mantenendo la stessa direzione dei colori.

Successivo: Palette Colori Viola Verde