20 neobrutalistische Farbpaletten mit Hex-Codes (fertig zum Kopieren und Einfügen)

Seien wir ehrlich: Farben für ein neobrutalistisches Design zu wählen, kann überfordern.

Du weißt, dass du mutige, kontrastreiche Farben brauchst. Aber welche mutigen Farben? Wie viele? Und welche harmonieren miteinander, ohne wie ein missglücktes Bastelprojekt aus dem Kindergarten auszusehen?

Ich habe Dutzende neobrutalistischer Seiten gebaut, und an der Farbwahl bleiben die meisten hängen. Deshalb gebe ich dir 20 gebrauchsfertige Farbpaletten an die Hand, jede mit exakten Hex-Codes, Einsatzhinweisen und Praxiskontext.

Keine Theorie. Keine Vorträge über den Farbkreis. Kopier einfach die Hex-Codes und leg los.

Legen wir los.

So nutzt du diese Paletten

Bevor wir zu den Farben kommen: So solltest du über neobrutalistische Farbsysteme denken.

Aufbau einer neobrutalistischen Palette:

• Basis: Schwarz oder sehr dunkel (für Rahmen, Text, Schatten)
• Hintergrund: Weiß oder sehr hell (für Karten, Haupthintergrund)
• Primärfarbe: deine wichtigste Akzentfarbe (CTAs, Header, Betonungen)
• Sekundärfarbe: unterstützender Akzent (meist 1-2 zusätzliche Farben)
• Akzente: zusätzliche Farbtupfer (optional, sparsam einsetzen)

Grundprinzipien:

1. Hoher Kontrast ist Pflicht - Schwarz und Weiß sollten deine Palette verankern
2. Sättigung vor Subtilität - keine Pastelltöne, keine gedämpften Töne (außer bei den Hintergründen)
3. Begrenze die Akzentfarben - maximal 1-3 kräftige Akzente
4. Scheu keine Kühnheit - wenn es sich zu sicher anfühlt, ist es nicht brutal genug

Und jetzt zu den Paletten.

Klassische neobrutalistische Paletten

Das sind die zeitlosen Kombinationen, die die Ästhetik definieren.

1. Electric Yellow

Die neobrutalistische Ur-Palette. Wenn du nur eine lernst, dann diese.

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

Wann du sie nutzen solltest:

• Tech-Produkte und SaaS
• Alles, was Aufmerksamkeit und Energie braucht
• Dein erstes neobrutalistisches Projekt

Warum sie funktioniert: Gelb auf Weiß sorgt für maximale Sichtbarkeit. Schwarze Rahmen und Texte liefern die Struktur. Dass dies die Standardpalette von Neobrutalism ist, hat einen Grund: Sie ist kaum zu vermasseln.

Beispielverwendung:

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

Beispiel aus der Praxis: Gumroad nutzt eine Variation dieser Palette in der gesamten Oberfläche.

2. Hot Pink Punch

Für Marken mit Attitüde und Energie.

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

Wann du sie nutzen solltest:

• Kreativagenturen
• Mode- und Streetwear-Marken
• Produkte für junge Zielgruppen
• Alles Anti-Corporate

Warum sie funktioniert: Kräftiges Pink fordert Aufmerksamkeit. Mit Cyan kombiniert erzeugt es eine retrofuturistische Note. Der gelbe Akzent fügt eine dritte Dimension hinzu, ohne zu überladen.

Color-Blocking-Strategie:

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

Maximale Sichtbarkeit mit digitaler Kante.

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

Wann du sie nutzen solltest:

• Gaming und E-Sport
• Tech-Start-ups
• Entwicklerwerkzeuge
• Alles Futuristische oder Digital-First

Warum sie funktioniert: Limettengrün schreit „digital", während Magenta-Pink den Kontrast liefert. Diese Palette fühlt sich an wie ein Terminalfenster, gekreuzt mit einem Rave-Poster.

Beispiel:

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

Wenn du Neobrutalismus ohne den Regenbogen willst.

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

Wann du sie nutzen solltest:

• minimalistischen Neobrutalismus (ja, den gibt es)
• Architektur- und Design-Portfolios
• wenn Farbe vom Inhalt ablenken würde
• professionelle Kontexte, die Kante brauchen

Warum sie funktioniert: Sie beweist, dass es beim Neobrutalismus nicht um Farbe geht, sondern um Struktur. Dicke Rahmen, harte Schatten und kräftige Typografie tragen die Ästhetik ganz ohne Farbton.

Profi-Tipp: Füge einen dezenten Akzent für Hover-Zustände hinzu:

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

Kräftige und energiegeladene Paletten

Für Marken, die nicht flüstern.

5. Sunset Riot

Wärme trifft auf Rebellion.

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

Wann du sie nutzen solltest:

