20 palette di colori neobrutaliste con codici hex (pronte da copiare e incollare)

Diciamocelo: scegliere i colori per un design neobrutalista può risultare disarmante.

Sai di avere bisogno di colori decisi e ad alto contrasto. Ma quali? Quanti? E quali si abbinano tra loro senza sembrare un lavoretto d'asilo finito male?

Ho costruito decine di siti neobrutalisti, ed è nella scelta dei colori che la maggior parte delle persone si blocca. Perciò ti consegno 20 palette pronte all'uso, ognuna con i suoi codici hex esatti, le sue indicazioni d'uso e il suo contesto reale.

Niente teoria. Niente lezioni sul cerchio cromatico. Copia i codici hex e mettiti a costruire.

Entriamo nel vivo.

Come usare queste palette

Prima di arrivare ai colori, ecco come ragionare sui sistemi cromatici neobrutalisti:

Struttura di una palette neobrutalista:

• Base: nero o molto scuro (per bordi, testo, ombre)
• Sfondo: bianco o molto chiaro (per schede, sfondo principale)
• Primario: il tuo colore d'accento principale (CTA, intestazioni, enfasi)
• Secondario: accento di supporto (di solito 1-2 colori aggiuntivi)
• Accenti: tocchi di colore extra (facoltativi, con parsimonia)

Principi chiave:

1. L'alto contrasto è obbligatorio - il nero e il bianco devono ancorare la tua palette
2. Saturazione più che sottigliezza - niente pastelli, niente toni smorzati (tranne che negli sfondi)
3. Limita i colori d'accento - da 1 a 3 accenti vivaci al massimo
4. Non temere l'audacia - se sembra troppo prudente, non è abbastanza brutale

E ora, passiamo alle palette.

Palette neobrutaliste classiche

Sono le combinazioni senza tempo che definiscono l'estetica.

1. Electric Yellow

La palette neobrutalista originale. Se ne impari una sola, che sia questa.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #FFDB33
--primary-hover: #FFCC00
--border: #000000
--card: #FFFFFF

Quando usarla:

• Prodotti tech e SaaS
• Qualsiasi cosa abbia bisogno di attenzione ed energia
• Il tuo primo progetto neobrutalista

Perché funziona: Il giallo su bianco offre la massima visibilità. I bordi e il testo neri danno la struttura. Se è la palette predefinita di Neobrutalism c'è un motivo: è quasi impossibile da rovinare.

Esempio d'uso:

