Weiße und schwarze Farbpaletten: 20 Ideen mit Hex-Codes für modernes Design

Eine Palette aus Weiß und Schwarz ist der schnellste Weg, um einem Design einen gezielten Ausdruck zu verleihen – saubere Hintergründe, klare Typografie und sofort lesbare Hierarchie.

Nachfolgend findest du 20 sorgfältig ausgewählte monochrome Paletten mit HEX-Codes sowie praktische Tipps zu Kontrast, Balance und zum Hinzufügen von Akzentfarben, wenn nötig.

Warum funktionieren Schwarz-Weiß-Paletten so gut?

Weiß und Schwarz sind visuelle Grundlagen: Weiß schafft Raum und Klarheit, während Schwarz Struktur, Kontrast und sofortigen Fokus liefert. Zusammen wirken sie sich positiv auf Typografie- und Layout-Entscheidungen aus und lassen sie durchdachter erscheinen.

Monochrome Farbpaletten verringern zudem das „Farb-Rauschen“, was die Benutzerfreundlichkeit in UIs erhöht und Markenkennzeichen einprägsamer macht. Dezente Grautöne sorgen für Hierarchie, ohne sich in den Vordergrund zu drängen.

Da Schwarz-Weiß-Schemata von Natur aus kontrastreich sind, funktionieren sie hervorragend auf Bildschirmen und im Druck – vor allem, wenn man fast-schwarze und sanfte Weißtöne verwendet, damit das Design auch bei längeren Lesestrecken angenehm bleibt.

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

1) Gallery Minimal

HEX: #ffffff #f5f5f5 #d9d9d9 #333333 #000000

Stimmung: sauber, modern, kontrastreich

Ideal für: Portfolio-Webseiten und minimalistisches UI

Saubere, galerieähnliche Weißtöne und tiefe Schwarztöne erinnern an gerahmte Drucke und ruhige Museumswände. Die hellen Grautöne dienen als „Luft“ zwischen den Elementen, sodass Überschriften gezielt und nicht hart wirken. Funktioniert wunderbar für Portfolios, Produktseiten und typografisch fokussierte Layouts. Kombiniere mit einem einzelnen Akzent (z.B. Kobalt oder Smaragd) für Call-To-Actions, und setze Fließtext für angenehmes Lesen auf #333333.

Bildbeispiel für Gallery Minimal, erstellt mit media.io

Media.io

Media.io ist ein Online-KI-Studio zur Erstellung und Bearbeitung von Video, Bild und Audio direkt im Browser.

Jetzt kostenlos ausprobieren

2) Tinte auf Papier

HEX: #fffdf8 #f1eee6 #c9c4b8 #3a3a3a #0b0b0b

Stimmung: editoriell, haptisch, zeitlos

Ideal für: Magazinlayouts und Longform-Blogs

Editoriale Wärme und klare Tintentöne erinnern an Buchseiten, Ränder und sorgfältig gesetzte Typografie. Diese Schwarz-Weiß-Kombinationen wirken edel, wenn das gebrochene Weiß dominiert und reines Schwarz für Überschriften oder Zitate reserviert bleibt. Perfekt für Magazine, Blog-Templates und Brand-Storytelling-Seiten. Eine feine Linie in #c9c4b8 trennt Abschnitte, ohne das Bild zu stören.

Bildbeispiel für Tinte auf Papier, erstellt mit media.io

3) Noir-Marmor

HEX: #ffffff #ececec #b8b8b8 #2a2a2a #0f0f10

Stimmung: luxuriös, edel, dramatisch

Ideal für: Premiumpackaging und Beauty-Branding

Polierter Kontrast und kühle Grautöne erinnern an Marmoradern unter Galerielichtern. Das hellste Weiß als Negativraum nutzen und #0f0f10 für Logos, um hochwertige Veredelungen zu betonen. Besonders geeignet für Parfumverpackungen, Pflegeetiketten und exklusive Landingpages. Spot-UV auf dem dunkelsten Ton und mattes Papier für alles andere sorgen für ein taktiles Erlebnis.

