Black text 14.9:1
Gold ranges from bright Golden Poppy to antique Old Gold and deep Golden Brown.
Here are 25 named shades of gold with HEX, RGB, HSL and CMYK codes, from metallic golds to warm goldenrods.
A flat hex code cannot shine like metal - tips below show how to make gold look golden on screen.
Goldenrod (Crayola) - lightest25 shades sorted light to darkdarkest - Golden Brown
Download all 25 shades of gold
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Gold (#FFD700), evenly spaced in OKLCH lightness, with the darker steps turned 25° warmer so they read as warm browns rather than olive. Paste any other gold to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)cmyk(0%, 16%, 100%, 0%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #fdf7df;
--brand-100: #fdeba6;
--brand-200: #ffd700;
--brand-300: #e7bc00;
--brand-400: #c89c00;
--brand-500: #ae8300;
--brand-600: #946a00;
--brand-700: #7c5600;
--brand-800: #674400;
--brand-900: #553600;
--brand-950: #372103;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Using the same color wheel maths as our Color Wheel, these are the harmonies for Gold (#FFD700). Click a group to open it on the wheel.
#0028FF Blue
Analogous
Next-door neighbors - calm and harmonious
#FF5700 Pantone Orange#A8FF00 Chartreuse
Triadic
Three evenly spaced hues - bold and balanced
#00FFD7 Turquoise Blue#D700FF Psychedelic Purple
Split complementary
The two neighbors of the opposite - contrast with less tension
#00A8FF Cyan Process#5700FF Violet
Gold stands for wealth, success, prestige and celebration - medals, awards, crowns and wedding rings.
On a screen there is no metallic paint, so gold is really a warm yellow or yellow-brown. Metallic Gold (#D4AF37) is the value most designers use for a realistic gold, while CSS gold (#FFD700) is much brighter.
Real metal looks golden because of its highlights and shadows. That is why gold logos and buttons usually use a gradient from a light gold to a darker goldenrod.
See gold in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact gold? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Gold is #FFD700, which is rgb(255, 215, 0) and hsl(51, 100%, 50%). For print it is about 0% cyan, 16% magenta, 100% yellow and 0% black. It is also a CSS color keyword, so you can simply write gold in your stylesheet.
There is no fixed number - any gold can be made lighter, darker or more muted. This page lists 25 named shades, from Goldenrod (Crayola) (#FCD667) to Golden Brown (#996515). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any gold.
Gold (#FFD700) has a contrast ratio of 1.40:1 on white and 14.97:1 on black, so it reads best on dark backgrounds or with dark text on top of it. For gold text on white, pick a deeper shade such as Gold Fusion (#85754E), which reaches 4.51:1. Test any pair with the Contrast Checker.
Metallic Gold is #D4AF37. It is darker and more muted than CSS gold (#FFD700), so it looks closer to real gold.
Rose gold is a pinkish metal alloy, and its screen color is usually given as #B76E79 - a dusty pink rather than a yellow gold. It fits better with shades of pink.
Gold pairs beautifully with black, navy, emerald green, burgundy and cream. For weddings, combine it with white and blush; for luxury branding, with black.