Schwarze und graue Farbkombinationen: 20 Farbpaletten mit Hex-Codes

Eine schwarz-graue Farbpalette ist eine der einfachsten Möglichkeiten, ein Design modern, selbstbewusst und sauber wirken zu lassen. Von UI-Layouts bis zum Druck schaffen diese neutralen Töne sofort Struktur, ohne vom Inhalt abzulenken.

Unten finden Sie über 20 Ideen für Schwarz-Grau-Paletten mit HEX-Codes sowie praktische Tipps zu Kontrast, Typografie und der Auswahl von Akzentfarben.

Warum funktionieren Schwarz-Grau-Paletten so gut?

Schwarz- und Graupaletten sind von Natur aus organisiert: Der Helligkeitsbereich schafft Hierarchie, Abstände und Betonung, ohne dass viele Farbtöne nötig sind. Das macht sie ideal für Layouts, bei denen Klarheit wichtig ist – Dashboards, redaktionelle Seiten, Produktdetailansichten und Brand-Systeme.

Sie wirken auch zeitlos. Da neutrale Farben nicht so schnell Trends unterliegen wie kräftige Farbschemata, bleibt eine monochrome oder kohle-/schieferbasierte Palette länger aktuell und lässt sich problemlos für Web, Druck und Verpackung anpassen.

Schließlich machen Schwarz-Grau-Kombinationen Akzentfarben kraftvoller. Ein einzelner Akzent in Petrol, Kobalt, Koralle oder Limette kann in der Benutzeroberfläche sofort „klickbar“ wirken oder im Druck als etwas „Besonderes“ erscheinen, da die Basis so ruhig ist.

20+ Ideen für Schwarz-Grau-Farbpaletten (mit HEX-Codes)

1) Mitternachtsschiefer

HEX: #0B0D10 #1A1F26 #2E3640 #7C8794 #E6E9EE

Stimmung: elegant, nächtlich, minimalistisch

Am besten geeignet für: SaaS Dashboard UI

Elegante Mitternachtstöne erinnern an eine kontrastreiche Stadtsilhouette und saubere Glasflächen. Diese Schwarz-Grau-Palette glänzt in Dashboards, Analysen und Admin-Oberflächen, wo Hierarchie entscheidend ist. Kombinieren Sie sie mit klarem Off-White als Abstandhalter und einem leuchtenden Akzent für Hauptaktionen. Tipp: Fließtext immer auf Hellgrau und Fast-Schwarz für Überschriften und Navigation nutzen.

Beispielbild von Mitternachtsschiefer, generiert mit media.io

Media.io

Media.io ist ein Online-KI-Studio zur Erstellung und Bearbeitung von Videos, Bildern und Audio in Ihrem Browser.

Jetzt kostenlos ausprobieren

2) Betonstudio

HEX: #111315 #2A2D30 #4A4F55 #B8BDC3 #F4F5F7

Stimmung: industriell, ruhig, edel

Am besten geeignet für: Architekten-Portfolio-Website

Industrielle Beton-Anmutungen wirken ruhig, strukturiert und dezent hochwertig. Die mittleren Grautöne lassen Fotos und Renderings gewollt statt hart wirken. Kombinieren Sie dazu einen warmweißen Hintergrund und dünne schwarze Linien für ein redaktionelles Grid. Tipp: Den hellsten Grauton für Abschnittsbereiche nutzen, damit Layouts atmen, ohne den minimalistischen Charakter zu verlieren.

Beispielbild von Betonstudio, generiert mit media.io

3) Graphitflüstern

HEX: #0F1114 #23262B #3B4048 #9AA2AD #DADFE6

Stimmung: weich, modern, zurückhaltend

Am besten geeignet für: Brand Guideline-Präsentation

Weiche Graphittöne vermitteln Zurückhaltung, Klarheit und modernes Handwerk. Sie eignen sich hervorragend für ein Markenbuch, in dem Typografie, Abstände und Logoregeln überzeugend wirken sollten. Ergänzen Sie sie mit einer zurückgenommenen Akzentfarbe (z. B. staubiges Blau oder Salbei) für sekundäre Highlights. Tipp: Diagramme und Farbfelder auf Hellgrau platzieren, um Blendungen durch reines Weiß in Präsentationen zu vermeiden.

Beispielbild von Graphitflüstern, generiert mit media.io

4) Silberstreif

HEX: #101215 #2C2F35 #5B616B #C7CDD6 #FFFFFF

Stimmung: hell, klar, makellos

Am besten geeignet für: E-Commerce-Produktseite

Polierte Neutraltöne wirken luftig, klar und produktorientiert, wie Chromdetails unter Studiolicht. Der helle Bereich sorgt dafür, dass Seiten vertrauenswürdig und übersichtlich bleiben. Kombiniert mit einer einzigen satten CTA-Farbe (Kobaltblau oder Koralle) perfekt für Conversion-orientierte Layouts. Tipp: Mittelgrau für Trenner und Mikrotitel verwenden, damit wichtige Infos im Fokus bleiben.

Beispielbild von Silberstreif, generiert mit media.io

5) Sturmzeichen

HEX: #0E1013 #1F242B #3E4652 #A0A9B5 #E9EDF2

Stimmung: stimmungsvoll, technisch, fokussiert

Am besten geeignet für: Cybersecurity-Landingpage

Stimmungsvolle Sturmnuancen erinnern an verschlüsselte Bildschirme, Serverräume und kontrollierte Dringlichkeit. Diese Schwarz-Grau-Kombis eignen sich ideal für Security-, Compliance- und IT-Dienstleistungen, die Autorität ohne Übertreibung brauchen. Kombinieren Sie mit elektrischen Akzenten in Türkis oder Limette für Statusanzeigen und Trust-Abzeichen. Tipp: Verläufe subtil halten und markante Icons den Tech-Charakter darstellen lassen.

Beispielbild von Sturmzeichen, generiert mit media.io

6) Tinte und Nebel

HEX: #0A0B0D #1B1D21 #343842 #B0B6C0 #F2F4F7

Stimmung: filmisch, weich, elegant

Am besten geeignet für: Editorial-Magazin-Strecke

Filmische Tinte vor nebligem Grau wirkt elegant und leicht geheimnisvoll. Passt zu Longform-Layouts, bei denen Typografie hochwertig und durchdacht sein soll. Kombinieren Sie mit warmem Papierweiß und dezentem Linienwerk für ein klassisches Editorial-Grid. Tipp: Nebelgrau als Hintergrund für Beschriftungsboxen nutzen, um Notizen ohne starke Rahmen abzugrenzen.

Beispielbild von Tinte und Nebel, generiert mit media.io

7) Museums-Anthrazit

HEX: #0C0C0D #202022 #3A3A3F #8F8F96 #E8E8EA

Stimmung: kuratiert, ruhig, galerieartig

Am besten geeignet für: Kunstausstellungs-Plakat

Kuratiertes Anthrazit wirkt wie eine ruhige Galeriewand unter sanftem Schienenlicht. Bildtitel und Daten heben sich ab, ohne mit Bildern zu konkurrieren. Kombinieren mit einer Akzentfarbe für den Namen des ausstellenden Künstlers, um das Auge zu führen. Tipp: Großzügige Ränder lassen und den Text im strengen Grid ausrichten, für ein museales Finish.

Beispielbild von Museums-Anthrazit, generiert mit media.io

8) Stahl-Monochrom

HEX: #0D0F12 #262B31 #414A55 #6F7A88 #D9DEE6

Stimmung: professionell, strukturiert, unternehmerisch

Am besten geeignet für: Jahresbericht-Layout

Stahlgrau vermittelt Struktur, Verlässlichkeit und gut organisierte Information. Es passt hervorragend zu Berichten voller Grafiken, Tabellen und Datenhinweisen. Kombinieren Sie mit einem dezenten Akzent wie Marineblau, um Abschnitte zu trennen, ohne die neutrale Geschichte zu unterbrechen. Tipp: Die dunkelste Nuance nur für Überschriften reservieren, damit dichte Seiten lesbar bleiben.

Beispielbild von Stahl-Monochrom, generiert mit media.io

9) Schattierte Perle

HEX: #0E0E10 #24262B #5A5F68 #C9CDD3 #FAFAFB

Stimmung: luxuriös, sanft, kontrastreich

Am besten geeignet für: Kosmetik-Verpackungsdesign

Dunkle Schwarztöne, kombiniert mit perligem Grau, wirken luxuriös – wie Satin-Stoff im Rampenlicht. Diese Schwarz-Grau-Kombination eignet sich gut für Beauty, Hautpflege und Düfte, bei denen minimale Typografie einen hochwertigen Eindruck vermittelt. Kombiniere sie mit Folien-Silber oder einem einzelnen Blush-Akzent für eine elegante Note. Anwendungstipp: Halte die dunklen Flächen matt, sodass Glanzeffekte gezielt und nicht zufällig aussehen.

Bildbeispiel für "shadowed pearl" erstellt mit media.io

10) Quiet Type

HEX: #0B0C0E #1C1F24 #2F353E #A7AFBA #F6F7F9

Stimmung: ruhig, typografisch, minimalistisch

Am besten geeignet für: Blog-Typografie-System

Sanfte Neutraltöne schaffen eine leise Bühne für Worte – wie Tinte auf glattem Papier. Die breite Graustufenspanne erleichtert den Aufbau einer Typografie-Hierarchie ohne visuelles Rauschen. Kombiniere für Links und Hervorhebungen einen dezenten Akzent (staubiges Blau oder Terrakotta). Anwendungstipp: Verwende das sanfte Grau für Codeblöcke und Zitate, damit der Lesefluss nicht gestört wird.

Bildbeispiel für "quiet type" erstellt mit media.io

11) Asphalt Minimal

HEX: #090A0B #16181B #2A2E34 #616873 #DDE1E7

Stimmung: urban, kräftig, modern

Am besten geeignet für: Streetwear-Lookbook

Urbane Asphalttöne wirken kraftvoll und modern – wie frischer Belag und Neon-Reflexe. Sie verleihen Modefotos starken Kontrast und halten das Layout minimalistisch. Kombiniere sie mit einem auffälligen Akzent für Veröffentlichungsdaten und Preisschilder. Anwendungstipp: Nutze das mittlere Grau für Etiketten und Größenangaben, damit die Produktfotos dominant bleiben.

Bildbeispiel für "asphalt minimal" erstellt mit media.io

12) Smoke and Chrome

HEX: #0C0E10 #22262C #3C434E #8D98A6 #EEF1F5

Stimmung: futuristisch, klar, technikorientiert

Am besten geeignet für: Hardware-Produktwerbung

Kühle Rauch- und Chromtöne erinnern an präzise Ingenieurskunst und saubere Metalloberflächen. Diese Schwarz-Grau-Palette eignet sich hervorragend für Hardware-Einführungen, bei denen das Produkt scharf und hochwertig wirken soll. Kombiniere sie mit kühlen Blautönen für Spezifikationen und Feature-Highlights. Anwendungstipp: Platziere technische Angaben auf den hellsten Graufeldern, um die Anzeige auf einen Blick lesbar zu halten.

Bildbeispiel für "smoke and chrome" erstellt mit media.io

13) Linen Shadow

HEX: #111214 #2A2C30 #4B4F56 #BFC3C9 #F1EFEA

Stimmung: warme Neutraltöne, gemütlich, ausgewogen

Am besten geeignet für: Modernes Interior-Moodboard

Warme, schattierte Neutraltöne erinnern an Leinenpolster und sanftes Nachmittagslicht. Das leicht cremige Weiß verhindert, dass die Palette zu kühl wird. Kombiniere sie mit natürlichen Holzstrukturen und gebürstetem Messing für einen wohnlichen, modernen Look. Anwendungstipp: Dunkle Töne für Rahmen und Armaturen verwenden, die weicheren Grautöne überlassen Sie den Textilien.

Bildbeispiel für "linen shadow" erstellt mit media.io

14) Noir Notebook

HEX: #07080A #171A1F #2B313A #9099A6 #F7F8FA

Stimmung: smart, akademisch, fokussiert

Am besten geeignet für: Notiz-App-UI

Noir-Notizbucheinflüsse wirken fokussiert und studiert, wie Graphit auf frischem Papier. Sie lassen Inhalte hervortreten, ohne UI-Elemente in den Vordergrund zu drängen. Kombiniere mit einer ruhigen Akzentfarbe für Tags und markierte Zustände. Anwendungstipp: Eingabefelder einen Ton heller als den Hintergrund gestalten, damit Fokusrahmen klar, aber nicht aufdringlich erscheinen.