Bildbeispiel für Noir-Marmor, erstellt mit media.io

4) Skandinavischer Kontrast

HEX: #fcfcfb #e8e6e1 #b9b5ad #4a4a47 #141414

Stimmung: ruhig, luftig, designorientiert

Ideal für: Interieur, Möbelkataloge und Home-Brands

Sanfte Neutraltöne und zartes Anthrazit erinnern an lichtdurchflutete Räume, Leinenstoffe und klare Möbelkonturen. Diese Schwarz-Weiß-Palette wirkt am besten, wenn Schwarz als Akzent genutzt wird – z.B. für Beschläge, Rahmen oder feine Typografie. Nutze #e8e6e1 als Haupt-Hintergrund, um Blendungen zu vermeiden und Produktfotos natürlich wirken zu lassen. Für Gleichgewicht: Setze #b9b5ad in sekundären UI-Elementen wie Tabs oder technischen Daten.

Bildbeispiel für Skandinavischer Kontrast, erstellt mit media.io

5) Streetwear Mono

HEX: #f8f8f8 #dedede #a7a7a7 #262626 #050505

Stimmung: mutig, urban, energiegeladen

Ideal für: Streetwear-Branding und Merch-Grafiken

Starke Kontraste und coole Grautöne erinnern an frische Tinte auf schweren Shirts und Beton-Hintergründen. Das fast schwarze #050505 für große Wortmarken nutzen, und Mittelgrau #a7a7a7 für dezente Nebenelemente. Perfekt für Hangtags, Lookbook-Cover und auffällige Social-Media-Posts. Für Lesbarkeit auf dunklem Grund Text mit #f8f8f8 invertieren und Highlights sparsam einsetzen.

Bildbeispiel für Streetwear Mono, erstellt mit media.io

6) Weicher Schatten

HEX: #ffffff #f3f4f6 #cfd4da #555c66 #0d0f12

Stimmung: sanft, einladend, modern

Ideal für: Wellness-Apps und SaaS-Onboarding

Sanfte Schatten und kühle Neutraltöne vermitteln ruhige Bewegung, weiche Karten und konzentrierte Fokussierung. Perfekt für UIs, in denen Hierarchie ohne harte Kanten benötigt wird. #f3f4f6 für Oberflächen, #cfd4da für Ränder und #0d0f12 ausschließlich für Haupttext einsetzen. Tipp: Buttons dunkel lassen, aber mit leichtem #555c66-Schatten abheben – wirkt freundlich.

Bildbeispiel für Weicher Schatten, erstellt mit media.io

7) Schachbrett-Klassiker

HEX: #ffffff #f0f0f0 #c8c8c8 #1f1f1f #000000

Stimmung: scharf, klassisch, selbstbewusst

Ideal für: Logos und Identitätssysteme

Scharfe Schwarz-Weiß-Blöcke vermitteln Strategie und zeitlose Eleganz wie ein Schachbrett im Licht. Mittelgrau dient als neutrales Bindeglied, damit im Branding nicht alles um die volle Aufmerksamkeit konkurriert. Funktioniert für Anwaltskanzleien, Modemarken und Tech-Logos. Praktisch: Logo zuerst in #1f1f1f testen – wenn es dort lesbar ist, überall.

Bildbeispiel für Schachbrett-Klassiker, erstellt mit media.io

8) Film-Korn

HEX: #fafafa #e1e1e1 #b0b0b0 #3b3b3b #111111

Stimmung: nostalgisch, cineastisch, texturiert

Ideal für: Fotografie-Presets und Kreativen-Portfolios

Nostalgische Grautöne und tiefes Schwarz erinnern an Filmkorn, Kontaktbögen und Dunkelkammerabzüge. #b0b0b0 übernimmt Bildunterschriften und Metadaten, damit die Bilder im Mittelpunkt stehen. Besonders geeignet für Fotografierseiten, Case Studies und Galerie-Archive. Eine dezente Noise-Overlay von 3–5% sorgt dafür, dass die Töne nicht flach wirken.

