Color guide · Warm colors

Gold Color

Digital gold is a saturated yellow. It can mark an achievement, illuminate a heading or pick out a small detail against a dark background. A flat swatch cannot reproduce the shifting highlights that make polished metal look metallic.

A clear yellow for highlights and celebration#FFD700CSS keyword: gold

Gold color codes

HEX#FFD700
RGBrgb(255, 215, 0)
HSLhsl(50.6, 100%, 50%)
CSS keywordgold

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes gold interesting?

CSS defines gold as #FFD700. The name describes a visual association rather than a material simulation. A convincing metallic illustration normally uses several light and dark bands, reflected surroundings and a clear light source; a single yellow fill will read as paint or a flat icon.

Read the reference: CSS Color: named colors ↗

Things with gold tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #FFD700 match.

Illustrated placeholder · image coming later

Metallic details

Coins and jewelry suggest gold, but reflections create both pale highlights and very dark patches.

Illustrated placeholder · image coming later

Autumn foliage

Some leaves move toward yellow as chlorophyll breaks down; species and conditions affect the result.

Illustrated placeholder · image coming later

Yellow fruit

A ripe yellow fruit is a useful reference for a matte, rather than metallic, gold palette.

A practical color study

Flat yellow versus reflected metal

A metallic-looking object depends on changing value. Try a pale highlight, a gold midtone and a darker warm band, then make the reflection follow the form. A rounded coin and a straight gold border should not use identical highlight shapes.

In a badge, keep the icon legible at its smallest size. A gold surface is decorative; the achievement name and a clear symbol should communicate the result.

Ideas for using gold

01

Web interfaces

Use gold in achievement markers or a short callout on a dark panel. Add text explaining the achievement rather than relying on a gold badge alone.

02

Game art

Build a coin with a bright rim, a midtone face and a darker underside. Use a limited palette so the tiny sprite stays readable.

03

Print and branding

A screen yellow and a metallic ink are different outputs. Ask for a physical proof if the final project depends on the reflective finish.

Watch out: Gold on white is often hard to read. Use dark lettering and check thin borders as well as text.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring gold

Lavender Night

A clear purple light-to-dark ladder

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

14.97:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare gold with another color →

Questions about gold

Does this code make a metallic gold effect?

No. It supplies a flat sRGB color. A metallic effect needs lighting, multiple tones or an appropriate physical finish.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore warm colors →

#FF7F50
Warm colors

Coral

A lively orange with a pink edge

Explore color →
#4B0082
Purple colors

Indigo

A deep violet-blue for strong dark surfaces

Explore color →
#E6E6FA
Purple colors

Lavender

A very pale violet for spacious backgrounds

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide