# Warm and cool colors: using temperature on purpose

[Canonical HTML page](https://gradiently.design/guide/warm-and-cool-colors)

Every colour has a temperature, including your greys and whites. Learn to read it and you can make a design feel closer, calmer or brighter without changing a single hue.

## The short version

- Warm and cool colors are the two halves of the colour wheel: reds, oranges and yellows feel warm, while greens, blues and violets feel cool.
- Temperature is relative, so a violet looks warm next to blue and cool next to orange.
- Warm colours tend to feel closer and more energetic, while cool colours tend to recede and calm, which is why distant hills in landscapes look blue.
- Greys and whites have temperature too, and mixing warm and cool neutrals by accident is a common reason a design feels slightly off.
- A gradient from warm to cool stays clean when it travels through a shared neighbour such as pink or violet, instead of through grey.

**Warm and cool colors** are the two halves of the colour wheel. Reds, oranges and yellows feel warm, like fire and sunlight; greens, blues and violets feel cool, like water, shade and evening. Temperature changes how a design feels before anyone reads it: warm colours come forward and energise, cool colours settle back and calm. Using it on purpose is one of the quickest ways to make a palette feel intentional.

- Warm red: #d7263d
- Warm orange: #f46036
- Warm yellow: #f7b32b
- Cool green: #2e9e6f
- Cool blue: #1b7fbd
- Cool violet: #5b3cc4

Three warm and three cool colours from opposite sides of the wheel. The split runs roughly between yellow-green and red-violet.

## Temperature is relative

The line between warm and cool is not fixed. Yellow-greens and red-violets sit on the border, and any colour looks warmer next to a cooler one. A magenta beside a sky blue reads warm; the same magenta beside orange reads cool. This is why you should judge temperature in the palette, not swatch by swatch.

- Magenta beside blue: warm: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)`
- Magenta beside orange: cool: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)`

The same magenta on the right of both. Its temperature changes with its neighbour.

Colours also have temperature *within* a hue. A red that leans towards orange is warmer than a red that leans towards blue, and a blue with a touch of green is warmer than one leaning to violet. Designers call this lean the undertone, and it is what makes two "reds" clash.

## How warm and cool colours create depth

Warm colours tend to appear to come forward and cool colours to fall back. Landscape painters have used this for centuries: air scatters light, so distant hills really do look bluer and paler, and our eyes read cool and pale as far away. You can borrow the same effect in flat design.

| Quality | Warm colours | Cool colours |
| --- | --- | --- |
| Space | Come forward, feel close | Recede, feel far |
| Energy | Active, urgent, social | Calm, steady, focused |
| Best for | Buttons, prices, headlines, food | Backgrounds, large areas, data, health |
| In large amounts | Can feel loud or hot | Can feel cold or distant |
| In light | Low Kelvin, like a 2700 K bulb | High Kelvin, like overcast daylight |

Tendencies, not laws. Saturation and lightness can overturn temperature: a pale peach recedes more than an electric blue.

The practical rule: put cool colours in large background areas and save warm colours for the things that should reach the viewer first. A warm call to action on a cool page stands out without needing to be large, which fits neatly with the [60-30-10 rule](https://gradiently.design/guide/60-30-10-rule).

## Warm and cool neutrals

Greys, whites and blacks carry temperature too, and it matters more than people expect. A warm off-white feels like paper; a cool white feels like a screen or a clinic. A design that mixes a warm grey background with cool grey text often looks slightly wrong without anyone being able to say why.

- Warm paper: #f5efe6
- Warm stone: #b8ada0
- Warm charcoal: #3d3530
- Cool mist: #eef2f6
- Cool slate: #a3adb8
- Cool charcoal: #2b3240

Warm neutrals lean towards brown and cream, cool ones towards blue. Pick one family for a whole design.

```css
:root {
  /* Warm neutrals: pair with reds, oranges, golds */
  --paper: #f5efe6;
  --stone: #b8ada0;
  --charcoal-warm: #3d3530;

  /* Cool neutrals: pair with blues, greens, violets */
  --mist: #eef2f6;
  --slate: #a3adb8;
  --charcoal-cool: #2b3240;
}
```

Keeping neutrals in named warm and cool sets makes accidental mixing easy to spot in code review.

## Mixing warm and cool in one gradient

Warm-to-cool gradients are some of the most striking there are, and sunsets prove it. They are also the most likely to go wrong, because warm and cool colours often sit opposite each other on the wheel and a straight blend between them passes through grey. The fix is to route the blend through a colour that belongs to both sides, usually pink, magenta or violet.

- Orange to blue, direct: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)`
- Orange to blue through pink: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)`
- Dusk: cool above, warm below: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)`
- Yellow to green through lime: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)`

The direct blend dips into a dull middle. The others travel through a shared neighbour, so every point along the way is a real colour. [Muddy gradients](https://gradiently.design/guide/muddy-gradients) explains the geometry.

Proportion matters here too. Let one temperature lead and the other appear as contrast. A mostly cool gradient with a warm glow at one edge feels like evening light; an even split between warm and cool feels undecided. [Sunset gradients](https://gradiently.design/guide/sunset-gradient) has many more examples of warm and cool sharing one field.

## Warm and cool colours in everyday design

- **A café menu board:** warm cream ground, espresso type and one terracotta accent, so it feels like the room it hangs in
- **A banking app:** cool slate and blue surfaces, with one warm amber for alerts that need attention
- **A night event poster:** deep cool violet field with a warm orange headline that jumps forward
- **A skincare launch:** cool mist and sage, lifted by a single warm peach for the product name
- **A sports promo:** warm red and orange leading, a cool navy only for the small print

In each case one temperature sets the climate and the other directs attention. That pairing is also a gentle form of [complementary colour](https://gradiently.design/guide/complementary-colors) contrast, without the full clash of true opposites.

## Choosing a temperature for your brand

1. **Start from the feeling** Welcoming, lively and hands-on brands usually lean warm. Precise, calm and trustworthy brands usually lean cool. Neither is better; pick the one that matches what you do.
2. **Pick one leading temperature** Build most of your palette, including neutrals, on one side. It gives the brand a consistent climate.
3. **Add one accent from the other side** A single warm accent on a cool brand, or a cool one on a warm brand, gives contrast and a clear place for the eye to land.
4. **Test in context** Check the palette on the actual screens and materials it will live on. Colours shift between screens and again in print; see [how to choose brand colours](https://gradiently.design/guide/how-to-choose-brand-colors).

## FAQ

### What are warm and cool colors?

Warm colours are reds, oranges and yellows; cool colours are greens, blues and violets. The border colours, yellow-green and red-violet, can read either way depending on their neighbours.

### Is purple warm or cool?

It depends on its lean and its neighbours. Red-purples and magentas read warm next to blue, while blue-violets read cool, and any purple looks cool next to orange.

### Do warm colours really come forward?

They tend to appear closer, especially when saturated, while cool, pale colours tend to recede. Lightness and saturation can override the effect.

### Can you mix warm and cool colors in one design?

Yes. Let one temperature lead, use the other as an accent, and in gradients blend through a shared neighbour such as pink or violet to avoid a grey middle.