Gold Color

Gold — The Color of Prestige and Achievement

#FFD700Gold

Color Values

HEX#FFD700

RGBrgb(255, 215, 0)

HSLhsl(51°, 100%, 50%)

CSSgold

Shade Palette

#FFFDE7

100

#FFF9C4

300

#FFF176

500

#FFEE58

700

#F9A825

900

#E65100

Complementary Color

↔

#0028FF

Ultramarine Blue

Analogous Colors

#FFC107

Amber

#FFEC47

Lemon Yellow

CSS Usage

CSS

/* By name */
color: gold;
background-color: gold;

/* By HEX */
color: #FFD700;
background-color: #FFD700;

/* By RGB */
color: rgb(255, 215, 0);

/* By HSL */
color: hsl(51deg, 100%, 50%);

/* With opacity */
color: rgba(255, 215, 0, 0.8);
color: hsl(51deg 100% 50% / 80%);

Gold (#FFD700) is a light, bright color with very low contrast on white backgrounds (approximately 1.4:1 contrast ratio). Never use it for text on light backgrounds. It works best as an icon color, decorative accent, or on dark backgrounds where it truly shines.

Gold (#FFD700) mimics the appearance of the precious metal and symbolizes wealth, achievement, excellence, and luxury. In UI design, it is most commonly used for star ratings, trophies, premium badges, and award elements. Gold shines especially well on dark backgrounds — the classic black-and-gold combination is a hallmark of luxury branding. On light backgrounds, gold lacks sufficient contrast for text, so it is best reserved for icons, decorative elements, and highlights.