Shades of Bronze

What this tool does

Bronze is a warm metallic brown with a coppery glow, the colour of statues, medals, and old fittings that have darkened with time. It feels ancient and dignified, celebratory but with weight rather than sparkle. On a screen it is a deep, warm orange-brown, and to build with it you need its range, a pale coppery tone for surfaces and a deep brown for contrast.

That is what this does. You give it a bronze, and it builds the whole run of that colour in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named bronzes and the metal that gave a whole era its name.

How to use it

1. Set your bronze. When it loads the tool shows a bronze and its Hex. Swap in your own through Change Color or the Color Picker, or type a hex in.
2. Set the number of shades. The Color Shades box holds the count, ten by default. Raise it for a smoother run between steps.
3. Read the values. You get the HEX, RGB, HSL, and HSV for every shade, ready to copy.

Bronze is a warm metallic brown, so its lighter steps soften toward pale copper and its darker steps deepen into a rich, woody brown. That warm, substantial character runs the length of the range.

How it works

The tool runs on TinyColor, a colour library that produces the lighter and darker versions of a colour cleanly. It takes your bronze, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

As with gold, a flat colour cannot truly look like polished metal, because metallic shine is made of highlights and reflections. This tool gives you the warm bronze tones, but the gleam comes from how you use them, with gradients and bright highlights, or with foil in print. The colours are the foundation; the shine is something you add on top.

The metal that named an age

Bronze the colour is named after bronze the metal, an alloy of copper and a little tin that was so important to early people that it gave an entire era of human history its name: the Bronze Age. Harder and more useful than the copper that came before it, bronze changed how people made tools, weapons, and art, which is a remarkable legacy for a single colour to carry.

Two of those uses still shape what bronze means. It has long been the favourite metal for cast statues, so much so that a bronze statue is often just called a bronze, which ties the colour to permanence, art, and history. And the bronze medal marks third place on the podium, which links it to achievement and competition. So bronze reads as enduring, accomplished, and quietly ancient, celebratory without the flash of gold.

The named bronzes, with hex codes

Bronze sits among the warm metallic browns, between copper and gold. Here are useful reference points, with a hex for each.

• Bronze (#CD7F32): the standard value, a warm metallic orange-brown.
• Copper (#B87333): a redder, brighter metallic neighbour.
• Brass (around #B5A642): a cooler, more yellow metallic tone.
• Goldenrod (#DAA520): a lighter, more golden relative.
• Dark Bronze (around #665D1E): a deep, aged, olive-brown bronze.

Two things are worth knowing. First, bronze is not a standard web colour, so you cannot call it by name in CSS, and its value shifts a little from chart to chart. Second, it sits in a crowded metallic corner: it is browner and darker than gold, and less red than copper, which is the distinction to hold on to when you are choosing between them.

Where bronze works

Bronze is the grounded, grown-up metallic. It carries the premium feel of a metal but with more warmth and gravity than gold, which makes it a strong choice for heritage and craft brands, awards and certificates, and anything that wants to feel substantial, enduring, and a little ceremonial. It reads as earned rather than showy.

Like other metallics, it works best as a detail rather than a flat fill. Bronze shines on fine lines, borders, badges, foil stamps, and headline text over a dark background, where its warm glow can do its work. The lighter and deeper steps from this tool let you build that properly, a soft copper surface, a rich bronze accent, and a deep brown for contrast, all in the same warm family.

Building a palette from your bronze

Bronze likes a cool, serious backdrop. Charcoal and slate sharpen its warm character and make it feel architectural, while navy adds enough gravity to read as ceremonial or premium. Cream and gold, by contrast, lean into its warmth for something softer and richer.

To build a working set, use the steps from this tool as the spine: a deep brown-bronze for depth, your main bronze as the metallic accent, and a pale copper surface behind content. Then anchor it with a cool, dark colour such as charcoal or navy, and add a deep green if you want something more natural. Keep the bronze sparing, since its strength is feeling weighty and earned rather than decorative.

Questions people ask

What colour is bronze?

A warm, metallic orange-brown, named after the copper-tin alloy. It is deeper and browner than gold and less red than copper, usually meant to suggest a metallic, slightly aged surface.

What is the hex code for bronze?

A commonly used value is #CD7F32 (RGB 205, 127, 50). Bronze is not a standard web colour, so it cannot be called by name in CSS, and charts vary. For an exact match, use a specific hex.

How is bronze different from gold and copper?

Bronze is a darker, browner metallic than gold, which is brighter and more yellow, and it is less red than copper. Bronze reads as warm and substantial rather than opulent.

Can I use my own bronze?

Yes. Paste your exact bronze in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, accents, and text.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Bronze (color), the alloy, its history, and the colour named after it. Wikipedia. https://en.wikipedia.org/wiki/Bronze_(color)