Color temperature (warm / cool)

Whether a palette leans orange-red (cozy, human, sunny) or blue-green (calm, clinical, technical). The mood dial of color.

cozier colorscolder more clinical colorswarm palettecool palettewarm colors vs cool colorscolour temperaturemake it feel sunniermake it feel icierthe orange versus blue thing

See it

Live demo coming soon

What it is

Temperature is which half of the color wheel a palette lives on. Warm runs red, orange, yellow: fire, skin, sunlight, terracotta. Cool runs blue, cyan, green-blue: shade, water, metal, screens. The name comes from black-body radiation and Kelvin values, and the two senses run backwards from each other. Low color temperatures (a 2700K bulb) look redder and yellower, which is what we call visually warm. High-temperature black bodies are physically hotter and look bluer. So 'warm light' is the cooler object, which is why the Kelvin numbers on a bulb box read like a typo.

Use it as a mood dial, not a color-picking rule. Warm palettes read as friendly, appetizing, human, and analog, which is why food, hospitality, and craft brands live there. Cool palettes read as trustworthy, precise, calm, and technical, which is why fintech, healthcare, and dev tools default there. The strongest move is not picking a side but setting a dominant temperature and letting a small amount of the opposite one carry the accents. That is the whole reason the orange-and-teal grade ate Hollywood: warm skin against cool shadows separates the subject from the background.

Gotcha: temperature is relative, not absolute. A yellow-green looks cool next to orange and warm next to cyan. And it hides in your neutrals, not just your brand hue: a warm cream background under cool blue-gray text is the most common accidental clash in a design system. Check your whites, grays, and shadow colors, because those cover most of the screen.

Ask AI for it

Shift this palette warm (or cool): bias every non-semantic hue toward orange (or toward blue) while keeping the hues in their original relative order, so colors that were distinct stay distinct instead of collapsing into one another. Leave the success, warning, and danger hues alone. Gamut-map each result, then remeasure every text and background ratio and adjust lightness until each pair is back at or above the threshold it started with. Apply the same temperature to the neutrals: warm off-white backgrounds and brown-tinted grays, or cool near-white backgrounds and blue-tinted grays. Then reserve one small accent in the opposite temperature for buttons and highlights, so the call to action separates from the dominant field. Report every lightness adjustment you had to make.

You might have meant

tinted neutralsundertonehue rotationearth tonesoff white bone cream