Red gradients: energy without the alarm

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.

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.

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.

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.

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 explains why.

How to manage red's intensity

1. 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. 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. 3

   Blend towards warm colours

   Orange, coral and pink sit next to red on the colour wheel, so they blend cleanly. See analogous colours for why neighbours always behave.

4. 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 is a good starting ratio.

5. 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.

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.

• 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.