Shades of Coral

What this tool does

Coral is a warm, friendly mix of pink and orange, lively without being loud, the colour of a tropical reef at its brightest. It feels sunny and approachable, which makes it a popular choice, but to build a design around it you need its range, a softer coral for backgrounds and a deeper one for contrast.

That is what this does. You give it a coral, 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 corals and the living thing the colour is named after.

How to use it

1. Set your coral. When the page loads it shows a coral and its Hex. Pick your own with Change Color or the Color Picker, or type a hex straight in.
2. Set how many shades. The Color Shades box holds the count, ten by default. Raise it for a smoother run, lower it for bigger jumps.
3. Read off the codes. Every shade carries its HEX, RGB, HSL, and HSV beside it, so you lift the format you need.

Coral sits between pink and orange, so as you lighten it the steps drift toward peach, and as you darken them they head toward terracotta. Both directions are useful in a warm palette.

How it works

The tool runs on TinyColor, a colour library that handles lightening and darkening properly instead of just fading the colour. It takes your coral, 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 coral is a warm, fairly saturated colour, its lighter steps stay sunny rather than washing out grey, softening into peach and shell tones. The darker steps deepen into earthy terracotta and brick, so a single coral hands you a whole warm range.

The colour named after a reef

Coral the colour is named after coral the living thing, the reef-building sea creatures whose pink and orange skeletons have been admired and worn as ornament for centuries. The colour borrows that warm, pinkish-orange glow, which is why it carries a sense of the tropical, the natural, and the alive.

The colour had a big moment in 2019, when Pantone, the company whose colour standards the design world follows, named Living Coral its Colour of the Year. They described it as a warm, life-affirming shade, an antidote to all the cool blues of screens, and for a while it was everywhere, from fashion to phone cases. That choice captured exactly what coral does best: it feels warm, sociable, and optimistic.

The named corals, with hex codes

Coral sits in the warm zone where pink, orange, and salmon meet. Here are useful reference points, with a hex for each.

• Coral (#FF7F50): the standard web coral, a warm, bright pink-orange.
• Light Coral (#F08080): a softer, pinker coral despite the name.
• Living Coral (around #FF6F61): Pantone's 2019 shade, a vivid, slightly richer coral.
• Salmon (#FA8072): a close, slightly pinker neighbour named after the fish.

The useful thing to know is where coral sits among its neighbours. It is brighter and more orange than salmon, warmer and more orange than a plain pink, and deeper and more saturated than peach. If you need a precise coral, a hex is the way to pin exactly how pink or orange yours leans.

Where coral works

Coral is the approachable warm colour. It has the energy of orange and the softness of pink, so it feels friendly and inviting rather than aggressive, which makes it a natural fit for lifestyle, wellness, food, and travel brands, and anything aimed at feeling welcoming and modern. It reads as summery and sociable without trying too hard.

It also works beautifully as an accent. A little coral lifts a calm, neutral layout instantly, adding warmth and a focal point without the urgency that red would bring. The lighter and deeper steps from this tool let you use it at both scales, a soft coral wash across a surface or a strong coral on the one element you want noticed.

Building a palette from your coral

Coral has one famous partner above all others: teal. The warm pink-orange of coral against the cool blue-green of teal is one of the most reliable colour pairings there is, each making the other look brighter. That single combination will carry a whole palette.

To build it out, use the steps from this tool as the spine: a deep coral for text and depth, your main coral as the warm feature colour, and a pale, peachy coral surface behind content. Then bring in teal or navy as the cool counterweight, with white and cream to keep things fresh and a touch of gold for warmth. Coral is happiest with something cool to play against, so give it that balance.

Questions people ask

What colour is coral?

A warm, bright blend of pink and orange, named after the reef organism. It is lighter and friendlier than red, more orange than pink, and a little deeper than peach.

What is the hex code for coral?

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

What is the difference between coral, salmon, and peach?

Coral is the brightest and most orange of the three. Salmon is similar but leans a touch pinker, and peach is much paler and softer. They are close neighbours in the same warm corner of the wheel.

Can I use my own coral?

Yes. Paste your exact coral 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. Coral (color), the marine origin and the colour named after it. Wikipedia. https://en.wikipedia.org/wiki/Coral_(color)