Shades of Amber

What this tool does

Amber is a warm golden glow, sitting right between yellow and orange, the colour of honey and old tree resin held up to the light. It is rich and inviting, but it is also vivid, so it tends to work best in measured amounts. To use it well you need its range, a paler amber for surfaces and a deeper one for contrast.

That is what this does. You give it an amber, 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 ambers and the two very different things the colour is known for.

How to use it

1. Set your amber. When it loads the tool shows an amber and its Hex. Swap in your own with Change Color or the Color Picker, or type a hex straight in.
2. Set the number of shades. The Color Shades box holds the count, ten by default, and a higher value smooths the gradient.
3. Read the values. Every shade carries its HEX, RGB, HSL, and HSV beside it, ready to copy.

Amber is a warm golden tone, so its lighter steps move toward pale gold and honey, while the darker steps deepen into bronze and brown. That warm character holds across the whole range.

How it works

The tool runs on TinyColor, a colour library that handles each lighter and darker step cleanly. It takes your amber, 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.

Because amber is a bright, warm golden colour, its lighter steps glow like pale honey rather than washing out, and its darker steps turn to deep bronze and amber-brown. That makes a single amber a rich starting point for a warm, autumnal palette.

Old resin and a traffic signal

Amber the colour is named after amber the material, the fossilised resin of ancient trees that has been traded since at least 3000 BCE, carried from the Baltic coast down to the Mediterranean. Part of what made it precious is that insects and leaves often got caught and preserved inside it, which is why amber can hold a perfectly preserved ant tens of millions of years old. That gives the colour a deep sense of warmth, rarity, and preservation.

It also has a much more everyday job. Early in the twentieth century, amber was standardised as the cautionary middle light of the traffic signal, the one between green and red, by the international body that sets lighting standards. So the same colour that means ancient and precious also means slow down, get ready, change is coming, which is exactly the feeling it carries in a design.

The named ambers, with hex codes

Amber sits in the warm band between yellow and orange. Here are useful reference points, with a hex for each.

• Amber (#FFBF00): the standard value, a warm golden orange-yellow, the colour of honey.
• Saffron (around #F4C430): a slightly softer, more yellow golden tone.
• Marigold (around #EBA832): a touch more orange and earthy.
• Gold (#FFD700): a brighter, more yellow neighbour with a metallic feel.

The thing to know is that amber is not a standard web colour, so it has no single fixed value, and it lives in a crowded warm corner with gold, saffron, and honey. It is golden like gold but warmer and more orange, and it sits one step toward orange from a pure yellow. A hex is the way to fix exactly where your amber lands.

Where amber works

Amber is warm, glowing, and optimistic, the colour of sunlight and honey, so it makes designs feel inviting and energetic without the aggression of red. It suits warm, premium, and natural brands, autumn and harvest themes, and anything that wants to feel cosy and golden rather than cold and clinical.

It has a second, quieter use in interfaces, where amber is the natural colour for caution and in-between states, a warning that is not yet an error, borrowing straight from the traffic light. In both roles, amber is best in controlled doses. It is vivid enough that a whole screen of it tires the eye, so it shines as an accent, a highlight, or a single golden hero element, with calmer neutrals around it.

Building a palette from your amber

Amber's warmth begs for a cool partner. Deep navy and teal both sit far enough across the wheel to make amber glow, the warm gold against the cool blue-green, which is a reliable, striking pairing. That contrast alone can carry a palette.

To build it out, use the steps from this tool as the spine: a deep bronze-amber for text and depth, your main amber as the golden feature colour, and a pale honey surface behind content. Then add a cool counterweight in navy or teal, or lean fully warm with cream, gold, rust, and brown for a rich autumn scheme. Keep the amber itself measured, so its glow stays special rather than overwhelming.

Questions people ask

What colour is amber?

A warm, golden yellow-orange, close to the colour of honey or raw tree resin. It sits between yellow and orange on the wheel, richer and deeper than a pure yellow.

What is the hex code for amber?

A commonly used value is #FFBF00 (RGB 255, 191, 0). Amber is not a standard web colour, so charts vary slightly. For an exact match, use a specific hex.

How is amber different from gold and orange?

Amber sits between yellow and orange and reads as warm and honeyed. Gold is a brighter, more yellow, metallic-looking tone, and orange is warmer still and closer to red. Amber is the golden middle ground.

Can I use my own amber?

Yes. Paste your exact amber 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. Amber (color), the resin, the traffic signal, and the colour. Wikipedia. https://en.wikipedia.org/wiki/Amber_(color)