CSS Color: Gold
Named CSS color Gold — #FFD700 in HEX, rgb(255, 215, 0) in RGB, hsl(51, 100%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Gold | color: Gold; |
| HEX | #FFD700 | color: #FFD700; |
| RGB | rgb(255, 215, 0) | color: rgb(255, 215, 0); |
| HSL | hsl(51, 100%, 50%) | color: hsl(51, 100%, 50%); |
About Gold
Gold is a warm, luxurious yellow that evokes wealth, quality, and premium value. Its hex value `#FFD700` sits at 51 degrees on the hue wheel with full saturation and 50% lightness. The high red and green channels with zero blue create its characteristic warm metallic appearance.
In web design, Gold is the go-to color for premium tiers, achievement badges, star ratings, and luxury branding. It appears in countless pricing tables to highlight the recommended plan. Combined with dark backgrounds, Gold creates an elegant, high-end aesthetic.
Accessibility with Gold is challenging on light backgrounds. Against white, Gold achieves only about 1.8:1 contrast, making it completely unsuitable for text. Always use Gold as a decorative or background element on light surfaces. Against dark backgrounds (#333 or darker), Gold achieves strong contrast and reads well.
Gold pairs beautifully with navy, black, dark purple, and burgundy. These combinations are classic in luxury and finance branding. In Tailwind CSS, `yellow-500` or `amber-400` provide close approximations, though neither captures Gold's exact warmth.
FAQ
What is the hex code for Gold?
The CSS named color Gold has the hex code #FFD700. You can use it in CSS as color: #FFD700; or simply color: Gold;.
What is Gold in RGB?
In RGB notation, Gold is rgb(255, 215, 0). Use it in CSS as color: rgb(255, 215, 0);.
What is Gold in HSL?
In HSL notation, Gold is hsl(51, 100%, 50%). Use it in CSS as color: hsl(51, 100%, 50%);.
What color category is Gold?
Gold belongs to the Yellow color family in the CSS named colors specification.
Can I use the name "Gold" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Gold; or background-color: Gold; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Gold to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →