TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

#FFD700: CSS gold color codes, contrast and shades

By TechCompare · Updated · How we check

#FFD700 is rgb(255, 215, 0), the CSS named color gold. It needs dark text: black scores 14.97:1, while white text and gold text on a white page both sit at just 1.40:1.

#FFD700

Color Codes

  • HEX#FFD700
  • RGBrgb(255, 215, 0)
  • HSLhsl(51, 100%, 50%)
  • OKLCHoklch(88.68% 0.1822 95.33)

Text on #FFD700

White Text

Aa

The quick brown fox jumps over the lazy dog.

1.40:1APCA Lc -21.9

  • AA Normal (4.5:1)Fail
  • AA Large (3:1)Fail
  • AAA Normal (7:1)Fail
  • AAA Large (4.5:1)Fail
Check White Text in Contrast Checker

Black Text

Aa

The quick brown fox jumps over the lazy dog.

14.97:1APCA Lc 84.5

  • AA Normal (4.5:1)Pass
  • AA Large (3:1)Pass
  • AAA Normal (7:1)Pass
  • AAA Large (4.5:1)Pass
Check Black Text in Contrast Checker

WCAG 2 ratios are the same whichever color is the text, so they also hold for #FFD700 text on a white or black page. APCA is a newer method that isn't part of any WCAG standard, and a minus sign means light text on dark.

#FFD700 in the Color Picker. Tweak it with HSL or OKLCH sliders, or compare it with a second color.
Edit in the full tool

#FFD700 turns red all the way up, green most of the way and blue off. The result is a bright, warm yellow that CSS calls gold. Don't expect metal. A flat hex can't shine, so gold on a screen is a yellow, and designers who want a metallic look use gradients or darker browns. The cards above give its codes and test white and black text on it. Below are 4 lighter and 4 darker shades.

Shades

Same hue and chroma in OKLCH, with even steps of lightness. Open any shade in the Color Picker.

  1. #FFF597
  2. #FFED6E
  3. #FFE532
  4. #FFDE1D
  5. Base#FFD700
  6. #CCA800
  7. #987C00
  8. #675200
  9. #3A2C00

Nearest Named Colors

  • CSS Name

    gold

    #FFD700

    ExactΔE OK 0.000

  • Tailwind 4

    amber-300

    oklch(87.9% 0.169 91.605)

    Outside sRGB, so the closest hex is #FFD230

    Very CloseΔE OK 0.019

  • Tailwind 3

    yellow-300

    #FDE047

    CloseΔE OK 0.026

About #FFD700

Most of CSS's named colors, gold included, come from the X11 color list that Unix systems used. Its neighbor goldenrod, #DAA520, is a calmer choice when gold looks too loud. It's darker, at an OKLCH lightness of 75.16% against 88.68%, and less saturated, with a chroma of 0.1469 against 0.1822.

Text is where gold gets tricky. Gold text on a white page scores 1.40:1, far under the 4.5:1 AA asks for, and it's hard to read at any size. Flip it, and black text on a gold fill gets 14.97:1, past AAA. APCA, a newer method that isn't part of any WCAG standard, agrees, with black text at Lc 84.5 and white text at Lc -21.9.

Tailwind 4's amber-300, oklch(87.9% 0.169 91.605), sits only 0.019 away in OKLab. That value reaches past sRGB, so on a wide gamut screen it can look a little richer than #FFD700.

Verdict

Use #FFD700 as a fill: badges, highlights, stars, warning banners and chart series, with black text on top. Never use it as text or thin icons on white, at 1.40:1.

For gold colored text on a light page, go down the shade scale. The first two darker steps still fail, and the third, #675200, is the first to pass at 7.54:1. By then it reads as an olive brown rather than gold. Click a shade to open it in the Color Picker.

More Color scenarios

Hex to RGB
A hex color code is three RGB numbers written in base 16.
View details
RGB vs CMYK
Screens add light and print adds ink. See one color in both, and why a plain CMYK formula can't promise a print match.
View details
HSL color model
Hue, saturation and lightness, with three live sliders and a table of common colors in hex, RGB and HSL.
View details

Related guides

#800080
CSS purple, a deep color that takes white text instead.
View guide
#00FF00
CSS lime, another bright color that only works with dark text.
View guide
#FF0000
Pure red, a pairing color for gold that needs care with text.
View guide
Accessible color palettes
How to build a palette where every color has text that passes.
View guide

Frequently asked questions

What color is #FFD700?
It's gold, one of the CSS named colors: rgb(255, 215, 0), hsl(51, 100%, 50%) or oklch(88.68% 0.1822 95.33). You can write color: gold instead of the hex.
Can I use #FFD700 for text?
Not on a white or light background. It scores 1.40:1 against white, which fails WCAG at every size. On a black or very dark background it works well, at 14.97:1. For gold toned text on white, use #675200 from the shade scale.
What's the difference between gold and goldenrod?
Goldenrod, #DAA520, is darker and more muted than gold. Its OKLCH lightness is 75.16% against 88.68%, and its chroma is 0.1469 against 0.1822, so it looks more like old brass than a bright yellow.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool