Color Temperature
The warmth or coolness of a colour, affecting the emotional tone and context of a design.
Plain English
Colour temperature is the feeling a colour creates — warm colours (reds, oranges, yellows) feel energetic, urgent, and human; cool colours (blues, greens, purples) feel calm, trustworthy, and precise. Most UI design defaults to cool colours (the dominance of blue in tech) because cool reads as "calm and reliable." Warm accents in a cool UI (an amber warning badge) pop precisely because of the contrast in temperature.
Technical
In HSL, warm colours are in the 0–60° and 300–360° hue range (reds, oranges, yellows, magentas); cool colours are in the 120–240° range (greens, cyans, blues). Neutral greys can be warm (slightly yellowish/brownish) or cool (slightly bluish) — mixing warm and cool neutrals is a common cause of palette incoherence. A brand palette should commit to one temperature for its neutrals. The Kelvin scale from photography (3000K warm / 6500K cool) is the source of the term.
Live Demo
Cool
Calm, focused, tech
Warm
Energy, urgency, friendly
Cool colors recede visually. Warm colors advance and demand attention.
Usage
✓ Good usage
Use a cool slate grey neutral with a cool blue accent for a data/analytics product — the consistent temperature signals precision and reliability.
✗ Bad usage
Combining a warm beige background (#FAF0E6) with cool slate cards (#1E293B) and a warm amber accent — the temperature mismatch creates visual incoherence.
Recommended values
- Cool neutrals: slate (#64748B family), cool grey (#9CA3AF family)
- Warm neutrals: stone (#78716C family), warm grey (#B5A99A family)
- Mixed temperatures: use only if intentional (e.g. warm cream surface, cool blue accent)
- Semantic temperature: warm = human/positive/energy; cool = reliable/calm/tech
Common mistakes
- Mixing warm and cool neutrals inadvertently — commit to one temperature.
- Using warm colours (red/orange) for primary CTAs in healthcare or financial contexts — they read as urgency/danger rather than trustworthiness.
- Choosing cool colours for food or lifestyle products where warmth communicates appeal.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a cool-temperature palette throughout: cool slate greys for neutrals, blue as the primary accent. Warm colours (amber) appear only for warning states. Avoid mixing warm and cool neutrals — pick one temperature and use it consistently.