20 palettes de couleurs néobrutalistes avec codes hexadécimaux (prêtes à copier-coller)

Soyons honnêtes : choisir les couleurs d’un design néobrutaliste peut vite tourner au casse-tête.

Vous savez qu’il vous faut des couleurs affirmées et très contrastées. Mais lesquelles ? Combien ? Et lesquelles s’accordent sans virer au dessin d’enfant de maternelle raté ?

J’ai construit des dizaines de sites néobrutalistes, et c’est sur le choix des couleurs que la plupart des gens calent. Alors je vous livre 20 palettes prêtes à l’emploi — chacune avec ses codes hexadécimaux exacts, ses règles d’usage et son contexte concret.

Pas de théorie. Pas de laïus sur le cercle chromatique. Juste des codes hexadécimaux à copier pour vous lancer.

Entrons dans le vif du sujet.

Comment utiliser ces palettes

Avant de passer aux couleurs, voici comment penser un système chromatique néobrutaliste :

Structure d’une palette néobrutaliste :

• Base : noir ou très sombre (pour les bordures, le texte, les ombres)
• Arrière-plan : blanc ou très clair (pour les cartes, le fond principal)
• Primaire : votre couleur d’accent principale (CTA, en-têtes, mise en valeur)
• Secondaire : accent de soutien (en général 1 à 2 couleurs de plus)
• Accents : touches de couleur supplémentaires (facultatif, à doser)

Principes clés :

1. Le contraste élevé est obligatoire – le noir et le blanc doivent ancrer votre palette
2. La saturation plutôt que la nuance – pas de pastels, pas de teintes ternes (sauf pour les arrière-plans)
3. Limitez les couleurs d’accent – 1 à 3 accents vifs au maximum
4. N’ayez pas peur d’oser – si ça paraît trop sage, c’est que ce n’est pas assez brutal

Passons maintenant aux palettes.

Palettes néobrutalistes classiques

Ce sont les combinaisons intemporelles qui définissent l’esthétique.

1. Electric Yellow

La palette néobrutaliste originelle. Si vous n’en retenez qu’une, retenez celle-ci.

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

Quand l’utiliser :

• Produits tech et SaaS
• Tout ce qui doit capter l’attention et dégager de l’énergie
• Votre tout premier projet néobrutaliste

Pourquoi elle fonctionne : Le jaune sur blanc offre une visibilité maximale. Les bordures et le texte noirs apportent la structure. Si c’est la palette par défaut de Neobrutalism, ce n’est pas un hasard : elle est quasi impossible à rater.

Exemple d’usage :

Copier// 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>

Exemple concret : Gumroad utilise une variante de cette palette dans toute son interface.

2. Hot Pink Punch

Pour les marques qui ont du caractère et de l’énergie.

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

Quand l’utiliser :

• Agences créatives
• Marques de mode et de streetwear
• Produits pour les jeunes
• Tout ce qui se veut anti-corporate

Pourquoi elle fonctionne : Le rose vif impose l’attention. Associé au cyan, il crée une ambiance rétro-futuriste. L’accent jaune ajoute une troisième dimension sans en faire trop.

Stratégie de color blocking :

Copier// 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

Une visibilité maximale, avec une pointe de numérique.

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

Quand l’utiliser :

• Gaming et esport
• Startups tech
• Outils pour développeurs
• Tout ce qui se veut futuriste ou digital-first

Pourquoi elle fonctionne : Le vert lime crie « numérique » tandis que le rose magenta apporte le contraste. Cette palette évoque une fenêtre de terminal croisée avec une affiche de rave.

Exemple :

Copier// 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

Quand vous voulez du néobrutalisme sans l’arc-en-ciel.

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

Quand l’utiliser :

• Néobrutalisme minimaliste (oui, ça existe)
• Portfolios d’architecture et de design
• Quand la couleur détournerait du contenu
• Contextes professionnels qui ont besoin de mordant

Pourquoi elle fonctionne : Elle prouve que le néobrutalisme n’est pas une affaire de couleur, mais de structure. Bordures épaisses, ombres franches et typographie affirmée portent l’esthétique sans la moindre teinte.

Astuce de pro : Ajoutez un accent discret pour les états de survol :

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

Palettes vives et énergiques

Pour les marques qui ne chuchotent pas.

5. Sunset Riot

La chaleur rencontre la rébellion.

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

Quand l’utiliser :

