HomeDevGold color codes
Color tools

Gold color codes

Gold color codes for #FFD700 — HEX, RGB, HSL, HSV, shades, named golds, and copy-ready CSS.

Loading tool…

Loading Preparing tool…

How to use

Follow these steps for a clear answer.

1

Explore the base color

Review HEX, RGB, HSL, and HSV for gold, then browse shades, tints, tones, and hues.

2

Pick a variation or named shade

Click a generated strip or a CSS named gold shade to load codes and harmonies.

3

Copy for CSS

Copy HEX, rgb(), hsl(), or the keyword—and check contrast on white and black.

Color formulas

Core relationships used by this color tool.

CSS gold#FFD700 = rgb(255, 215, 0) = hsl(51°, 100%, 50%)
Shadesame H/S, lower L (mix toward black)
Tintsame H/S, higher L (mix toward white)
ComplementH + 180° (deep blue/indigo)
iHSV (or HSB) keeps hue with saturation and value; HSL uses lightness. Named shades in this family follow CSS Color Module keywords.

Example colors

Common picks with formula and result.

ϟ

Base gold

CSS keyword

color: gold;
#FFD700 · rgb(255, 215, 0)
ϟ

Related shade

Family neighbor

goldenrod
#DAA520
ϟ

UI accent

Background use

background-color: #FFD700;
Pair with readable text
ϟ

Complement direction

Harmony hint

H + 180°
Toward deep blue/indigo

Gold color family specification

Version 1.0.0

Definition
Gold in CSS centers on the keyword gold (#FFD700 / rgb(255, 215, 0) / hsl(51°, 100%, 50%)). Designers use gold families for premium, warm, and celebratory on screens.
What it calculates
Gold family variations (shades, tints, tones, hues), named CSS shades, harmony sets, HEX/RGB/HSL/HSV codes, and contrast vs white/black.
Inputs
  • Selected variation chip, named shade, or harmony swatch
  • Section mode (variations, named shades, harmonies)
Outputs
  • HEX, RGB, HSL, HSV
  • Optional CSS keyword
  • Contrast ratios on white and black
Formula
Shades/tints/tones adjust HSL L or S from base H; harmonies offset H on the hue circle

Gold reads as premium and festive—use for badges, highlights, and brand accents rather than large body text.

For full keyword search across all hues, use HTML color codes. For palette generation, try the color scheme generator or color wheel.

:root {
  --gold: #ffd700;
  --gold-deep: #daa520;
  --gold-ink: #b8860b;
}

.banner {
  background-color: var(--gold);
  color: #ffffff;
}
Popular CSS golds
NameHEXRGBFeel
gold#FFD700255, 215, 0Base keyword
goldenrod#DAA520218, 165, 32Named shade
darkgoldenrod#B8860B184, 134, 11Dark shade
khaki#F0E68C240, 230, 140Named shade
yellow#FFFF00255, 255, 0Named shade
orange#FFA500255, 165, 0Named shade
palegoldenrod#EEE8AA238, 232, 170Light tint
darkkhaki#BDB76B189, 183, 107Dark shade
lemonchiffon#FFFACD255, 250, 205Light tint
lightgoldenrodyellow#FAFAD2250, 250, 210Light tint
lightyellow#FFFFE0255, 255, 224Light tint
moccasin#FFE4B5255, 228, 181Named shade
i Related hues may appear in Named shades when useful for gold-adjacent palettes.
Assumptions
  • Base keyword gold = #FFD700 in sRGB.
  • Named list uses CSS Color Module keywords in/near the gold family.
  • Tool runs locally; nothing is uploaded.
Units
  • HEX: #RRGGBB
  • RGB: 0–255
  • HSL/HSV: hue degrees; S/L/V percent
Boundary conditions
  • Lightness/saturation steps stay within visible ranges (~0–100%).
  • Hue offsets wrap modulo 360°.
Example
gold → #FFD700; complementary toward deep blue/indigo
Validation cases
  • gold → #FFD700
  • goldenrod → #DAA520
  • shade of gold → same hue, lower lightness
  • tint of gold → same hue, higher lightness
Sources
  • CSS Color Module named colors (gold family)
  • Classical shade/tint/tone and hue-harmony geometry
  • WCAG relative-luminance contrast
Calculation version
1.0.0
◉ Yellow color codes › ◉ Orange color codes › ◉ Brown color codes › # HTML color codes › ◌ Color wheel ›

Frequently asked questions

Key distinctions behind the tool.

What is the hex code for gold?

The CSS named color gold is #FFD700, equal to rgb(255, 215, 0) and hsl(51°, 100%, 50%).

What is the difference between gold and goldenrod?

Gold is bright and metallic. Goldenrod is duller and more earthy.

What colors go with gold?

Navy, black, and cream make gold feel luxury. Avoid neon green pairings. Always check text contrast.

Is gold good for body text?

Gold on white can be weak for small text—darken toward darkgoldenrod or use gold as a background accent with dark type.

How do I use gold in CSS?

Use color: gold;, color: #FFD700;, or color: rgb(255, 215, 0); on any property that accepts a <color> value, including background-color and border-color.