Gold Color (#FFD700)

A bright yellow for notices and selected items. CSS value: #FFD700.

Color value

Use HEX, RGB, HSL or a CSS color name, without transparency.

Normalized color

CSS names:

Compare black and white text

This compares black and white text on the selected background. Check the result for your text size before choosing either one.

Color relationships

Tints toward white

Shades toward black

Five steps mix the sRGB channels toward white or black: 0%, 25%, 50%, 75% and 100%. Equal numeric steps may not look equally spaced.

Supported color inputs and errors →

Gold hex and RGB values

The CSS keyword gold gives you #FFD700, or rgb(255, 215, 0).

CSS gold is a bright, flat yellow. Black or navy text on a gold strip can give a notice emphasis without relying on a metallic effect.

Compare black and white text

Text / backgroundRatioAA normalAA largeAAA normalAAA large
#000000 / #FFD70014.97:1PassPassPassPass
#FFFFFF / #FFD7001.40:1FailFailFailFail

Black text has the higher contrast on gold: 14.97:1. The table compares both options against all four text thresholds, using the unrounded values for pass or fail.

Try gold in a layout

The CSS sample below uses black text on #FFD700. Preview a 16 px label and a 24 px heading to compare normal and large text. Swap the colors to try gold as the text color; the ratio stays the same.

.sample {
  background: #FFD700;
  color: #000000;
}

Copy the exact color

Use the converter to copy HEX, RGB or HSL. If you edit in HSL, the final value is rounded to eight-bit sRGB so the preview and exported color agree. For text over an image, gradient or translucent layer, check the finished design separately.

Sources and further reading