• Marques agroalimentaires et de boissons
• Sites d’événements et festivals
• Produits lifestyle et bien-être
• Tout ce qui doit paraître chaleureux et accueillant

Pourquoi elle fonctionne : Le rouge et le jaune créent de l’énergie et de l’appétit (au sens propre — ce sont des couleurs alimentaires). L’accent bleu clair rafraîchit juste ce qu’il faut.

Stratégie d’arrière-plan : Le fond crème (#FCFFE7) est plus doux que le blanc pur, ce qui fait ressortir les rouges et les jaunes sans les rendre agressifs.

6. Lavender Dream

Le néobrutalisme rencontre la fantaisie.

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

Quand l’utiliser :

• Portfolios créatifs
• Projets d’art et d’illustration
• Beauté et cosmétiques
• Marques génération Z en quête de légèreté

Pourquoi elle fonctionne : Le violet lavande est affirmé sans être agressif. Associé au jaune lime et au rose magenta, il compose une palette ludique, presque acidulée, tout en gardant la structure néobrutaliste.

Exemple :

Copier// 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

Énergie débordante, chaleur maximale.

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

Quand l’utiliser :

• Marques de sport et de fitness
• Campagnes estivales
• Produits axés sur l’énergie et l’action
• Pages truffées d’appels à l’action

Pourquoi elle fonctionne : L’orange est sous-exploité dans le web design, ce qui le rend immédiatement distinctif. Plusieurs nuances d’orange créent de la profondeur sans nécessiter d’autres couleurs.

8. Forest Fresh

Un néobrutalisme terreux — qui l’eût cru ?

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

Quand l’utiliser :

• Marques durables et éco-responsables
• Santé et bien-être
• Produits liés au plein air et à la nature
• Quand vous voulez un néobrutalisme qui paraît ancré

Pourquoi elle fonctionne : Le vert n’a pas à être doux. Cette palette mise sur des verts saturés à fort contraste, préservant l’esthétique brutale tout en donnant une impression organique.

Particularité : Le fond de carte crème (#F9F5F2) apporte une chaleur que le blanc pur n’offrirait pas.

Palettes expérimentales et audacieuses

Pour les designers qui veulent repousser les limites.

9. Neon Midnight

Le néobrutalisme en mode sombre, à son sommet.

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

Quand l’utiliser :

• Plateformes de gaming
• Outils de dev et applis de code
• Expériences en mode nuit
• Esthétiques cyberpunk

Pourquoi elle fonctionne : Les couleurs néon sur fond sombre créent cette ambiance terminal/hacker. Des bordures blanches au lieu de noires inversent la logique tout en préservant le contraste.

Astuce d’implémentation :

Copier// 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

Le maximalisme rencontre le néobrutalisme.

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

Quand l’utiliser :

• Musique et divertissement
• Marques de jouets et produits pour enfants
• Campagnes marketing à durée de vie courte
• Quand la sobriété serait une erreur

Pourquoi elle fonctionne : Quatre couleurs vives, ça sonne comme le chaos, mais les bordures noires et les cartes blanches le contiennent. C’est la philosophie « more is more » du néobrutalisme poussée à son extrême logique.

Attention : Cette palette est BRUYANTE. Ne l’utilisez que si votre marque assume une énergie maximale.

11. Electric Violet

La puissance du violet, avec une allure moderne.

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

Quand l’utiliser :

• Produits SaaS
• Applis fintech
• Logiciels créatifs
• Outils de productivité modernes

Pourquoi elle fonctionne : Le violet paraît premium sans être prétentieux. Le jaune en secondaire apporte de la chaleur. Cette palette navigue parfaitement entre le professionnel et le ludique.

Variante mode sombre :

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

12. Blood Orange

Agressive et chaleureuse.

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

Quand l’utiliser :

• Équipes sportives
• Boissons énergisantes et marques agroalimentaires audacieuses
• Produits orientés action
• Campagnes d’Halloween ou d’automne

Pourquoi elle fonctionne : Le rouge-orangé est énergique et appétissant. L’accent doré ajoute une touche premium. Le noir en secondaire ancre cette chaleur.

Palettes brutales et raffinées

Le néobrutalisme peut être élégant. La preuve.

13. Teal & Coral

Des couleurs complémentaires bien maîtrisées.

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

Quand l’utiliser :

• Applis de santé et de bien-être
• Plateformes éducatives
• Marques lifestyle
• Quand vous cherchez l’équilibre entre l’énergique et l’apaisant

Pourquoi elle fonctionne : Le sarcelle et le corail sont complémentaires, ce qui crée un intérêt visuel naturel. L’accent jaune ajoute une troisième dimension. Cette palette paraît fraîche et moderne.

14. Indigo & Gold

Le brutalisme luxe.

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

Quand l’utiliser :

• Produits haut de gamme
• Mode de luxe
• Adhésions exclusives
• Quand le néobrutalisme doit respirer le premium

Pourquoi elle fonctionne : L’indigo profond signale la qualité et l’exclusivité. L’or apporte le luxe. Ensemble, ils composent une esthétique néobrutaliste premium qui tranche avec les couleurs primaires habituelles.

15. Mint & Charcoal

Frais et posé.

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

Quand l’utiliser :

• Finance et banque (version néobrutaliste)
• Services professionnels
• SaaS B2B
• Quand la confiance compte, mais que l’ennui n’est pas une option

Pourquoi elle fonctionne : Le vert menthe est affirmé sans être agressif. L’anthracite à la place du noir pur adoucit légèrement la dureté tout en préservant le contraste.

Palettes expérimentales et dans l’air du temps

Celles-ci sont réservées aux plus téméraires.

16. Dopamine Overload

Toutes les couleurs. En même temps.

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

Quand l’utiliser :

• Festivals de musique
• Applis et jeux pour enfants
• Coups d’éclat marketing
• Quand le « trop » est justement le but

Pourquoi elle fonctionne (tout juste) : Cette palette enfreint délibérément la règle des « 3 couleurs max ». Les bordures noires et les fonds blancs contiennent le chaos. À doser avec parcimonie.

Astuce de pro : Attribuez à chaque couleur un rôle précis :

Copier// 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 nostalgie des années 90 rencontre le brutalisme moderne.

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

Quand l’utiliser :

• Gaming rétro
• Esthétiques vaporwave
• Marques nostalgiques
• Tout ce qui se veut daté au second degré

Pourquoi elle fonctionne : Le magenta, le cyan et le jaune purs évoquent les graphismes informatiques des années 90. Le fond bleu clair adoucit l’intensité.

18. Rust & Cream

Le néobrutalisme industriel.

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

Quand l’utiliser :

• Construction et industrie
• Marques artisanales et faites main
• Café et alimentation (ambiance terreuse)
• Quand le néobrutalisme a besoin de chaleur et de matière

Pourquoi elle fonctionne : L’orange rouille et le crème créent une impression terreuse et organique. Le brun foncé à la place du noir ajoute de la chaleur tout en préservant le contraste.

19. Cyber Grape

Du violet, mais version numérique.

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

Quand l’utiliser :

• Cryptomonnaie et blockchain
• Produits d’IA et de machine learning
• SaaS futuristes
• Expériences en mode sombre

Pourquoi elle fonctionne : Un fond violet profond rehaussé d’accents vifs crée une impression high-tech. Des bordures claires sur fond sombre renversent le néobrutalisme traditionnel tout en préservant la structure.

20. Sunshine & Shadow

Contraste maximal, couleurs minimales.

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

Quand l’utiliser :

• Quand vous cherchez une simplicité brutale
• Sites riches en texte
• Blogs et publications
• Quand deux couleurs (plus le noir et le blanc) suffisent

Pourquoi elle fonctionne : L’orange est la seule couleur. Le noir et le blanc font tout le gros œuvre. Les cartes crème apportent une chaleur discrète. Cette palette prouve que la sobriété peut payer — même en néobrutalisme.

Comment intégrer ces palettes

Choisissez votre palette préférée et déposez-la dans votre CSS :

Pour Tailwind CSS v4

Ajoutez ceci à votre styles.css :

Copier@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;
}

Puis employez-la dans votre balisage :

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

Pour du CSS classique

Définissez des variables CSS :

Copier: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);
}

Pour React/Styled Components

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

Comment choisir la bonne palette pour votre projet

Toujours débordé ? Suivez cet arbre de décision :

Si vous construisez un SaaS ou un produit tech : → Partez sur Electric Yellow (#1) ou Electric Violet (#11)

Si vous visez les créatifs ou les designers : → Essayez Lavender Dream (#6) ou Hot Pink Punch (#2)

S’il vous faut du professionnel mais de l’affirmé : → Utilisez Mint & Charcoal (#15) ou Teal & Coral (#13)

Si votre marque déborde d’énergie : → Optez pour Cyber Lime (#3) ou Orange Burst (#7)

Si vous construisez en mode sombre : → Partez sur Neon Midnight (#9) ou Cyber Grape (#19)

Si vous voulez jouer la sécurité : → Brutal Monochrome (#4) ou Sunshine & Shadow (#20)

Si vous voulez sortir du lot : → Bubblegum Chaos (#10) ou Dopamine Overload (#16)

Combinaisons de couleurs à éviter

Toutes les couleurs affirmées ne fonctionnent pas en néobrutalisme. Voici les combinaisons à écarter :

1. Pastels + bordures noires Le rose tendre (#FFB6C1) et le lavande (#E6E6FA) manquent de saturation. Ils entrent en conflit avec la structure rigide.

2. Trop de couleurs primaires Rouge + bleu + jaune + vert + violet = chaos visuel. Tenez-vous-en à 1 primaire et 1 à 2 secondaires au maximum.

3. Accents peu contrastés Jaune clair (#FFFFE0) sur fond blanc. Gris (#808080) sur blanc. Si vous devez plisser les yeux pour le voir, ne l’utilisez pas.

4. Bruns boueux Le brun (#8B4513) peut fonctionner (voir Rust & Cream), mais la plupart des bruns paraissent trop organiques face à l’énergie géométrique du néobrutalisme.

5. Plusieurs néons Rose néon + vert néon + bleu néon = migraine. Choisissez UN seul néon et ancrez-le avec du noir et du blanc.

Astuces de pro pour exploiter ces palettes

1. Commencez en monochrome, ajoutez la couleur avec stratégie

Construisez d’abord votre mise en page en noir et blanc. Puis n’ajoutez de la couleur que là où il faut mettre en valeur :

• les CTA prennent la couleur primaire
• les sections importantes prennent la secondaire
• tout le reste reste neutre

2. Appliquez la règle du 60-30-10

Même en néobrutalisme, les proportions comptent :

• 60 % de neutre (blanc, noir, gris)
• 30 % de couleur primaire
• 10 % de secondaire/accent

3. Testez l’accessibilité

Passez votre palette dans un vérificateur de contraste. Texte noir sur jaune ? Ça passe en général. Texte rose sur blanc ? Souvent recalé.

Outil : utilisez le WebAIM Contrast Checker

4. Créez des états de survol

Réduisez la saturation ou assombrissez votre couleur primaire au survol :

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

5. N’oubliez pas le mode sombre

La plupart de ces palettes ont une variante en mode sombre. Il suffit d’inverser les arrière-plans et d’ajuster la luminosité :

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

Télécharger toutes les palettes

Vous voulez les 20 palettes dans un format prêt à l’emploi ?

Config Tailwind : Les 20 palettes sous forme de configurations de thème Tailwind → Télécharger le JSON

Variables CSS : Les 20 palettes sous forme de jeux de variables CSS → Télécharger le CSS

Figma : Les 20 palettes sous forme de styles de couleurs Figma → Récupérer le fichier Figma

Pour conclure

La couleur est subjective, mais la couleur néobrutaliste, elle, n’a rien de compliqué :

La formule :

1. Partez du noir et du blanc (non négociable)
2. Choisissez UNE couleur primaire affirmée (jaune, rose, lime, orange, violet)
3. Ajoutez UN accent secondaire si besoin (facultatif)
4. Dosez avec parcimonie — laissez le noir et le blanc faire le travail

Les palettes de ce guide couvrent tout, des options de départ sans risque (Electric Yellow, Brutal Monochrome) à la folie expérimentale (Bubblegum Chaos, Dopamine Overload).

Commencez par une seule. Utilisez-la. Ajustez-la. Faites-la vôtre.

Et souvenez-vous : la meilleure palette néobrutaliste est celle à laquelle vous vous tenez. Les demi-mesures n’ont pas leur place dans cette esthétique. Osez à fond ou rentrez chez vous.

Allez, choisissez vos couleurs et construisez quelque chose d’impossible à ignorer. 🎨

Vous utilisez Neobrutalism ? Ces palettes sont déjà intégrées à la bibliothèque. Changez simplement de thème et le tour est joué → neobrutalism.com

Vous en voulez plus ? Laissez un commentaire avec votre palette préférée ou partagez vos propres combinaisons de couleurs brutales.