Bildbeispiel für "noir notebook" erstellt mit media.io

15) Winter Graphite

HEX: #0D0F13 #242A33 #3B4553 #AAB3C0 #F0F3F7

Stimmung: kühl, luftig, modern

Am besten geeignet für: Mobile App Onboarding-Screens

Kühle Wintergrautöne wirken luftig und modern, wie Frost auf Glas mit scharfen Kanten. Sie bieten Onboarding-Screens eine klare Basis für Illustrationen und kurze Texte. Kombiniere sie mit einem hellen Akzent für Fortschrittsanzeigen und primäre Buttons. Anwendungstipp: Hintergründe nahezu weiß halten und die dunkleren Grautöne nur für Überschriften verwenden, um einen schweren Ersteindruck zu vermeiden.

Bildbeispiel für "winter graphite" erstellt mit media.io

16) Carbon and Sand

HEX: #0B0C0D #1E2024 #3D4046 #B0B3B8 #E8DDCF

Stimmung: erdig, hochwertig, geerdet

Am besten geeignet für: Kaffeelabel

Erdige Karbontöne mit sandigem Highlight fühlen sich natürlich und hochwertig an – wie geröstete Bohnen und Kraftpapier. Sie eignen sich gut für Etiketten mit klarem Kontrast, ohne steril zu wirken. Kombiniere sie mit einfachen Illustrationslinien und fühlbarer Papierstruktur. Anwendungstipp: Der dunkelste Farbton sollte leicht abgemildert ("reiches Schwarz") gedruckt werden, um auf ungestrichenem Papier unsauberen Rand zu vermeiden.

Bildbeispiel für "carbon and sand" erstellt mit media.io

17) Monochrome Bloom

HEX: #0B0C0E #1E2126 #3A3F47 #C3C7CE #F8F8F9

Stimmung: sanft, botanisch, luftig

Am besten geeignet für: Botanische Aquarell-Einladung

Weiche monotone Töne wirken wie neblige Blütenblätter und zarte Tuschewaschungen. Die sanfte Farbspanne unterstützt botanische Illustrationen und hält den Text gleichzeitig gut lesbar. Kombiniere sie mit silbergrauen Linien und viel Weißraum für einen eleganten Papeterie-Look. Anwendungstipp: Einladungstexte in tiefem Anthrazit, nicht reinem Schwarz, gestalten, um die Aquarell-Weichheit zu bewahren.

Bildbeispiel für "monochrome bloom" erstellt mit media.io

18) Prism Neutral

HEX: #0E1012 #252A31 #4B5460 #9FA9B6 #ECEFF3

Stimmung: klar, flexibel, modern

Am besten geeignet für: Präsentationsvorlage

Klar abgestimmte Neutraltöne wirken flexibel und modern, wie ein poliertes Deck in einem hellen Konferenzraum. Sie halten Charts, Icons und Fotos über viele Folientypen hinweg konsistent. Kombiniere sie mit einer Markenakzentfarbe für Abschnittsüberschriften und wichtige Kennzahlen. Anwendungstipp: Den hellsten Ton als Hintergrund verwenden und mit blassen Graufeldern abwechseln, um dichte Folien aufzulockern.

Bildbeispiel für "prism neutral" erstellt mit media.io

19) Obsidian Interface

HEX: #050607 #14171B #2B3138 #6A7380 #D7DCE3

Stimmung: dunkel, präzise, kontrastreich

Am besten geeignet für: Entwickler-Dokumentationsseite

Obsidian-Töne wirken präzise und technisch wie ein Code-Editor im abgedunkelten Raum. Diese Schwarz-Grau-Kombinationen machen Navigation, Seitenleisten und Codeblöcke leicht unterscheidbar – ohne laute Rahmen. Mit einem zurückhaltenden Akzent (Cyan oder Bernstein) für Links und Syntax-Hervorhebungen ergänzen. Anwendungstipp: Code-Text auf einem etwas helleren Panel als den Seitenhintergrund setzen, um die Augen zu entlasten.

Bildbeispiel für "obsidian interface" erstellt mit media.io

20) Urban Mist

HEX: #101216 #2A2F37 #474F5B #B7BEC8 #F3F5F8