Copia// Primary CTA button
<button className="bg-[#FFDB33] text-[#000000] border-4 border-[#000000]
                   shadow-[6px_6px_0_0_#000000] px-8 py-4 font-bold">
  Get Started
</button>

Esempio reale: Gumroad usa una variazione di questa palette in tutta la sua interfaccia.

2. Hot Pink Punch

Per brand con carattere ed energia.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #00F0FF
--border: #000000
--card: #FFFFFF
--accent: #FFDB33

Quando usarla:

• Agenzie creative
• Brand di moda e streetwear
• Prodotti rivolti ai giovani
• Qualsiasi cosa anticorporate

Perché funziona: Il rosa acceso esige attenzione. Abbinato al ciano crea un'aria retrofuturista. L'accento giallo aggiunge una terza dimensione senza appesantire.

Strategia di color blocking:

Copia// Three-color feature grid
<div className="grid grid-cols-3 gap-6">
  <div className="bg-[#FF006E] border-4 border-[#000000] p-8">
    <h3 className="text-white">Feature 1</h3>
  </div>
  <div className="bg-[#00F0FF] border-4 border-[#000000] p-8">
    <h3 className="text-black">Feature 2</h3>
  </div>
  <div className="bg-[#FFDB33] border-4 border-[#000000] p-8">
    <h3 className="text-black">Feature 3</h3>
  </div>
</div>

3. Cyber Lime

Massima visibilità con un tocco digitale.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #AAFC3D
--primary-hover: #97F819
--secondary: #FF4FD8
--border: #000000
--accent: #00F0FF

Quando usarla:

• Gaming ed esport
• Startup tech
• Strumenti per sviluppatori
• Qualsiasi cosa futuristica o digital-first

Perché funziona: Il verde lime grida «digitale» mentre il rosa magenta dà il contrasto. Questa palette sembra una finestra di terminale incrociata con un poster di un rave.

Esempio:

Copia// Hero section with lime background
<section className="bg-[#AAFC3D] min-h-screen">
  <h1 className="text-8xl font-black text-[#000000]">
    LEVEL UP
  </h1>
  <button className="bg-[#FF4FD8] border-4 border-[#000000]
                     shadow-[8px_8px_0_0_#000000]">
    Start Playing
  </button>
</section>

4. Brutal Monochrome

Quando vuoi il neobrutalismo senza l'arcobaleno.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #000000
--secondary: #E5E5E5
--border: #000000
--card: #FFFFFF
--accent: #666666

Quando usarla:

• Neobrutalismo minimalista (sì, esiste)
• Portfolio di architettura e design
• Quando il colore distrarrebbe dai contenuti
• Contesti professionali che hanno bisogno di carattere

Perché funziona: Dimostra che il neobrutalismo non è una questione di colore, ma di struttura. Bordi spessi, ombre dure e tipografia decisa reggono l'estetica senza una sola sfumatura.

Consiglio da pro: Aggiungi un accento sottile per gli stati di hover:

Copia--hover-accent: #FFDB33  /* Yellow appears only on interaction */

Palette vivaci ed energiche

Per i brand che non sussurrano.

5. Sunset Riot

Il calore incontra la ribellione.

Copia--background: #FCFFE7
--foreground: #000000
--primary: #EA435F
--primary-hover: #D00000
--secondary: #FFDA5C
--border: #000000
--accent: #CEEBFC
--card: #FFFFFF

Quando usarla:

• Brand di cibo e bevande
• Siti di eventi e festival
• Prodotti lifestyle e wellness
• Qualsiasi cosa debba risultare calda e accogliente

Perché funziona: Il rosso e il giallo generano energia e appetito (letteralmente: sono colori del cibo). L'accento azzurro rinfresca quel tanto che basta.

Strategia dello sfondo: Lo sfondo crema (#FCFFE7) è più morbido del bianco puro e fa risaltare i rossi e i gialli senza risultare aggressivo.

6. Lavender Dream

Il neobrutalismo incontra il fantasioso.

Copia--background: #F9F5F2
--foreground: #000000
--primary: #C4A1FF
--primary-hover: #9678FF
--secondary: #E7F193
--accent: #FE91E9
--border: #000000
--card: #FFFFFF

Quando usarla:

• Portfolio creativi
• Progetti d'arte e illustrazione
• Bellezza e cosmetica
• Brand Gen Z che cercano un tocco spensierato

Perché funziona: Il viola lavanda è audace ma non aggressivo. Abbinato al giallo lime e al rosa magenta crea una palette giocosa, quasi da caramella, che mantiene comunque la struttura neobrutalista.

Esempio:

Copia// Testimonial card with lavender accent
<div className="bg-[#C4A1FF] border-4 border-[#000000] shadow-[6px_6px_0_0_#000000] p-8">
  <p className="text-black font-bold text-lg">
    "This product changed my workflow completely!"
  </p>
  <div className="bg-[#E7F193] border-2 border-[#000000] inline-block px-4 py-2 mt-4">
    <span className="font-bold text-black">Sarah K., Designer</span>
  </div>
</div>

7. Orange Burst

Energia alta, calore massimo.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #F07200
--primary-hover: #FF8011
--secondary: #EF8C27
--accent: #FF6B6B
--border: #000000
--muted: #FFE1C7

Quando usarla:

• Brand di sport e fitness
• Campagne estive
• Prodotti incentrati su energia e azione
• Pagine cariche di call-to-action

Perché funziona: L'arancione è sottoutilizzato nel web design, il che lo rende distintivo all'istante. Più sfumature di arancione creano profondità senza bisogno di altri colori.

8. Forest Fresh

Neobrutalismo terroso, chi l'avrebbe detto?

Copia--background: #FFFFFF
--foreground: #000000
--primary: #599D77
--primary-hover: #39654C
--secondary: #A3D9B1
--accent: #FFE75A
--border: #000000
--card: #F9F5F2

Quando usarla:

• Brand sostenibili ed eco
• Salute e benessere
• Prodotti outdoor e legati alla natura
• Quando ti serve un neobrutalismo che sembri coi piedi per terra

Perché funziona: Il verde non deve per forza essere morbido. Questa palette usa verdi saturi ad alto contrasto, mantenendo l'estetica brutale pur risultando organica.

Particolarità: Lo sfondo crema delle schede (#F9F5F2) aggiunge un calore che il bianco puro non darebbe.

Palette sperimentali e audaci

Per i designer che vogliono spingersi oltre i limiti.

9. Neon Midnight

Il neobrutalismo in modalità scura al suo meglio.

Copia--background: #0F0F0F
--foreground: #F5F5F5
--primary: #00FF88
--secondary: #FF0066
--accent: #00D4FF
--border: #F5F5F5
--card: #1A1A1A

Quando usarla:

• Piattaforme di gaming
• Strumenti di sviluppo e app di programmazione
• Esperienze in modalità notte
• Estetiche cyberpunk

Perché funziona: I colori neon su sfondi scuri creano quell'aria da terminale/hacker. I bordi bianchi al posto dei neri ribaltano le carte mantenendo il contrasto.

Consiglio d'implementazione:

Copia// Dark background with neon accents
<div className="bg-[#0F0F0F] min-h-screen p-8">
  <h1 className="text-[#00FF88] text-7xl font-black
                 [-webkit-text-stroke:3px_#F5F5F5]">
    GAME ON
  </h1>
  <button className="bg-[#FF0066] text-[#F5F5F5] border-4 border-[#F5F5F5]
                     shadow-[6px_6px_0_0_#00D4FF]">
    Play Now
  </button>
</div>

10. Bubblegum Chaos

Il massimalismo incontra il neobrutalismo.

Copia--background: #FFF5F8
--foreground: #000000
--primary: #FF3FE0
--secondary: #00E5FF
--accent-1: #FFE600
--accent-2: #00FF94
--border: #000000
--card: #FFFFFF

Quando usarla:

• Musica e intrattenimento
• Brand di giocattoli e prodotti per bambini
• Campagne di marketing di breve durata
• Quando la sottigliezza sarebbe un errore

Perché funziona: Quattro colori vivaci sembrano un caos, ma i bordi neri e le schede bianche lo contengono. È la filosofia «più è più» del neobrutalismo portata al suo estremo logico.

Attenzione: Questa palette è RUMOROSA. Usala solo se il tuo brand regge un'energia massima.

11. Electric Violet

Il potere del viola con un tocco moderno.

Copia--background: #F5F5F5
--foreground: #1A1A1A
--primary: #7B6DF5
--primary-hover: #5F4FE6
--secondary: #FED13B
--border: #3A3A3A
--card: #FFFFFF
--muted: #CFCCEA

Quando usarla:

• Prodotti SaaS
• App fintech
• Software creativo
• Strumenti di produttività moderni

Perché funziona: Il viola risulta premium senza essere pretenzioso. Il giallo secondario dà calore. Questa palette si muove alla perfezione tra il professionale e il giocoso.

Variante in modalità scura:

Copia--background: #0F0F12
--foreground: #F5F5F5
--primary: #7B6DF5
--card: #1A1A1D
--border: #2E2E32

12. Blood Orange

Aggressiva e calda.

Copia--background: #FFF8F0
--foreground: #000000
--primary: #FF4500
--secondary: #000000
--accent: #FFD700
--border: #000000
--card: #FFFFFF

Quando usarla:

• Squadre sportive
• Energy drink e brand di cibo audaci
• Prodotti orientati all'azione
• Campagne di Halloween o autunnali

Perché funziona: Il rosso aranciato è energico e appetitoso. L'accento dorato aggiunge un tocco premium. Il nero secondario ancora quel calore.

Palette brutali e sofisticate

Il neobrutalismo può essere raffinato. Eccone la prova.

13. Teal & Coral

Colori complementari fatti bene.

Copia--background: #FAFAFA
--foreground: #000000
--primary: #00BFA6
--secondary: #FF6B6B
--accent: #FFE66D
--border: #000000
--card: #FFFFFF

Quando usarla:

• App di salute e benessere
• Piattaforme educative
• Brand lifestyle
• Quando ti serve equilibrio tra l'energico e il rilassante

Perché funziona: Il verde acqua e il corallo sono complementari e creano un interesse visivo naturale. L'accento giallo aggiunge una terza dimensione. Questa palette risulta fresca e moderna.

14. Indigo & Gold

Brutalismo di lusso.

Copia--background: #F8F9FA
--foreground: #000000
--primary: #4B0082
--secondary: #FFD700
--accent: #FFFFFF
--border: #000000
--card: #FFFFFF

Quando usarla:

• Prodotti premium
• Moda di fascia alta
• Membership esclusive
• Quando il neobrutalismo deve risultare costoso

Perché funziona: L'indaco profondo trasmette qualità ed esclusività. L'oro aggiunge lusso. Insieme creano un'estetica neobrutalista premium che si distingue dai soliti colori primari.

15. Mint & Charcoal

Fresca e composta.

Copia--background: #FFFFFF
--foreground: #2D3748
--primary: #48BB78
--secondary: #4A5568
--accent: #F6E05E
--border: #2D3748
--card: #F7FAFC

Quando usarla:

• Finanza e banca (edizione neobrutalista)
• Servizi professionali
• SaaS B2B
• Quando la fiducia conta ma il noioso non è un'opzione

Perché funziona: Il verde menta è audace ma non aggressivo. Il grigio antracite al posto del nero puro ammorbidisce un po' la durezza mantenendo il contrasto.

Sperimentali e all'ultima moda

Queste sono per i coraggiosi.

16. Dopamine Overload

Tutti i colori. Tutti insieme.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #FF006E
--secondary: #8338EC
--accent-1: #FFBE0B
--accent-2: #00F5FF
--accent-3: #3A86FF
--border: #000000
--card: #FFFFFF

Quando usarla:

• Festival musicali
• App e giochi per bambini
• Colpi di scena di marketing
• Quando il «troppo» è proprio l'obiettivo

Perché funziona (a malapena): Questa palette rompe di proposito la regola dei «3 colori al massimo». I bordi neri e gli sfondi bianchi contengono il caos. Usala con parsimonia.

Consiglio da pro: Assegna a ogni colore uno scopo preciso:

Copia// Each section gets its own accent
<section className="bg-[#FF006E]">Hero</section>
<section className="bg-[#8338EC]">Features</section>
<section className="bg-[#FFBE0B]">Pricing</section>
<section className="bg-[#00F5FF]">Testimonials</section>

17. Acid Wash

La nostalgia degli anni '90 incontra il brutalismo moderno.

Copia--background: #E0F7FF
--foreground: #000000
--primary: #FF00FF
--secondary: #00FFFF
--accent: #FFFF00
--border: #000000
--card: #FFFFFF

Quando usarla:

• Gaming retro
• Estetiche vaporwave
• Brand nostalgici
• Qualsiasi cosa datata con ironia

Perché funziona: Il magenta, il ciano e il giallo puri evocano la grafica dei computer anni '90. Lo sfondo azzurro ammorbidisce l'intensità.

18. Rust & Cream

Neobrutalismo industriale.

Copia--background: #FFF9F0
--foreground: #2B1F1F
--primary: #C1502E
--secondary: #686463
--accent: #E8C547
--border: #2B1F1F
--card: #FFFFFF

Quando usarla:

• Edilizia e industria
• Brand artigianali e fatti a mano
• Caffè e cibo (atmosfera terrosa)
• Quando il neobrutalismo ha bisogno di calore e texture

Perché funziona: L'arancione ruggine e il crema creano una sensazione terrosa e organica. Il marrone scuro al posto del nero aggiunge calore mantenendo il contrasto.

19. Cyber Grape

Viola, ma in versione digitale.

Copia--background: #0D0221
--foreground: #F0F0F0
--primary: #8B5CF6
--secondary: #EC4899
--accent: #10B981
--border: #F0F0F0
--card: #1A0B2E

Quando usarla:

• Criptovalute e blockchain
• Prodotti di IA e machine learning
• SaaS futuristici
• Esperienze in modalità scura

Perché funziona: Uno sfondo viola profondo con accenti vivaci crea una sensazione high-tech. I bordi chiari su sfondo scuro ribaltano il neobrutalismo tradizionale mantenendo la struttura.

20. Sunshine & Shadow

Contrasto massimo, colori minimi.

Copia--background: #FFFFFF
--foreground: #000000
--primary: #FFA500
--secondary: #000000
--accent: #FFFFFF
--border: #000000
--card: #FFF8DC

Quando usarla:

• Quando ti serve una semplicità brutale
• Siti con molta lettura
• Blog e pubblicazioni
• Quando due colori (più nero e bianco) bastano

Perché funziona: L'arancione è l'unico colore. Il nero e il bianco fanno il lavoro pesante. Le schede crema aggiungono un calore sottile. Questa palette dimostra che meno può essere di più, anche nel neobrutalismo.

Come implementare queste palette

Scegli la tua palette preferita e mettila nel tuo CSS:

Per Tailwind CSS v4

Aggiungi al tuo styles.css:

Copia@theme {
  --color-background: #FFFFFF;
  --color-foreground: #000000;
  --color-primary: #FFDB33;
  --color-secondary: #000000;
  --color-border: #000000;
  --color-card: #FFFFFF;
}
 
:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #FFDB33;
  --border: #000000;
}

Poi usala nel tuo markup:

Copia<button className="bg-primary text-foreground border-4 border-border">
  Click Me
</button>

Per il CSS classico

Definisci le variabili CSS:

Copia:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #FFDB33;
  --border: #000000;
}
 
.btn-primary {
  background-color: var(--primary);
  color: var(--foreground);
  border: 4px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--border);
}

Per React/Styled Components

Copiaexport const theme = {
  colors: {
    background: '#FFFFFF',
    foreground: '#000000',
    primary: '#FFDB33',
    border: '#000000',
  },
  shadows: {
    brutal: '6px 6px 0 0 #000000',
  },
}

Come scegliere la palette giusta per il tuo progetto

Ancora in difficoltà? Usa questo albero decisionale:

Se stai costruendo un SaaS o un prodotto tech: → Parti con Electric Yellow (#1) o Electric Violet (#11)

Se ti rivolgi a creativi o designer: → Prova Lavender Dream (#6) o Hot Pink Punch (#2)

Se ti serve qualcosa di professionale ma audace: → Usa Mint & Charcoal (#15) o Teal & Coral (#13)

Se il tuo brand è pieno di energia: → Punta su Cyber Lime (#3) o Orange Burst (#7)

Se costruisci in modalità scura: → Parti con Neon Midnight (#9) o Cyber Grape (#19)

Se vuoi andare sul sicuro: → Brutal Monochrome (#4) o Sunshine & Shadow (#20)

Se vuoi essere diverso: → Bubblegum Chaos (#10) o Dopamine Overload (#16)

Combinazioni di colori da evitare

Non tutti i colori audaci funzionano nel neobrutalismo. Ecco alcune combinazioni da lasciar perdere:

1. Pastelli + bordi neri Il rosa tenue (#FFB6C1) e il lavanda (#E6E6FA) non hanno saturazione a sufficienza. Vanno in conflitto con la struttura rigida.

2. Troppi primari Rosso + blu + giallo + verde + viola = caos visivo. Attieniti a 1 primario e 1-2 secondari al massimo.

3. Accenti a basso contrasto Giallo chiaro (#FFFFE0) su sfondi bianchi. Grigio (#808080) su bianco. Se strizzi gli occhi e non lo vedi, non usarlo.

4. Marroni spenti Il marrone (#8B4513) può funzionare (vedi Rust & Cream), ma la maggior parte dei marroni risulta troppo organica per l'energia geometrica del neobrutalismo.

5. Più neon insieme Rosa neon + verde neon + blu neon = emicrania. Scegli UN solo neon e ancoralo con nero e bianco.

Consigli da pro per usare queste palette

1. Parti dal monocromo, aggiungi colore con strategia

Costruisci prima il tuo layout in bianco e nero. Poi aggiungi colore solo dove ti serve enfasi:

• le CTA prendono il colore primario
• le sezioni importanti prendono il secondario
• tutto il resto resta neutro

2. Applica la regola 60-30-10

Anche nel neobrutalismo le proporzioni contano:

• 60% neutro (bianco, nero, grigi)
• 30% colore primario
• 10% secondario/accento

3. Testa l'accessibilità

Fai passare la tua palette in un verificatore di contrasto. Testo nero su giallo? Di solito passa. Testo rosa su bianco? Spesso no.

Strumento: usa il WebAIM Contrast Checker

4. Crea gli stati di hover

Riduci la saturazione o scurisci il colore primario per l'hover:

Copia--primary: #FFDB33;
--primary-hover: #FFCC00; /* Slightly darker */

5. Non dimenticare la modalità scura

La maggior parte di queste palette ha varianti in modalità scura. Basta invertire gli sfondi e regolare la luminosità:

Copia/* Light mode */
--background: #FFFFFF;
--foreground: #000000;
--primary: #FFDB33;
 
/* Dark mode */
.dark {
  --background: #1A1A1A;
  --foreground: #F5F5F5;
  --primary: #FFDB33; /* Often stays the same */
}

Scarica tutte le palette

Vuoi tutte le 20 palette in un formato pronto all'uso?

Config Tailwind: Tutte le 20 palette come configurazioni di tema Tailwind → Scarica JSON

Variabili CSS: Tutte le 20 palette come set di variabili CSS → Scarica CSS

Figma: Tutte le 20 palette come stili di colore Figma → Ottieni il file Figma

Riflessioni finali

Il colore è soggettivo, ma il colore neobrutalista non è complicato:

La formula:

1. Parti dal nero e dal bianco (non negoziabile)
2. Scegli UN colore primario audace (giallo, rosa, lime, arancione, viola)
3. Aggiungi UN accento secondario se serve (facoltativo)
4. Usalo con parsimonia: lascia che nero e bianco facciano il lavoro

Le palette di questa guida coprono tutto, dalle opzioni di partenza sicure (Electric Yellow, Brutal Monochrome) alle follie sperimentali (Bubblegum Chaos, Dopamine Overload).

Parti da una. Usala. Regolala. Falla tua.

E ricorda: la migliore palette neobrutalista è quella su cui ti impegni davvero. Le mezze misure non funzionano in questa estetica. O alla grande o niente.

Ora scegli i tuoi colori e costruisci qualcosa di impossibile da ignorare. 🎨

Usi Neobrutalism? Queste palette sono già integrate nella libreria. Basta cambiare il tema e il gioco è fatto → neobrutalism.com

Ne vuoi di più? Lascia un commento con la tua palette preferita o condividi le tue combinazioni di colori brutali.