Bildbeispiel für Film-Korn, erstellt mit media.io

9) Beton-Loft

HEX: #f7f7f7 #dedede #bdbdbd #4b4b4b #1a1a1a

Stimmung: industriell, strukturiert, geerdet

Ideal für: Architekturpräsentationen und Immobilienbroschüren

Industrielle Grautöne und stabiles Anthrazit erinnern an Betonwände und Stahl-Details. Die helleren Töne als Grundflächen für Grundrisse nutzen, die dunklen für Beschriftungen und Abschnittsüberschriften. Optimal für Architekturdecks, Immobilien-Einseiter und Leitsystem-Konzepte. Linienbreiten konsistent halten und #bdbdbd für sekundäre Rasterlinien verwenden, um Unordnung zu vermeiden.

Bildbeispiel eines Beton-Lofts, generiert mit media.io

10) Zen Sumi

HEX: #fffefc #ebe7e0 #bfb8ad #3d3a36 #0f0e0d

Stimmung: ruhig, organisch, meditativ

Ideal für: Spa-Menüs und Achtsamkeitsmarken

Ruhige Neutraltöne und sumi-ähnliches Schwarz erinnern an Pinselstriche, Reispapier und stille Rituale. Diese Weiß-Schwarz-Kombinationen wirken am besten, wenn das warme Off-White als Leinwand dient und Schwarz gezielt, selbstbewusst eingesetzt wird. Ideal für Spa-Menüs, Meditations-Landingpages und kunsthandwerkliche Verpackungen. Tipp: Ersetze reines Schwarz auf textreichen Seiten durch #0f0e0d, um visuelle Ermüdung zu reduzieren.

Beispielbild von Zen Sumi, generiert mit media.io

11) Hochglanz Mono

HEX: #ffffff #f2f2f2 #cfcfcf #2f2f2f #090909

Stimmung: elegant, edel, technikorientiert

Ideal für: Werbeanzeigen für Technikprodukte und Hero-Sektionen auf Landingpages

Elegante Weißtöne und tiefes, fast schwarzes Grau erinnern an Hochglanzkunststoffe und präzisionsgefertigtes Metall. Verwende #2f2f2f für UI-Komponenten und #090909 für wichtige CTAs oder Produktnamen. Dieses Set ist stark für Technikwerbung, Hero-Sektionen von Startups und Hardware-Detailseiten. Reflexionen sparsam einsetzen – ein heller Akzent genügt für den Premium-Look.

Bildbeispiel von Hochglanz Mono, generiert mit media.io

12) Black Tie Bridal

HEX: #ffffff #f6f1f1 #d8d2d2 #3a3a3a #0a0a0a

Stimmung: elegant, festlich, romantisch

Ideal für: Hochzeitseinladungen und Event-Papeterie

Elegante Neutraltöne mit echtem Schwarz erinnern an Frack, Seidenbänder und Kerzenschein-Empfänge. #f6f1f1 verleiht der Seite Weichheit und sorgt so für Romantik statt Kühle. Perfekt für Einladungen, Antwortkarten und Tischpläne mit klassischer Typografie. Tipp: Nutze #d8d2d2 für Rahmen und Umschläge, damit schwarze Schrift klar, aber nicht überwältigend wirkt.

Bildbeispiel von Black Tie Bridal, generiert mit media.io

13) Monochrome Botanica

HEX: #ffffff #f0f2f0 #c8cec9 #4a4f4b #121513

Stimmung: frisch, ruhig, naturinspiriert

Ideal für: botanische Illustrationen und Öko-Labels

Frische Graugrün- und tiefgraue Töne erinnern an gepresste Blätter und botanische Skizzen. Helle Töne geben Papierstruktur, die dunkelste Nuance eignet sich für Linien und Beschriftungen. Hervorragend für Öko-Verpackungen, Gartenmarken und ruhige Editorial-Akzente. Schneller Tipp: Aquarellflächen in #c8cec9 lassen Pflanzen lebendig wirken, ohne eine kräftige Farbe hinzuzufügen.

Bildbeispiel von Monochrome Botanica, generiert mit media.io

14) Data Dashboard

HEX: #fbfbfb #e9edf2 #c7cfda #39424e #0b0f14

Stimmung: fokussiert, professionell, strukturiert

Ideal für: Analyse-Dashboards und Admin-Oberflächen

Fokussierte Neutraltöne mit kühlem Unterton wirken wie strukturierte Rastersysteme und klare Datenhierarchien. Verwende #e9edf2 für Flächen, #c7cfda für Trenner und #0b0f14 für Schlüsselzahlen, um Aufmerksamkeit zu lenken. Ideal für Dashboards, B2B-Portale und tabellenlastige Screens. Halte Diagramme einfach – eine dunkle Serie plus helle Balken vermeiden visuelle Überladung.

Bildbeispiel von Data Dashboard, generiert mit media.io

15) Museum Label

HEX: #fffffe #f4f4f2 #d0d0cc #2e2e2c #0c0c0c

Stimmung: kuratiert, ruhig, informativ

Ideal für: Beschilderung, Etiketten und Leitsysteme

Kuratiere Neutraltöne erinnern an Museumsbeschriftungen und durchdachte Ausstellungshinweise. Die wärmeren Grautöne unterstützen gutes Lesen auf Distanz ohne Blendeffekte, #0c0c0c bleibt für die wichtigsten Infos reserviert. Funktioniert gut für Schilder, Etiketten und Anleitungskarten. Tipp: Großzügige Ränder nutzen und #d0d0cc für dezente Abschnittsüberschriften – für einen eleganten Look.

Bildbeispiel von Museum Label, generiert mit media.io

16) Night Typewriter

HEX: #fffeff #f1f1f3 #bdbdc4 #3a3a40 #101014

Stimmung: stimmungsvoll, literarisch, edel

Ideal für: Buchcover und Papeterie

Stimmungsvolle Neutraltöne und tiefes Graphit erinnern an nächtliches Schreiben, Farbband und frische Papierkanten. Eine Palette wie diese ist ideal für Buchcover und Papeterie, weil die Typografie die emotionale Wirkung trägt. Verwende #bdbdc4 für Strukturflächen oder Autoreninfos und reserviere #101014 für den Titel. Tipp: eine dezente Papierstruktur hinzufügen, damit helle Töne nicht steril wirken.

Bildbeispiel von Night Typewriter, generiert mit media.io

17) Retro Newsprint

HEX: #fffaf0 #efe3cf #c8b9a3 #4a423a #191512

Stimmung: nostalgisch, warm, vintage

Ideal für: Plakate und Café-Menüs

Vintage-Wärme mit tiefen Espressotönen erinnert an gealtertes Zeitungspapier und klassische Poster. #fffaf0 als Basis, #191512 für Überschriften im Retro-Stil. Ideal für Café-Menüs, Veranstaltungsplakate und Retro-Verpackungen. Tipp: dunkelste Farbe auf nur 10–15 % des Layouts beschränken, #4a423a für den Haupttext nutzen, damit alles einladend bleibt.

Bildbeispiel von Retro Newsprint, generiert mit media.io

18) Minimal Comic

HEX: #ffffff #f3f3f3 #c9c9c9 #2b2b2b #000000

Stimmung: verspielt, kontrastreich, grafisch

Ideal für: Social Media Templates und Creators

Verspielter Kontrast und saubere Grautöne erinnern an Comic-Panels, fette Untertitel und schnelle Pointen. So bleibt die Lesbarkeit auch auf kleinen Displays erhalten. #f3f3f3 eignet sich für Karten-Hintergründe, #2b2b2b für Konturen, reines Schwarz bleibt für wichtige Begriffe reserviert. Tipp: Textblöcke kurz halten und Zeilenhöhe erhöhen, damit das Design nicht gequetscht wirkt.

Bildbeispiel von Minimal Comic, generiert mit media.io