• Marken für Essen und Getränke
• Event- und Festival-Websites
• Lifestyle- und Wellness-Produkte
• alles, was warm und einladend wirken soll

Warum sie funktioniert: Rot und Gelb erzeugen Energie und Appetit (buchstäblich: das sind Lebensmittelfarben). Der hellblaue Akzent kühlt genau so viel ab, wie nötig.

Hintergrund-Strategie: Der cremefarbene Hintergrund (#FCFFE7) ist weicher als reines Weiß und lässt die Rot- und Gelbtöne hervorstechen, ohne hart zu wirken.

6. Lavender Dream

Neobrutalismus trifft auf Verspieltheit.

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

Wann du sie nutzen solltest:

• Kreativ-Portfolios
• Kunst- und Illustrationsprojekte
• Beauty und Kosmetik
• Gen-Z-Marken, die Verspieltheit wollen

Warum sie funktioniert: Lavendelviolett ist mutig, aber nicht aggressiv. Mit Limettengelb und Magenta-Pink kombiniert erzeugt es eine verspielte, fast bonbonartige Palette, die trotzdem die neobrutalistische Struktur bewahrt.

Beispiel:

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

Hohe Energie, maximale Wärme.

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

Wann du sie nutzen solltest:

• Sport- und Fitnessmarken
• Sommerkampagnen
• Produkte rund um Energie und Aktion
• Seiten mit vielen Call-to-Actions

Warum sie funktioniert: Orange wird im Webdesign zu wenig genutzt, was es sofort unverwechselbar macht. Mehrere Orangetöne erzeugen Tiefe, ohne dass zusätzliche Farben nötig sind.

8. Forest Fresh

Erdiger Neobrutalismus, wer hätte das gedacht?

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

Wann du sie nutzen solltest:

• nachhaltige und Öko-Marken
• Gesundheit und Wellness
• Outdoor- und naturnahe Produkte
• wenn du einen bodenständigen Neobrutalismus brauchst

Warum sie funktioniert: Grün muss nicht weich sein. Diese Palette nutzt gesättigte Grüntöne mit hohem Kontrast und bewahrt so die brutale Ästhetik, während sie organisch wirkt.

Besonderheit: Der cremefarbene Kartenhintergrund (#F9F5F2) fügt eine Wärme hinzu, die reines Weiß nicht liefern würde.

Kühne experimentelle Paletten

Für Designer, die Grenzen verschieben wollen.

9. Neon Midnight

Neobrutalismus im Dark Mode in Bestform.

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

Wann du sie nutzen solltest:

• Gaming-Plattformen
• Entwicklerwerkzeuge und Coding-Apps
• Nachtmodus-Erlebnisse
• Cyberpunk-Ästhetik

Warum sie funktioniert: Neonfarben auf dunklem Hintergrund erzeugen diese Terminal-/Hacker-Anmutung. Weiße Rahmen statt schwarzer drehen den Spieß um und bewahren dabei den Kontrast.

Umsetzungstipp:

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

Maximalismus trifft auf Neobrutalismus.

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

Wann du sie nutzen solltest:

• Musik und Unterhaltung
• Spielzeugmarken und Produkte für Kinder
• kurzlebige Marketingkampagnen
• wenn Zurückhaltung ein Fehler wäre

Warum sie funktioniert: Vier kräftige Farben klingen nach Chaos, doch die schwarzen Rahmen und weißen Karten bändigen es. Das ist die „Mehr ist mehr"-Philosophie des Neobrutalismus, auf die Spitze getrieben.

Achtung: Diese Palette ist LAUT. Nutze sie nur, wenn deine Marke maximale Energie verträgt.

11. Electric Violet

Die Kraft von Lila mit moderner Kante.

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

Wann du sie nutzen solltest:

• SaaS-Produkte
• Fintech-Apps
• Kreativsoftware
• moderne Produktivitätswerkzeuge

Warum sie funktioniert: Lila wirkt hochwertig, ohne prätentiös zu sein. Das gelbe Sekundär liefert Wärme. Diese Palette balanciert perfekt zwischen professionell und verspielt.

Dark-Mode-Variante:

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

12. Blood Orange

Aggressiv und warm.

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

Wann du sie nutzen solltest:

• Sportteams
• Energydrinks und kräftige Lebensmittelmarken
• aktionsorientierte Produkte
• Halloween- oder Herbstkampagnen

Warum sie funktioniert: Das Rotorange ist energiegeladen und appetitanregend. Der goldene Akzent fügt eine hochwertige Note hinzu. Das schwarze Sekundär erdet die Wärme.

Kultivierte brutale Paletten

Der Neobrutalismus kann raffiniert sein. Hier ist der Beweis.

13. Teal & Coral

Komplementärfarben, richtig gemacht.

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

Wann du sie nutzen solltest:

• Gesundheits- und Wellness-Apps
• Bildungsplattformen
• Lifestyle-Marken
• wenn du die Balance zwischen energiegeladen und beruhigend brauchst

Warum sie funktioniert: Petrol und Koralle sind Komplementärfarben und erzeugen so ein natürliches visuelles Interesse. Der gelbe Akzent fügt eine dritte Dimension hinzu. Diese Palette wirkt frisch und modern.

14. Indigo & Gold

Luxus-Brutalismus.

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

Wann du sie nutzen solltest:

• Premium-Produkte
• High-End-Mode
• exklusive Mitgliedschaften
• wenn der Neobrutalismus teuer wirken soll

Warum sie funktioniert: Tiefes Indigo signalisiert Qualität und Exklusivität. Gold liefert Luxus. Zusammen erzeugen sie eine hochwertige neobrutalistische Ästhetik, die sich von den üblichen Grundfarben abhebt.

15. Mint & Charcoal

Kühl und gelassen.

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

Wann du sie nutzen solltest:

• Finanzen und Banking (neobrutalistische Edition)
• professionelle Dienstleistungen
• B2B-SaaS
• wenn Vertrauen zählt, aber langweilig keine Option ist

Warum sie funktioniert: Mintgrün ist mutig, aber nicht aggressiv. Anthrazit statt reinem Schwarz mildert die Härte leicht ab und bewahrt dabei den Kontrast.

Experimentell und trendbewusst

Diese sind für die Mutigen.

16. Dopamine Overload

Alle Farben. Alle auf einmal.

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

Wann du sie nutzen solltest:

• Musikfestivals
• Apps und Spiele für Kinder
• Marketing-Stunts
• wenn „zu viel" genau das Ziel ist

Warum sie funktioniert (gerade so): Diese Palette bricht die „maximal 3 Farben"-Regel bewusst. Schwarze Rahmen und weiße Hintergründe bändigen das Chaos. Nutze sie sparsam.

Profi-Tipp: Weise jeder Farbe einen konkreten Zweck zu:

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

90er-Nostalgie trifft auf modernen Brutalismus.

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

Wann du sie nutzen solltest:

• Retro-Gaming
• Vaporwave-Ästhetik
• nostalgische Marken
• alles ironisch Veraltete

Warum sie funktioniert: Reines Magenta, Cyan und Gelb rufen die Computergrafik der 90er wach. Der hellblaue Hintergrund mildert die Intensität.

18. Rust & Cream

Industrieller Neobrutalismus.

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

Wann du sie nutzen solltest:

• Bau und Industrie
• handgemachte und handwerkliche Marken
• Kaffee und Essen (erdige Stimmung)
• wenn der Neobrutalismus Wärme und Textur braucht

Warum sie funktioniert: Rostorange und Creme erzeugen ein erdiges, organisches Gefühl. Dunkelbraun statt Schwarz fügt Wärme hinzu und bewahrt dabei den Kontrast.

19. Cyber Grape

Lila, aber digital.

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

Wann du sie nutzen solltest:

• Kryptowährungen und Blockchain
• KI- und Machine-Learning-Produkte
• futuristisches SaaS
• Dark-Mode-Erlebnisse

Warum sie funktioniert: Ein tiefvioletter Hintergrund mit kräftigen Akzenten erzeugt ein High-Tech-Gefühl. Helle Rahmen auf dunklem Hintergrund drehen den traditionellen Neobrutalismus um und bewahren dabei die Struktur.

20. Sunshine & Shadow

Maximaler Kontrast, minimale Farben.

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

Wann du sie nutzen solltest:

• wenn du brutale Schlichtheit brauchst
• leseintensive Seiten
• Blogs und Publikationen
• wenn zwei Farben (plus Schwarz und Weiß) reichen

Warum sie funktioniert: Orange ist die einzige Farbe. Schwarz und Weiß leisten die Schwerstarbeit. Cremefarbene Karten fügen eine dezente Wärme hinzu. Diese Palette beweist, dass weniger mehr sein kann, sogar im Neobrutalismus.

So setzt du diese Paletten um

Wähle deine Lieblingspalette und setze sie in dein CSS ein:

Für Tailwind CSS v4

Füge sie deiner styles.css hinzu:

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

Dann nutze sie in deinem Markup:

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

Für klassisches CSS

Definiere CSS-Variablen:

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

Für React/Styled Components

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

Die richtige Palette für dein Projekt wählen

Immer noch überfordert? Nutze diesen Entscheidungsbaum:

Wenn du ein SaaS oder Tech-Produkt baust: → Starte mit Electric Yellow (#1) oder Electric Violet (#11)

Wenn du Kreative oder Designer ansprichst: → Probier Lavender Dream (#6) oder Hot Pink Punch (#2)

Wenn du etwas Professionelles, aber Mutiges brauchst: → Nutze Mint & Charcoal (#15) oder Teal & Coral (#13)

Wenn deine Marke voller Energie steckt: → Nimm Cyber Lime (#3) oder Orange Burst (#7)

Wenn du im Dark Mode baust: → Starte mit Neon Midnight (#9) oder Cyber Grape (#19)

Wenn du auf Nummer sicher gehen willst: → Brutal Monochrome (#4) oder Sunshine & Shadow (#20)

Wenn du anders sein willst: → Bubblegum Chaos (#10) oder Dopamine Overload (#16)

Farbkombinationen, die du vermeiden solltest

Nicht jede mutige Farbe funktioniert im Neobrutalismus. Hier sind Kombinationen, die du überspringen solltest:

1. Pastelltöne + schwarze Rahmen Zartes Pink (#FFB6C1) und Lavendel (#E6E6FA) haben nicht genug Sättigung. Sie kämpfen gegen die harte Struktur an.

2. Zu viele Grundfarben Rot + Blau + Gelb + Grün + Lila = visuelles Chaos. Halte dich an 1 Primär- und maximal 1-2 Sekundärfarben.

3. Kontrastarme Akzente Hellgelb (#FFFFE0) auf weißen Hintergründen. Grau (#808080) auf Weiß. Wenn du die Augen zusammenkneifst und es nicht siehst, nimm es nicht.

4. Schlammige Brauntöne Braun (#8B4513) kann funktionieren (siehe Rust & Cream), aber die meisten Brauntöne wirken zu organisch für die geometrische Energie des Neobrutalismus.

5. Mehrere Neonfarben Neonpink + Neongrün + Neonblau = Migräne. Wähle EIN Neon und erde es mit Schwarz und Weiß.

Profi-Tipps für den Einsatz dieser Paletten

1. Starte monochrom, füge Farbe gezielt hinzu

Baue dein Layout zuerst in Schwarz und Weiß. Füge dann nur dort Farbe hinzu, wo du Betonung brauchst:

• CTAs bekommen die Primärfarbe
• wichtige Abschnitte bekommen die Sekundärfarbe
• alles andere bleibt neutral

2. Nutze die 60-30-10-Regel

Auch im Neobrutalismus zählen die Proportionen:

• 60 % neutral (Weiß, Schwarz, Grautöne)
• 30 % Primärfarbe
• 10 % Sekundär-/Akzentfarbe

3. Teste die Barrierefreiheit

Jag deine Palette durch einen Kontrast-Checker. Schwarzer Text auf Gelb? Besteht meist. Rosa Text auf Weiß? Fällt oft durch.

Werkzeug: Nutze den WebAIM Contrast Checker

4. Erstelle Hover-Zustände

Reduziere die Sättigung oder dunkle deine Primärfarbe für den Hover ab:

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

5. Vergiss den Dark Mode nicht

Die meisten dieser Paletten haben Dark-Mode-Varianten. Dreh einfach die Hintergründe um und passe die Helligkeit an:

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

Alle Paletten herunterladen

Willst du alle 20 Paletten in einem gebrauchsfertigen Format?

Tailwind-Config: Alle 20 Paletten als Tailwind-Theme-Konfigurationen → JSON herunterladen

CSS-Variablen: Alle 20 Paletten als CSS-Variablensätze → CSS herunterladen

Figma: Alle 20 Paletten als Figma-Farbstile → Figma-Datei holen

Abschließende Gedanken

Farbe ist subjektiv, aber neobrutalistische Farbe ist nicht kompliziert:

Die Formel:

1. Starte mit Schwarz und Weiß (nicht verhandelbar)
2. Wähle EINE mutige Primärfarbe (Gelb, Pink, Limette, Orange, Lila)
3. Füge EINEN sekundären Akzent hinzu, falls nötig (optional)
4. Setze sie sparsam ein: Lass Schwarz und Weiß die Arbeit machen

Die Paletten in diesem Guide decken alles ab, von sicheren Einsteigeroptionen (Electric Yellow, Brutal Monochrome) bis zum experimentellen Wahnsinn (Bubblegum Chaos, Dopamine Overload).

Starte mit einer. Nutze sie. Passe sie an. Mach sie zu deiner.

Und denk daran: Die beste neobrutalistische Palette ist die, auf die du dich festlegst. Halbe Sachen funktionieren in dieser Ästhetik nicht. Klotzen statt kleckern.

Jetzt wähle deine Farben und bau etwas, das unmöglich zu ignorieren ist. 🎨

Nutzt du Neobrutalism? Diese Paletten sind bereits in die Bibliothek integriert. Wechsle einfach das Theme, und fertig → neobrutalism.com

Willst du mehr? Hinterlasse einen Kommentar mit deiner Lieblingspalette oder teile deine eigenen brutalen Farbkombinationen.