# Color temperature in design: warm, cool and neutral light

[Canonical HTML page](https://gradiently.design/guide/color-temperature)

Every colour leans warm or cool, even the greys. Here is what the Kelvin scale means, why it runs the opposite way to how we talk about warmth, and how to use temperature to set the mood of a design.

## The short version

- Color temperature describes whether light or colour leans towards orange and red, which feels warm, or towards blue, which feels cool.
- Light sources are measured in kelvin: candlelight sits around 1,900 K, household bulbs around 2,700 K and the sRGB standard white, D65, around 6,500 K.
- Higher kelvin values look bluer, so in light a higher temperature number means a cooler looking colour.
- Neutrals have temperature too: warm greys lean towards brown or beige and cool greys lean towards blue.
- Many convincing images pair warm light with cool shadows, or the reverse, because that contrast reads as natural depth.

**Color temperature** is how warm or cool a light or a colour feels. Warm means leaning towards candle orange and red; cool means leaning towards daylight blue; neutral sits between. For light it is measured in kelvin, where a candle is around 1,900 K and an overcast sky around 6,500 K. In design you use it to set mood: warm palettes feel close and comfortable, cool ones feel calm and spacious, and mixing the two gives a picture depth.

## The kelvin scale, and why it seems backwards

The kelvin figure comes from physics: it is the temperature an ideal glowing object would need to reach to give off light of that colour. A metal bar heated slowly glows red, then orange, then yellowish white, and at extreme temperatures bluish white. So a higher number means a bluer light, which designers call cooler. The vocabulary runs opposite to the physics, and it confuses everyone at first.

| Light source | Approximate temperature | How it looks |
| --- | --- | --- |
| Candle flame | 1,900 K | Deep amber |
| Household warm white bulb | 2,700 K | Soft orange white |
| Halogen lamp | 3,000 K | Warm white |
| Cool white office light | 4,000 K | Neutral white |
| Midday sun | 5,500 K | Clean white |
| Overcast sky, sRGB white point D65 | 6,500 K | Slightly cool white |
| Open shade under a blue sky | 10,000 K and above | Distinctly blue |

Typical values. Real sources vary, and bulbs are sold in bands such as 2,700 K and 4,000 K.

Roughly 1,900 K to 10,000 K: `linear-gradient(90deg, #ff8912 0%, #ffa757 18%, #ffb46b 30%, #ffd1a3 48%, #ffecdf 62%, #fff9fb 74%, #e3e9ff 87%, #c9d9ff 100%)`

Approximate screen colours of light from candle to blue shade. Your eyes adapt to whatever light you are in, which is why a 2,700 K room looks white once you've been in it a while.

That adaptation matters for screens. The sRGB standard that most web and app colour assumes uses D65, about 6,500 K, as its white. Features such as night modes shift a display's white warmer, so the colours you chose will look warmer to someone reading at night. Design for the standard and accept the drift.

## Warm, cool and neutral colours

Outside lighting, temperature is about which side of the wheel a colour leans to. Reds, oranges and yellows read warm; blues, teals and blue violets read cool. Greens and purples sit in the middle and can go either way: an olive is warm, a mint is cool. [Warm and cool colours](https://gradiently.design/guide/warm-and-cool-colors) covers the wheel in detail; the useful part here is that temperature applies within a hue too. There are warm blues and cool reds.

- Warm red, brick: #c2372b
- Cool red, raspberry: #c2185b
- Warm blue, denim: #2b5d8a
- Cool blue, cobalt: #2563eb
- Warm green, olive: #7a8b3a
- Cool green, mint: #3fbf9f

Three hues, each in a warm and a cool version. The warm reds lean orange, the cool ones lean blue; the same holds for every hue.

Temperature does a lot of the emotional work in a palette, often more than the hue itself. Warm schemes feel close, sociable and energetic; cool schemes feel quiet, spacious and controlled. [Colour psychology](https://gradiently.design/guide/color-psychology) explores those associations and their limits. Temperature also interacts with intensity: a cool palette turned up to full [saturation](https://gradiently.design/guide/color-saturation) stops feeling calm, and a warm one turned right down starts to feel vintage rather than lively.

## Neutrals have a temperature too

Pure grey is rare in good design. Most greys used well lean slightly warm, towards stone and taupe, or slightly cool, towards slate and steel. Mixing the two families in one layout often looks muddy without anyone knowing why. Pick one family and use it for backgrounds, borders and secondary text throughout.

- Warm greys: paper to umber: `linear-gradient(90deg, #f6f3ee 0%, #e4ded4 25%, #bdb4a7 50%, #7d7468 75%, #2f2a25 100%)`
- Cool greys: frost to slate: `linear-gradient(90deg, #f3f5f8 0%, #dde2e9 25%, #aab3c0 50%, #646e7d 75%, #1e242d 100%)`
- True neutral greys: `linear-gradient(90deg, #f5f5f5 0%, #e0e0e0 25%, #b3b3b3 50%, #707070 75%, #262626 100%)`

Three grey ramps. Put a warm grey beside a cool one and the difference is obvious; on their own, both simply read as grey.

```css
:root {
  /* A warm neutral ramp: pick one family and keep it */
  --grey-50: #f6f3ee;
  --grey-200: #e4ded4;
  --grey-400: #bdb4a7;
  --grey-600: #7d7468;
  --grey-900: #2f2a25;
}
```

A warm grey ramp as tokens. Swap in the cool values for a crisper, more technical feel.

Warm neutrals suit food, hospitality, wellness and editorial brands. Cool neutrals suit software, finance and anything that should feel precise. [Neutral colour palettes](https://gradiently.design/guide/neutral-color-palettes) has more sets.

## Warm light, cool shadow

Painters have long noticed that light and shadow differ in temperature, not just brightness. Sunlit surfaces turn warm while shadows pick up blue from the sky. Recreate that in a gradient or illustration and it immediately feels more real than a light and dark version of a single hue. It works in reverse too: cool moonlight with warm lamplit shadows.

For backgrounds this is the difference between a gradient that feels lit and one that feels like a colour swatch. Place the warm light where the eye should go first, let the cool tones gather at the edges, and keep text over the calmer of the two. [Gradient background](https://gradiently.design/guide/gradient-background) walks through the whole method.

- Sunset light, blue shadow: `radial-gradient(circle at 25% 25%, #ffd29a 0%, #e98a5a 35%, #3b3f6b 80%, #1a1c33 100%)`
- Moonlight, warm dark: `radial-gradient(circle at 75% 20%, #cfe3ff 0%, #6d86b8 40%, #3d2a2a 85%)`
- Golden hour to dusk: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)`

Gradients that pair temperatures. Compare them with a single hue going light to dark, which looks flat beside them.

A magazine style cover titled Long evenings, summer issue

A summer cover. Temperature sets the season before anyone reads the words.

A magazine style cover titled Quiet mornings, winter issue

A winter cover with the same layout. Let warm light, if there is any, sit well away from the words.

## Colour temperature in photographs

White balance is a camera's guess at the light's temperature. A photo shot under warm bulbs with daylight white balance turns orange; one shot in shade turns blue. When photos sit beside brand colours, match their temperature to the palette. A warm brand with cold, blue photos feels disjointed. Tinting photos in the palette's own colours is another fix: see [duotone photos](https://gradiently.design/guide/photo-duotone-in-mark-colours).

### Avoid

- Warm and cool greys mixed in one layout
- Cold, blue photos on a warm brand
- A single hue going light to dark for depth
- Judging colour under a warm desk lamp

### Do

- One neutral family, used everywhere
- Photos corrected to the palette's warmth
- Warm light with cool shadow, or the reverse
- Checking colour in daylight or on a calibrated screen

Gradiently's Marks carry light as part of their recipe, so they read as a lit surface rather than a flat swatch, at every size you design in.

## FAQ

### What is colour temperature in design?

It describes whether a colour or light leans warm, towards orange and red, or cool, towards blue. Designers use it to set mood and create depth.

### Is a higher kelvin warmer or cooler?

Cooler looking. Higher kelvin values produce bluer light, so 6,500 K looks cooler than 2,700 K.

### What colour temperature is daylight?

Midday sun is around 5,500 K and an overcast sky around 6,500 K. The sRGB standard white, D65, is about 6,500 K.

### What is the difference between warm grey and cool grey?

Warm grey leans slightly towards brown or beige; cool grey leans slightly towards blue. Choose one family and use it consistently.