Shades of Orange

What this tool does

Orange is warm, loud, and friendly, the colour of sunsets, pumpkins, and safety vests. It sits right between red and yellow and shares their energy, but it is a tricky colour to use well, because a little feels lively and a lot can feel overwhelming. To get it right you usually need a softer orange for backgrounds and a deeper one for contrast.

That is what this does. You give it an orange, and it builds the whole run of that orange 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 oranges, and a fact about the word itself that catches most people out.

How to use it

1. Set your orange. The page loads with an orange, its Hex shown. Use Change Color or the Color Picker to pick another, or paste a hex in.
2. Choose how many shades. The Color Shades number sets the count, ten to start, and turning it up gives a finer gradient.
3. Copy the codes. Each shade lists its HEX, RGB, HSL, and HSV, ready for your stylesheet.

Orange is a warm secondary colour, a mix of red and yellow, so its range stays warm throughout. The lighter steps soften toward peach and apricot, and the darker steps deepen toward rust and brown.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour properly instead of just washing it out. It takes your orange, 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.

Orange gives a satisfying range because it sits between two primaries. The pale end drifts into warm peach tones, and the deep end heads toward burnt orange and brown, which together cover most of what a warm palette needs, from a gentle background to strong, dark text.

The fruit came first

Here is the odd thing about orange: the colour is named after the fruit, and the fruit got there first. Before oranges arrived in the English-speaking world, there simply was no word for this colour. People called it yellow-red, or geoluread in Old English, because that is the best they could do.

The word orange travelled a long way to reach us, passing through a Dravidian language, then Sanskrit, Persian, and Old French, all while meaning the fruit. Only later did it get borrowed to name the colour, with the first recorded use as a colour word arriving around 1512. So unlike almost every other colour, orange is named after a thing in the world rather than the other way round, which is also why, famously, almost nothing rhymes with it.

The named oranges, with hex codes

Orange leans warmer toward red or cooler toward yellow depending on the shade. Here are the common ones, with a hex for each.

• Orange (#FFA500): the standard web orange, a balanced, bright orange.
• Dark Orange (#FF8C00): a slightly deeper, richer orange.
• Orange Red (#FF4500): orange pulled hard toward red, hot and intense.
• Tomato (#FF6347): a soft red-orange, like the fruit.
• Coral (#FF7F50): a gentler orange with a pink lean.
• Pumpkin (around #FF7518) and Tangerine (around #F28500): warm, autumnal, fruit-named oranges.

The pattern to watch is the lean. Orange Red and tomato pull toward red and feel hotter, while the pure orange and the lighter, fruitier tones feel sunnier. Picking the right lean sets whether your orange reads as fiery or cheerful.

What orange says

Orange is the colour of energy, warmth, and good cheer. It feels enthusiastic, creative, and friendly, more playful and approachable than red and more grounded than yellow, which is why it shows up so often in fun, youthful, and energetic branding. Like the fruits and vegetables that wear it, it also reads as healthy and appetising, so food brands reach for it constantly.

It has a second, very practical life as well. Because orange is one of the most visible colours against most backgrounds, it does much of the world's safety work: life jackets, traffic cones, high-visibility workwear, astronaut suits, prison uniforms, and life rafts are orange precisely so they stand out and get seen. So orange spans the playful and the practical, cheerful one moment and a safety signal the next.

Building a palette from your orange

Orange has a standout partner: blue. Blue sits directly opposite orange on the colour wheel, so the two together are vivid and balanced, the warm against the cool. A deeper navy or a soft teal both do the job, and that single pairing will carry a whole palette.

To build it out, use the steps from this tool as the spine: a deep, burnt orange for text and depth, your main orange as the warm feature colour, and a pale, peachy orange surface behind content. Then add a cool counterweight in blue or teal, with white or cream to keep it fresh and a touch of brown for an autumnal feel. Because orange is so energetic, it works best in measured amounts, with neutrals giving the eye somewhere to rest.

Questions people ask

What is the hex code for orange?

The standard web value is #FFA500. It is one of the named CSS colours, so you can also just write "orange" in your stylesheet, while a specific brand orange will have its own hex.

Did the colour or the fruit come first?

The fruit. Before oranges reached the English-speaking world, the colour had no name of its own and was called yellow-red. The colour was named after the fruit, with the first colour use recorded around 1512.

Why is safety gear so often orange?

Because orange is highly visible against most backgrounds. That visibility is why life jackets, traffic cones, high-visibility clothing, and life rafts are orange, so they stand out and are easy to see.

Can I use my own orange?

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

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. Orange (colour), the spectrum, etymology, and named web values. Wikipedia. https://en.wikipedia.org/wiki/Orange_(colour)