Denne guide findes ikke på dit sprog endnu, så her er den på engelsk.
Kort fortalt
- 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.
På denne side
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.
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.
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 |
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.
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.
: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;
}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.
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 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 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.
Spørgsmål, folk stiller
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.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