Stimmung: frisch, ausgewogen, städtisch-modern

Am besten geeignet für: Immobilienbroschüre

Städtische Nebelgrautöne wirken frisch und ausgewogen, wie Morgennebel über Glastürmen. Sie eignen sich für Immobilienbroschüren, bei denen Grundrisse und Fotos Klarheit und Ruhe ausstrahlen sollen. Kombiniere sie mit einem gedämpften Metallic-Akzent für Preise und Schlüsselausstattungen. Anwendungstipp: Fließtext in dunklem Grau setzen, Überschriften leicht heller als Schwarz, um harten Kontrast im Druck zu vermeiden.

Bildbeispiel für "urban mist" erstellt mit media.io

21) Mono Workshop

HEX: #0A0B0D #1C1F24 #3A3F47 #7F8792 #E5E8ED

Stimmung: praktisch, maker, organisiert

Am besten geeignet für: Workshop-Event-Flyer

Praktische Workshop-Töne erinnern an Werkzeuge, saubere Werkbänke und eine pragmatische Maker-Atmosphäre. Die enge Graustufenspanne macht Zeitpläne, Referenten und Standortinfos gut erfassbar. Kombiniere mit einem kräftigen Akzent für Datum und Anmeldelink. Anwendungstipp: Hellgrau für Abschnittsblöcke verwenden, damit der Flyer strukturiert bleibt – ohne schwere Boxen.

Bildbeispiel für "mono workshop" erstellt mit media.io

Welche Farben passen gut zu Schwarz und Grau?

Schwarz und Grau lassen sich leicht mit energiegeladenen Akzenten wie Türkis, Limette, Kobalt, Koralle oder Magenta kombinieren – ideal, wenn CTAs, Highlights oder Schlüssellabels auffallen sollen. Selbst kleine Akzentflächen wirken auf neutraler Basis deutlich.

Für sanftere, hochwertigere Kombinationen probieren Sie gedeckte Akzente wie Salbeigrün, staubiges Blau, Rouge oder warmen Sand. Diese halten das monochrome Ambiente und verleihen dennoch Wärme und Persönlichkeit.

Wenn Sie für den Druck gestalten, denken Sie an Metalltöne (Silber, Zinn, Champagner-Gold) als Akzent-„farben“ per Folie, Druck oder Material-Finish. Sie ergänzen Anthrazittöne, ohne das Layout unruhig zu machen.

Wie verwendet man eine Schwarz-Grau-Farbpalette in echten Designs?

Bauen Sie Hierarchie mit Helligkeit, nicht mit Zusatzfarben: Fast-Schwarz für Überschriften/Navi, Mittelgrau für sekundäre UI und Trennlinien, sehr helle Grautöne oder Off-White für Flächen. Das strukturiert Seiten und reduziert visuelle Unruhe.

Achten Sie auf Kontrast und Lesbarkeit. Statt reines Schwarz auf Weiß überall zu nutzen, wählen Sie dunkle Anthrazit-Texte auf cremefarbenem Hintergrund für lange Lesestrecken und reservieren das tiefste Schwarz für Hervorhebungen und Hauptanker.

Um einen „flachen“ Look zu vermeiden, erzeugen Sie Tiefe mit Abständen, subtilen Schatten und sanften Verläufen – gerade in dunklen Themen. Halten Sie diese Effekte dezent, damit die Palette klar und professionell bleibt.

Erstellen Sie Schwarz-Grau-Paletten-Visuals mit KI

Möchten Sie ein Schwarz-Grau-Farbschema in einem Dashboard, Poster, Verpackungsshot oder Foliendesign testen, erzeugen Sie schnelle Entwürfe mit KI. So testen Sie Stimmung, Kontraste und Akzentfarben, bevor Sie Zeit in das finale Design investieren.

Setzen Sie Ihre HEX-Farbwerte als Vorgaben und beschreiben Sie Layout und Lichtstimmung (Studio, Editorial, filmisch, minimal UI). Mit kleinen Prompt-Anpassungen finden Sie schnell die passende Atmosphäre.

Gefällt Ihnen ein Visual, exportieren und nutzen Sie es als Moodboard-Referenz für Web, Print oder Markenrichtlinien.

Weiter: Pink-Grün-Farbpalette