De korte versie
- Een realistisch goud kleurverloop loopt van een diepbruine schaduw via een gedempte okerkleurige middentint naar een bleke crème highlight en dan terug naar schaduw.
- Goud lijkt oranje als de kleuren te verzadigd en te rood zijn en als vlak geel als het een donkere schaduw en een bijna witte highlight mist.
- Metallic goud hangt af van contrast: de donkerste en lichtste stops moeten qua helderheid ver uit elkaar liggen, met een smalle highlight.
- In CSS is goudtekst een gouden lineair kleurverloop dat met background-clip: text op de letters wordt bijgesneden.
- Goud ziet er het kostbaarst uit als je het spaarzaam gebruikt, op een donkere ondergrond zoals zwart, marineblauw of diepgroen.
Op deze pagina
Een goud kleurverloop oogt als echt metaal als het een breed helderheidsbereik beslaat: een diepbruine schaduw, een gedempt okerkleurig midden, een smalle bleke crème highlight en weer terug naar bruin. De klassieke code om mee te beginnen is linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418). De meeste goudverlopen mislukken omdat ze twee felle gele en oranje tinten gebruiken zonder echte schaduw of highlight, wat leest als oranje verf en niet als metaal.
Codes voor een goud kleurverloop om te kopiëren
Waarom je goud kleurverloop oranje lijkt
Op schermen is goud een illusie gemaakt van contrast. Er bestaat geen goudkleurige pixel, alleen bruinen en gelen die zo zijn geschikt dat het oog een weerkaatsend oppervlak leest. Als er iets misgaat, gaat het meestal op een van vier manieren mis.
Oplossing
Waarom
Oplossing
Waarom
Oplossing
Oplossing
Het oranjeprobleem is het meest voorkomende omdat het geel dat je in een kleurkiezer kiest vaak te bleek lijkt, waardoor mensen het warmer maken. Doe dat niet: houd de middentint rond oker, grofweg waar geel in bruin overgaat, en laat contrast de glans leveren. Als je eigenlijk een gewone warme overgang wilt, behandelen geel kleurverloop en oranje kleurverloop die rechtstreeks.
Zo belicht je goud zodat het echt oogt
- 1
Begin bij de schaduw
Kies een diep, warm bruin. Het moet donker genoeg zijn dat witte tekst erop leest.
- 2
Voeg één gedempte middentint toe
Een okerkleurig goud, licht onderverzadigd. Dit is de kleur die mensen zich herinneren, dus het grootste deel van het oppervlak zit hier.
- 3
Plaats een smalle highlight
Een bleek crème in een dunne band, naast het midden. Hoe smaller hij is, hoe glanzender het metaal oogt.
- 4
Keer terug naar schaduw
Val na de highlight terug op een donkerder oker, zodat het licht als weerspiegeling op een gebogen oppervlak leest.
- 5
Voeg een tweede, zwakkere highlight toe
Optioneel: een zachtere opleving bij het andere uiteinde, alsof een tweede lamp de rand raakt. Het laat vlakke vormen rond aanvoelen.
Goud weerkaatst als elk gepolijst metaal, dus dezelfde logica als achter het chroom-teksteffect geldt, alleen warmer en met zachtere overgangen. Goudverlopen met lange, subtiele stukken kunnen na compressie banding laten zien. Banding in kleurverlopen legt uit hoe fijne korrel dat voorkomt.
Goudtekst in CSS
.gold {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 700;
font-size: clamp(2.5rem, 8vw, 6rem);
color: #c79a3c; /* fallback */
background: linear-gradient(
135deg,
#5c3d12 0%, #b8862b 22%, #f3dc9a 45%,
#c79a3c 58%, #7a5418 80%, #d6b062 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-rule {
height: 2px;
border: 0;
background: linear-gradient(90deg, transparent, #b8862b 20%, #f3dc9a 50%, #b8862b 80%, transparent);
}Goudverlopen passen bij schreeflettertypen en letters met hoog contrast op grote formaten. Onder ongeveer 24 pixels lopen schaduw en highlight uit tot een egaal bruin, dus zet kleine tekst in een effen goudtint zoals #c79a3c en controleer het contrast met de achtergrond. Tekst met kleurverloop behandelt de browserondersteuning voor de bijsnijtechniek.
Goudverlopen in druk
Een goud kleurverloop is een plaatje van metaal, geen metaal. In gewone vierkleurendruk komt het uit als bruinen en gelen die glans suggereren, wat prima is voor flyers en posters maar nooit echt weerkaatsend. Voor uitnodigingen, visitekaartjes en verpakkingen waar echte glans telt, gebruiken drukkers metallic inkt of folieprint, en lever je het goudgebied als aparte vlakke vorm in het ontwerp aan.
Druk je wel een kleurverloop, verwacht dan dat het iets donkerder en minder levendig uitkomt dan op het scherm. Maak de highlight een tikje helderder, vermijd heel lange subtiele stukken die banding kunnen geven en vraag een proef voor een grote oplage.
Ontwerpen met goud
Goud leest als kostbaar als het zeldzaam is. Een dunne rand, een monogram, één woord in een kop, een scheidingslijn: op een donkere ondergrond van zwart, marineblauw, ossenbloed of diepgroen. Bedek een hele poster met goud en het wordt koperachtig. Zwart en goud kleurverloop heeft combinaties voor de meest klassieke combinatie en luxe merkontwerp laat zien hoe goud in een ingetogen identiteit past.
Een uitnodiging van 5×7 inch: een donkere ondergrond met warm metallic licht en woorden in rustig crème.
Een juwelierspost waarin goud alleen als licht op het oppervlak verschijnt, nooit als grote vlakke vulling.
Wil je een warme look die achter elk ontwerp leeft in plaats van elke keer opnieuw te worden gebouwd, zoek dan op de Markt van Gradiently met kleurwoorden als ‘warm goud’ of ‘brons’. Elke Mark is een levende achtergrond met licht en korrel, die op elk moment maar één eigenaar kan hebben en zijn rustigste gebied op elk formaat achter je woorden houdt.
Vragen die mensen stellen
Wat is de beste code voor een goud kleurverloop?
Een goed beginpunt is linear-gradient(135deg, #5c3d12, #b8862b, #f3dc9a, #c79a3c, #7a5418): bruine schaduw, okerkleurige middentint, bleke highlight en terug naar schaduw.
Welke hexcodes maken metallic goud?
Combineer een donker brons als #5c3d12, een oud goud als #b8862b, een metallic goud als #c79a3c en een bleke highlight als #f3dc9a.
Waarom ziet mijn goud kleurverloop er oranje uit?
De middentinten zijn te rood en te verzadigd. Schuif ze naar geeloker, verlaag de verzadiging en voeg een donkerbruine schaduw en een bleke crème highlight toe voor contrast.
Hoe maak ik goudtekst in CSS?
Pas een gouden lineair kleurverloop toe als achtergrond en gebruik dan background-clip: text en -webkit-text-fill-color: transparent, met een effen gouden color als terugval.
Welke kleur past het best bij goud?
Zwart, marineblauw, diepgroen, ossenbloed en warm crème. Donkere ondergronden laten goud het helderst en kostbaarst ogen.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel