Shades of Red

What this tool does

Red is the loudest colour there is. It is the one your eye jumps to first, the colour of stop signs and sale tags and warning lights, and it does not do quiet. That power is also why it is tricky to work with: you usually need a softer red to calm it down and a deeper one for contrast, and judging those by eye is hard.

That is what this does. You give it a red, and it builds the whole run of that red 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 reds, and a look at why red pulls your attention the way it does.

How to use it

1. Set your red. The tool opens on a red, its Hex shown above the swatches. Change it with Change Color or the Color Picker, or paste your exact red in.
2. Choose how many shades. The Color Shades number fixes the count, ten unless you change it. A higher number spaces the steps more finely.
3. Copy the codes. Every shade is given with its HEX, RGB, HSL, and HSV, so you can lift whichever format you need.

Red sits at one extreme of the spectrum, so it barely moves toward another hue as you lighten or darken it. Instead the lighter steps soften toward pink and the darker ones deepen toward maroon, all unmistakably red.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour properly rather than just fading it. It takes your red, 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.

Red gives you a clean, predictable range because it is a pure primary on screen. The pale end drifts into soft pinks, the deep end into rich, dark reds, which together cover most of what a red palette needs, from a gentle background tint to strong, dark text.

The colour that grabs you first

Red does not just feel attention-grabbing, it is. Red light sits at the long-wavelength end of everything our eyes can see, and of all the colours, red is the one most consistently linked to raised alertness and arousal. Show people red and, on average, it nudges them toward feeling more awake, more urgent, more switched on.

That is not a marketing trick, it is why red ended up doing the jobs it does. Stop signs, brake lights, error messages, and emergency buttons are red because it cuts through and says pay attention now. The same quality is why sale signs shout in red, and why so many food brands and restaurants use it, since red is associated with stimulating appetite. When you reach for red, you are reaching for the most urgent colour you have.

The named reds, with hex codes

Red has a lot of named versions, leaning warmer or cooler, lighter or deeper. Here are the common ones, with a hex for each.

• Red (#FF0000): the pure web primary, red at full strength with no green or blue.
• Crimson (#DC143C): a strong red with a slight cool, bluish lean.
• Scarlet (#FF2400): a vivid red tipping toward orange, hot and bright.
• Firebrick (#B22222): a deeper, slightly muted brick red.
• Dark Red (#8B0000) and Maroon (#800000): deep, serious reds for text and contrast.
• Indian Red (#CD5C5C): a soft, dusty, muted red.
• Tomato (#FF6347) and Orange Red (#FF4500): warm reds heading toward orange.

The pattern to notice is how far each one leans. Crimson cools toward blue, scarlet and tomato warm toward orange, and the dark reds simply deepen. Picking the right lean matters, because it sets whether your red feels icy and sharp or warm and fiery.

What red says

No colour carries more meaning than red, and some of it pulls in opposite directions. It is the colour of love and passion, hearts and roses, and at the same time the colour of danger, anger, and warning. It signals energy, urgency, and importance, which is why it works for anything that needs to feel active or immediate.

The biggest split is cultural. In much of the West, red leans toward danger and stop, so it is used for alerts and caution. In China and across much of Asia, red is the colour of luck, joy, and prosperity, central to weddings and celebrations and the red envelopes given at New Year. So if you are designing for a wide audience, it is worth knowing that the same red can read as warning to one person and good fortune to another.

Building a palette from your red

Red is a dominant colour, so a little goes a long way. The most reliable approach is to let neutrals do most of the work and use red as the accent that draws the eye, white and black make it look bold and clean, while grey lets it pop without competing. Used that way, the steps from this tool give you a soft red surface, a strong red feature, and a deep red for text.

For a colour accent, red's opposite on the wheel is green, which is striking but reads as festive, so use it deliberately. Navy and gold both pair richly with red when you want something more grown-up than primary brightness. The main rule is restraint: because red commands so much attention, large areas of it can overwhelm a layout fast.

Questions people ask

What is the hex code for red?

The pure web red is #FF0000, full red with no green or blue. It is one of the named CSS colours, so you can also just write "red" in your stylesheet, while a specific brand red will have its own hex.

Why does red grab attention?

Red is the longest wavelength we can see and the colour most linked to raised alertness and arousal. That is why it is used for stop signs, warnings, and alerts, and why it reliably draws the eye.

Does red really affect mood and appetite?

The associations are well documented. Red is tied to energy and urgency and is widely used by food brands because it is linked to stimulating appetite. The effects are real but a nudge, not a guarantee.

Can I use my own red?

Yes. Paste your exact red 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. Red, colour, wavelength, symbolism, and named web values. Wikipedia. https://en.wikipedia.org/wiki/Red