Color temperature in design: warm, cool and neutral light

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.

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 covers the wheel in detail; the useful part here is that temperature applies within a hue too. There are warm blues and cool reds.

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 explores those associations and their limits. Temperature also interacts with intensity: a cool palette turned up to full 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.

: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;
}

Warm neutrals suit food, hospitality, wellness and editorial brands. Cool neutrals suit software, finance and anything that should feel precise. Neutral colour 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 walks through the whole method.

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.

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.