19) Op Art Lines

HEX: #ffffff #ededed #c4c4c4 #2a2a2a #070707

Stimmung: dynamisch, künstlerisch, wirkungsvoll

Ideal für: Musterdesign und Plattencover

Dynamische Kontraste mit gestaffelten Grautönen erinnern an optische Illusionen, Rhythmus und Bewegung. #c4c4c4 eignet sich für Nebenstreifen, damit das Muster nicht überwältigend wird. Ideal für Plattencover, Posterhintergründe oder moderne Muster-Collections. Tipp: Linienbreiten konsistent halten und einen weißen Rand lassen, damit das Design Ruhepunkte hat.

Bildbeispiel von Op Art Lines, generiert mit media.io

20) Keramik Studio

HEX: #fdfdfc #f0eeeb #cfc9c3 #4b4743 #171614

Stimmung: handwerklich, warm, zurückhaltend

Ideal für: Produktseiten für Handgemachtes und Handmade-Branding

Handwerklich warme Neutraltöne erinnern an Töpferstaub, Studioregal und matte Glasuren. #f0eeeb als weicher Untergrund für Produktfotos, #171614 für Preise und wichtige Buttons. Ideal für Keramik-Shops, Handmade-Marktplätze und Portfolios von Kreativen. Tipp: Mit dezenter Körnung im Hintergrund für Struktur sorgen, aber auf schwere Schatten verzichten, damit alles ruhig und ehrlich wirkt.

Bildbeispiel von Keramik Studio, generiert mit media.io

Welche Farben passen gut zu Schwarz-Weiß?

Weiß und Schwarz lassen sich mit fast jedem Akzent kombinieren, am besten passen jedoch sättigte Farbtöne, die auf hohem Kontrast immer noch gut lesbar bleiben – etwa Kobaltblau, Smaragdgrün, Rot oder leuchtendes Cyan.

Für einen weicheren und edleren Eindruck wähle gedeckte Akzente wie Marineblau, Waldgrün, Burgund oder warmes Beige. So bleibt das Monochrom ruhig, erhält aber Charakter.

Für Produkt-UIs und Dashboards reicht oft eine Akzentfarbe plus eine helle Variante derselben als Unterstützung, um klare Stati wie Hover, Aktiv oder Selektiert zu visualisieren.

Wie man eine Schwarz-Weiß-Palette im echten Design verwendet

Starte mit rollenbasierten Grautönen: Wähle ein Hintergrundweiß (oder Off-White), ein Oberflächen-Grau für Karten, ein Randgrau und ein fast schwarzes für Text. So verhinderst du „Reines Schwarz auf Weiß“-Ermüdung, hältst aber den Kontrast hoch.

Schwarz gezielt verwenden: Überschriften, Icons und primäre Aktionen. Mittlere Grautöne tragen die sekundären UI-Elemente (Metadaten, Trenner, deaktivierte Zustände), damit das Design nicht „laut“ wirkt.

Beim Einbinden einer Akzentfarbe: Für einen Einsatzzweck reservieren – etwa CTAs, Highlights oder Links. In Monochrom-Systemen macht konsistente Akzentnutzung das Interface hochwertig.

Erstelle Schwarz-Weiß-Paletten-Visuals mit KI

Wenn du ein Konzept präsentierst oder ein Stimmungsboard erstellst, helfen schnelle Monochrom-Visuals dabei, Typografie, Abstände und Kontraste zu prüfen, bevor du dich auf finale Assets festlegst.

Mit Media.io kannst du Prompts in saubere UI-Mockups, Poster, Packungsszenen und Brand-Sheets verwandeln – und dann mit Licht, Struktur oder Layout-Stil schnell iterieren.

Nutze die oben genannten HEX-Codes in deinem Prompt (oder beschreibe die Töne: Off-White-Papier, warme Grautrenner, fast schwarze Schrift), damit das Ergebnis über das gesamte Set konsistent bleibt.

Weiter: Burgunder-Türkis-Farbpalette