Skip to content
ColorPlum

Colors · value from the xkcd color survey (2010)

Bronze color: hex code #A87900, RGB and palettes

Bronze is #A87900 (RGB 168, 121, 0), the xkcd survey value: a dark golden yellow-brown. Black text on it measures 5.39:1 and white only 3.88:1, so pair it with dark lettering.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchBronzemedium-dark, saturated brown
HEX
#A87900
RGB
rgb(168, 121, 0)
HSL
hsl(43, 100%, 33%)

Best text on it: black at 5.39:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Bronze

  • HEX#A87900
  • RGBrgb(168, 121, 0)
  • HSLhsl(43, 100%, 33%)
  • HSV43°, 100%, 66%
  • CMYK0%, 28%, 100%, 34%
  • Lablab(54.5% 12.7 60)
  • OKLCHoklch(60.7% 0.125 81.3)
  • Decimal11041024

Tints, shades and tones

From white to black in 10% steps, with Bronze in the middle. Tap a code to copy it.

  1. 90%#F6F2E6
  2. 80%#EEE4CC
  3. 70%#E5D7B3
  4. 60%#DCC999
  5. 50%#D4BC80
  6. 40%#CBAF66
  7. 30%#C2A14D
  8. 20%#B99433
  9. 10%#B1861A
  10. Base#A87900
  11. 10%#976D00
  12. 20%#866100
  13. 30%#765500
  14. 40%#654900
  15. 50%#543D00
  16. 60%#433000
  17. 70%#322400
  18. 80%#221800
  19. 90%#110C00

Tones (mixed with gray)

  1. 10%#A47A0D
  2. 20%#A07A1A
  3. 30%#9C7B26
  4. 40%#987C33
  5. 50%#947D40
  6. 60%#907D4D
  7. 70%#8C7E5A
  8. 80%#887F66
  9. 90%#847F73

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #140F00
  • #5B4200
  • #A87900
  • #F4B000
  • #FFCA42

Bronze in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Bronze with its complement, its triad and its tint and shade
  • Bronze
  • Triad #00A879
  • Triad #7900A8
  • Complement
  • 50% tint
  • 50% shade

Bronze in use

New collectionAutumn edit

Card body text stays dark for reading; bronze carries the header and the button.

Shop nowTag

Headline in Bronze

A paragraph with a link in dark text, because this color is too light for text on white; use it for fills instead.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#A87900
  • Protanopia (no red cones)#8C7A00
  • Deuteranopia (no green cones)#97860C
  • Tritanopia (no blue cones)#B86B66

Contrast and readability

PairingRatioWCAG 2.2
as text on white3.88:1AA AA large AAA
as text on black5.39:1AA AA large AAA
white text on it3.88:1AA AA large AAA
black text on it5.39:1AA AA large AAA
on your background3.39:1AA AA large AAA

Export

:root {
  --bronze: #a87900;
  --bronze-rgb: 168 121 0;
  --bronze-on: #000000;
}
On this page

Bronze is the name of a metal alloy, mostly copper with tin, and it is the third-place color in the gold, silver and bronze of medals. As a screen color it is a warm, muted gold that leans brown. The CSS list has no bronze, so this page shows #A87900 from the xkcd survey, the color people most often typed when asked to name it.

What's in the code

The RGB values are 168, 121, 0: strong red, medium green and no blue at all. That is why it reads as a yellow that has been darkened rather than a true brown. In HSL it is hue 43°, 100% saturation, 33% lightness. CMYK is 0%, 28%, 100%, 34% and the decimal form is 11041024. A metallic surface in real life has highlights and reflections that a flat code cannot show, so a printed bronze foil will look different from this flat swatch.

The closest survey names are "mustard brown" (#AC7E04, 1.5 away in OKLab), "golden brown" (#B27A01, 1.8) and "yellowish brown" (#9B7A01, 2.2). On the CSS side, darkgoldenrod (#B8860B) is the nearest at 4.5, and olive is 6.7 away, a duller green-leaning cousin.

Contrast: which text goes on it

Bronze sits in the awkward middle of the lightness scale, so check before choosing text.

  • Black on bronze: 5.39:1, which passes AA for normal text. A very dark brown such as #110C00 gives 5.01:1, a little less.
  • White on bronze: 3.88:1. That is fine for a large bold heading but too weak for small text.
  • Bronze as text: on white it is the same 3.88:1, so use it for icons, borders and display type rather than paragraphs.
  • A darker bronze for text: the 40% shade, #654900, reaches 7.48:1 on #F6F2E6.

Its complement is a strong blue, #002FA8, which gives a classic gold-and-navy look. Triadic partners are teal-green #00A879 and violet #7900A8.

Worked example

Picture a school sports day with a bronze, silver and gold certificate set for the winners. For the third-place certificate you use a bronze border and ribbon shape, and put the child's name in a deep brown, #432000. You test the name against the bronze ribbon and find that this combination measures only 3.73:1, which is too weak, so you switch the ribbon lettering to black, which gives 5.39:1. The main body text goes on a cream tint, #F6F2E6, in the darker shade #654900 at 7.48:1. The result prints clearly on a basic office printer, with the bronze used only for decoration.

For the brighter sibling, see gold. For a redder metal, try copper, and for a plainer golden brown, look at tan. If you want to try your own text pairs, use the contrast checker.

Sources

  1. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  2. xkcd, Color survey results (blog post by Randall Munroe, 2010; checked 2026-11-10) blog.xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org