# Red gradients: energy without the alarm

[Canonical HTML page](https://gradiently.design/guide/red-gradient)

Red gets attention faster than any other colour, which is exactly why it goes wrong. How to build red gradients that feel alive, warm and confident instead of loud.

## The short version

- A red gradient is a blend built around red tones such as crimson, scarlet, oxblood or coral, used for designs that need warmth and urgency.
- Red gradients look best when only one stop is fully saturated and the others move towards deeper wine or warmer orange and pink.
- Pure #ff0000 with white text has a contrast ratio of 4:1, which is below the 4.5:1 minimum for normal body text.
- Keeping red next to its warm neighbours, rather than saturated blue, avoids the flicker and alarm that make red designs feel harsh.
- Deep reds like oxblood and wine read as premium and calm, while bright scarlet and coral read as energetic and playful.

A **red gradient** is a blend built around red, from bright scarlet and crimson to deep oxblood and soft coral, and it is the most energetic gradient you can put on a screen. The trick to using one well is restraint: let one stop carry full saturation, move the rest towards deeper wine or warmer orange and pink, and keep red away from the places people expect warnings. Done that way, red reads as heat and appetite rather than an error message.

Below you will find three red palettes, nine copyable red gradient codes, the contrast numbers for text on red, and where red works best. For how colours carry meaning in the first place, see [colour psychology](https://gradiently.design/guide/color-psychology).

## Why red is harder to design with than it looks

Red is loud for several reasons at once. Screen red reaches very high saturation, so it dominates anything next to it. Interfaces have trained people to read it as danger: error states, delete buttons, low battery and unread badges are nearly always red. And bright red placed right next to saturated blue can appear to shimmer or sit at a different depth, an effect called chromostereopsis, which makes text in that pairing tiring to read.

### Reads as alarm

- Flat `#ff0000` filling the whole canvas
- Red text or borders on a white page with no other warm colour
- Red placed directly against saturated blue
- Red used for both the brand and the error messages

### Reads as energy

- One bright red stop falling into deep wine or oxblood
- Red blended with its warm neighbours, orange and pink
- Red on a dark, warm ground with a soft off-white for text
- A separate, clearly different colour kept for errors

## Three red palettes: crimson, oxblood and coral

Most successful red gradients come from one of three families. Crimson leans slightly blue and feels bold and classic. Oxblood and wine are deep, dark reds that feel like leather, velvet and red wine. Coral is red lifted towards orange and pink, softer and friendlier. Pick a family before you pick a gradient, because mixing all three in one blend usually looks muddy.

- Crimson: #e11d48
- Deep crimson: #b91c1c
- Oxblood: #7f1d1d
- Wine: #4a0e0e
- Coral: #ff6f61
- Blush: #fecaca

Crimson at the top, oxblood and wine for depth, coral and blush for lightness. Each family builds its own kind of red gradient.

## Red gradient codes you can copy

These gradients each keep red as the main note but differ in temperature and depth. The darker ones work as full backgrounds; the brighter ones are better for buttons, badges, cards and short bursts of attention.

- Crimson fire: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)`
- Oxblood: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`
- Coral to crimson: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)`
- Cherry glow: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)`
- Red to pink: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)`
- Scarlet to wine: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)`
- Terracotta: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)`
- Soft blush: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)`
- Red to black: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)`

Nine red gradients from bright to deep. Each one blends only through warm neighbours or deeper reds, never through grey.

Notice what the codes have in common. The bright stop sits at one end or one point, never across the whole field. The dark stops are dark *reds*, not black or grey, so the blend keeps its colour as it falls. If a red gradient turns brown in the middle, you have probably blended it towards a green or grey; our guide to [muddy gradients](https://gradiently.design/guide/muddy-gradients) explains why.

## How to manage red's intensity

1. **Choose one bright stop** Decide where the most saturated red lives, usually near a headline or the focal point. Everything else steps down from it in lightness or saturation.
2. **Give it dark neighbours** Deep reds such as `#7f1d1d` and `#4a0e0e` make the bright stop glow by contrast, the way a single coal glows in a dark fire.
3. **Blend towards warm colours** Orange, coral and pink sit next to red on the colour wheel, so they blend cleanly. See [analogous colours](https://gradiently.design/guide/analogous-colors) for why neighbours always behave.
4. **Keep red to a share of the design** Red is an accent colour by nature. Even in a red-led design, a large calm area helps; the [60-30-10 rule](https://gradiently.design/guide/60-30-10-rule) is a good starting ratio.
5. **Keep errors a different colour** If your brand is red, give error messages a clearly different treatment, such as an icon plus a darker or orange-leaning red, so a warning never looks like marketing.

## Text on a red gradient

Red sits in an awkward middle for text. Pure screen red is too dark for black text to be comfortable and too light for white text to pass the body-text minimum. The fix is to push the background darker when you want white type, or lighter when you want dark type, and to check the lightest point of the gradient that sits behind your words.

| Background | Text | Contrast | Verdict |
| --- | --- | --- | --- |
| `#ff0000` pure red | White | 4.0:1 | Large text only |
| `#dc2626` red | White | 4.8:1 | Passes for body text |
| `#b91c1c` deep crimson | White | 6.5:1 | Comfortable |
| `#7f1d1d` oxblood | `#fff1f0` off-white | 9.1:1 | Excellent |
| `#ff6f61` coral | White | 2.7:1 | Fails |
| `#ff6f61` coral | `#1a0505` near-black | 7.2:1 | Excellent |

Ratios calculated with the WCAG formula. 4.5:1 is the minimum for normal text and 3:1 for large text. Details in [colour contrast](https://gradiently.design/guide/color-contrast-accessibility).

A portrait sale post with the words Winter sale in white over a deep crimson gradient

Headline set over the deepest part of the red, where white type is comfortable.

A vertical story announcing late opening hours on a warm red gradient with a bright glow near the top

The same red on a story, with the bright stop kept away from the words.

## Where red gradients work best

Red belongs where energy and appetite are the point. It is common in food and drink, sport, entertainment and sales, and in festive design; in Chinese tradition, red is strongly associated with luck and celebration, which is why it leads Lunar New Year design. Meanings differ between cultures, so check yours in [colour meanings around the world](https://gradiently.design/guide/color-meanings-around-the-world).

- **Food, cafés and restaurants:** coral and terracotta gradients feel warm and appetising
- **Sport and fitness:** crimson fire and scarlet to wine carry speed and effort
- **Fashion and beauty:** oxblood, wine and blush feel considered and premium
- **Sales and launches:** one bright stop on a deep red field draws the eye without shouting
- **Music and nightlife:** red to black and cherry glow suit dark, lit spaces

If you want red without rebuilding it for every format, Gradiently's Market lets you search Marks with words like "deep red" or "coral". Each Mark moves its calmest area behind your words, which solves the text-on-red problem above for you.

## FAQ

### What colours go well with red in a gradient?

Its warm neighbours blend most cleanly: orange, coral, pink and deep wine. Blending red towards green or grey tends to turn the middle brown.

### Can you put white text on a red background?

Yes, if the red is deep enough. White on `#dc2626` is 4.8:1 and passes for body text, but white on pure `#ff0000` is only 4:1, so use it for large text only.

### What is the hex code for a dark red gradient?

Try `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, an oxblood blend that stays red from end to end.

### Why does my red gradient look aggressive?

Usually because the whole field is fully saturated red. Keep one bright stop, let the rest fall into deeper reds, and avoid placing red directly against saturated blue.