# Schwarz-Gold-Farbverlauf: Luxus-Codes mit Geschmack [Canonical HTML page](https://gradiently.design/de/guide/black-and-gold-gradient) Schwarz und Gold ist die Kurzform für Luxus und zugleich die Palette, die am leichtesten billig wirkt. Der Unterschied liegt fast immer darin, wie das Gold aufgebaut ist und wie wenig davon du einsetzt. ## The short version - Ein Schwarz-Gold-Farbverlauf kombiniert einen fast schwarzen Grund mit Gold aus mehreren Stopps, meist ein dunkles Bronze, ein warmes Gold wie #d4af37 und ein blasses Highlight wie #f3e5ab. - Flaches Gold sieht auf dem Bildschirm wie Senf aus, denn echtes Gold wirkt nur dann wie Metall, wenn Licht und Schatten darüber wandern. - Schwarz und Gold wirkt am teuersten, wenn das Gold nur einen kleinen Teil des Designs einnimmt, etwa ein Licht am Rand, eine Linie oder die Schrift. - Goldschrift wie #d4af37 auf fast Schwarz erreicht etwa 9:1 Kontrast und ist damit für Überschriften und kurze Zeilen gut lesbar. - Gedrucktes Gold aus gewöhnlichen Farben wirkt nie metallisch, nimm also Folie oder Metallicfarbe, wenn es auf das Echte ankommt. Ein **Schwarz-Gold-Farbverlauf** stellt einen fast schwarzen Grund einem Gold gegenüber, das aus mehreren Stopps statt aus einer flachen Farbe aufgebaut ist: ein dunkles Bronze wie `#8a6d1f`, ein warmes Gold wie `#d4af37` und ein blasses Highlight wie `#f3e5ab`. Diese Abstufung lässt Gold wie Metall wirken. Geschmackvolle Versionen verwenden zudem viel weniger Gold, als du erwarten würdest, oft nur ein Glühen an einem Rand oder die Schrift selbst. Hier findest du die Codes, das CSS für metallische Goldschrift und die Regeln, die die Kombination hochwertig halten. ## Warum flaches Gold billig wirkt Gold ist eigentlich keine Farbe, sondern ein Material. Was du als Gold erkennst, ist ein Muster aus Reflexionen: dunkles Olivbraun in den Schatten, warmes Gelb in den Mitteltönen, fast Weiß dort, wo das Licht trifft. Ein einzelner Hex-Wert fängt nur eines davon ein, deshalb wirkt ein flaches `#ffd700` gelb oder senffarben statt metallisch. Ein Verlauf mit mindestens drei Stopps leistet, was das Licht täte. - Tiefschwarz: #0a0a0a - Warmes Schwarz: #1a1408 - Bronzeschatten: #5c4813 - Antikgold: #8a6d1f - Dunkle Goldrute: #b8860b - Metallisches Gold: #d4af37 - Honig: #e6c76a - Champagner: #f3e5ab Zwei Schwarztöne und sechs Goldtöne. Ein überzeugendes Metall nutzt mindestens drei Goldtöne aus dieser Reihe, nie nur einen. ## Codes für metallische Gold-Verläufe Das sind die Goldfüllungen selbst: für eine Linie, ein Abzeichen, ein Monogramm oder Verlaufsschrift. Jede läuft von dunkel über hell zu dunkel, was den Eindruck einer gewölbten, polierten Fläche erweckt, die Licht einfängt. - Poliertes Gold: `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)` - Gold von oben beleuchtet: `linear-gradient(180deg, #f3e5ab 0%, #d4af37 40%, #8a6d1f 75%, #5c4813 100%)` - Antiker Barren: `linear-gradient(90deg, #5c4813 0%, #b8860b 25%, #e6c76a 50%, #b8860b 75%, #5c4813 100%)` - Gebürsteter Champagner: `linear-gradient(120deg, #b08d57 0%, #e8d3a8 45%, #b08d57 70%, #7a5c33 100%)` Metallische Goldfüllungen. Die Symmetrie, an beiden Enden dunkel und in der Mitte hell, wirkt wie eine gewölbte Fläche. ## Schwarz-Gold-Verläufe als Hintergrund Beim Hintergrund kehrst du die Proportionen um: Das Schwarz leistet fast die ganze Arbeit, und das Gold kommt als Glühen, Horizont oder leichte Wärme in einer Ecke. Ein warmes Schwarz mit einem Hauch Braun passt besser zu Gold als ein reines oder blaustichiges Schwarz. - Goldlicht in der Ecke: `radial-gradient(circle at 80% 15%, #d4af37 0%, #5c4813 18%, #1a1408 45%, #0a0a0a 80%)` - Goldhorizont: `linear-gradient(180deg, #0a0a0a 0%, #1a1408 60%, #8a6d1f 100%)` - Bühnenrampe: `radial-gradient(ellipse at 50% 120%, #b8860b 0%, #3d2f0c 35%, #0a0a0a 75%)` - Goldrand: `linear-gradient(135deg, #0a0a0a 0%, #14110a 70%, #5c4813 90%, #d4af37 100%)` Schwarz-Gold-Hintergründe. In jedem nimmt das Gold deutlich weniger als ein Viertel des Rahmens ein. Dunkle Verläufe bekommen mehr Streifen als alle anderen, und ein Goldglühen auf Schwarz ist ungefähr der schlimmste Fall. Eine feine Körnungsebene behebt das und lässt die Fläche nebenbei wie Papier oder Samt wirken. Mehr Gründe findest du unter [Schwarze Verläufe](https://gradiently.design/de/guide/black-gradient). ## So bleibt Schwarz-Gold geschmackvoll ### Wirkt billig - Flaches Gelbgold wie `#ffd700` - Gold über der Hälfte des Designs - Goldene Leuchthöfe hinter jedem Wort - Gold auf reinem Blauschwarz - Verzierte Schrift, Gold und Prägeeffekte auf einmal ### Wirkt teuer - Gold aus drei oder mehr Stopps - Gold an einer Stelle: ein Licht, eine Linie oder der Name - Schlichte, gut gesetzte Schrift ohne Effekte - Gold auf warmem Schwarz - Eine elegante Schrift, großzügige Ränder Zurückhaltung ist der ganze Trick. Luxusverpackungen zeigen meist viel leere dunkle Fläche und wenig Metall, damit das Metall kostbar wirkt. Auf dem Bildschirm gilt dasselbe. [Luxus-Farbpaletten](https://gradiently.design/de/guide/luxury-color-palettes) und [Luxus-Design](https://gradiently.design/de/guide/luxury-design) behandeln die weitere Formensprache. ## Goldschrift auf einem schwarzen Verlauf Gold liest sich gut auf Schwarz. Die Werte unten nutzen die WCAG-Kontrastformel; 4,5:1 ist das übliche Minimum für kleine Schrift und 3:1 für große Überschriften. Heb dir die dunkleren Antikgoldtöne für Linien und Rahmen auf, nicht für Wörter. | Hintergrund | Text | Kontrast | Einsatz | | --- | --- | --- | --- | | Tiefschwarz `#0a0a0a` | Metallisches Gold `#d4af37` | 9,4:1 | Überschriften und kurze Zeilen | | Tiefschwarz `#0a0a0a` | Dunkle Goldrute `#b8860b` | 6,1:1 | Zwischenüberschriften, Labels | | Warmes Schwarz `#14110a` | Gold `#c9a227` | 7,8:1 | Überschriften | | Warmes Schwarz `#1a1408` | Champagner `#f3e5ab` | 14,5:1 | Fließtext | | Tiefschwarz `#0a0a0a` | Antikgold `#8a6d1f` | 4,0:1 | Nur große Schrift oder Linien | Für lange Texte liest sich Champagner angenehmer als gesättigtes Gold. Metallische Verlaufsschrift funktioniert für ein einzelnes Wort oder einen kurzen Namen. Das CSS unten beschneidet den polierten Goldverlauf auf die Buchstaben und behält eine einfarbige Gold-Ersatzfarbe. [CSS-Verlaufsschrift](https://gradiently.design/de/guide/css-gradient-text) behandelt die Barrierefreiheit. ```css .luxe { background-color: #0a0a0a; background-image: radial-gradient(circle at 80% 15%, #5c4813 0%, #1a1408 35%, #0a0a0a 75%); color: #f3e5ab; } .luxe h1 { color: #d4af37; /* fallback */ background: linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.04em; } ``` Ein warmer schwarzer Bereich mit schwachem Goldlicht, Fließtext in Champagner und einer Überschrift in poliertem Gold. Ein Schmuck-Post im Hochformat mit blassgoldener Schrift auf warmem Schwarz mit einem schwachen Goldglühen in einer Ecke Ein Juwelier-Post: warmes Schwarz, ein Goldlicht, schlichte Schrift. Eine vertikale Silvester-Story mit champagnerfarbener Schrift auf Schwarz, das unten in einen Goldhorizont übergeht Eine Silvester-Story mit einem Goldhorizont am unteren Rand. ## Schwarz und Gold im Druck Normaler Vierfarbdruck kann Metall nicht wiedergeben. Ein Goldverlauf in CMYK wird zu bräunlichem Gelb, so sorgfältig du ihn auch aufbaust. Für Einladungen, Visitenkarten und Verpackungen, bei denen Gold zählt, nimm Heißfolie oder Metallicfarbe für die goldenen Teile und behalte den Verlauf für den Bildschirm. [Verläufe im Druck](https://gradiently.design/de/guide/print-gradients) erklärt die Möglichkeiten, und [RGB vs. CMYK](https://gradiently.design/de/guide/rgb-vs-cmyk) erklärt, warum Bildschirm und Papier sich unterscheiden. ## Wo du Schwarz und Gold einsetzt Schwarz und Gold passt zu Schmuck, Uhren, Parfüm, Spirituosen, Hotels, Barbershops, Black-Tie-Events und Silvester. Es verträgt sich auch gut mit tiefen Weinroten; siehe [Burgunder-Verläufe](https://gradiently.design/de/guide/maroon-gradient). Wenn du einen dunklen, warmen Look willst, der nur dir gehört, ist ein Gradiently Mark ein Rezept aus Farben, Materialien, Licht und Körnung statt einer flachen Füllung. Jeder Mark hat zur Zeit genau einen Besitzer, und sobald du dir einen sicherst, kann ihn ein Mitbewerber nicht exportieren. ## FAQ ### Was ist der Hex-Code für metallisches Gold? Ein weit verbreitetes metallisches Gold ist `#d4af37`. Für ein überzeugendes Metall kombinierst du es in einem Verlauf mit einem dunklen Bronze wie `#8a6d1f` und einem blassen Highlight wie `#f3e5ab`. ### Wie erstelle ich einen Goldverlauf in CSS? Nimm einen symmetrischen linearen Verlauf, der dunkel, hell, Highlight, hell, dunkel läuft, zum Beispiel `linear-gradient(135deg, #8a6d1f 0%, #d4af37 30%, #f3e5ab 50%, #d4af37 70%, #8a6d1f 100%)`. ### Ist Goldschrift auf Schwarz lesbar? Ja. Metallisches Gold `#d4af37` auf fast Schwarz erreicht etwa 9:1 Kontrast. Für lange Passagen liest sich ein blasseres Champagnergold angenehmer. ### Warum wirkt mein Schwarz-Gold-Design billig? Meist, weil das Gold ein einzelnes flaches Gelb ist, es zu viel davon gibt oder es Leuchthöfe und Prägeeffekte trägt. Baue Gold aus mehreren Stopps auf und setze es an einer Stelle ein. ### Kann ich einen Schwarz-Gold-Verlauf drucken? Das geht, aber CMYK-Gold sieht bräunlich gelb statt metallisch aus. Nimm Folie oder Metallicfarbe für Gold, das glänzen soll.