Color Temperature Calculator
Analyze if a color is warm or cool and adjust its temperature
5500K
Neutral
☀️ Direct sunlight, outdoor photography
Common Presets
Color Values
#FFEDDE
rgb(255, 237, 222)
hsl(27°, 100%, 94%)
5500K
Warm / Cool Comparison
Temperature Scale
Reverse: Color → Temperature
Enter a HEX color to estimate its equivalent color temperature in Kelvin.
Export Temperature Scale
:root {
--temp-1850: #ff8100; /* Candle */
--temp-2700: #ffa757; /* Incandescent Bulb */
--temp-3000: #ffb16e; /* Sunrise */
--temp-3500: #ffc18d; /* Warm Light */
--temp-4100: #ffd0ab; /* Fluorescent */
--temp-5500: #ffedde; /* Daylight */
--temp-6500: #fffefa; /* Cloudy Sky */
--temp-7500: #e6ebff; /* Shade */
--temp-10000: #cadaff; /* Blue Sky */
}What is color temperature?
Color temperature is measured in degrees Kelvin (K) and describes the tone of light. Low temperatures (2000-3000K) produce warm, yellowish light, while high temperatures (5000-10000K) produce cool, bluish light. It is essential in photography, lighting and interior design.
How it works
Color temperature is measured in degrees Kelvin (K) and describes the hue of light emitted by a black body at that temperature. In design, it's used to classify colors as warm (1000-4000K) or cool (6000-15000K).
Warm colors (1000-4000K)
Reds, oranges, yellows. Evoke energy, passion, warmth. Advance visually — they appear closer to the viewer. Candlelight (~1850K) and incandescent bulbs (~2700K) are classic examples.
Cool colors (6000-15000K)
Blues, greens, violets. Evoke calm, professionalism, freshness. Recede visually — they appear further away. Overcast sky (~6500K) and blue sky (~10000K) are natural references.
Color psychology
- Warm: urgency, appetite, energy, closeness
- Cool: trust, security, tranquility, professionalism
- Neutral (4000-6000K): balance, objectivity, versatility
📷 Photography & white balance
In photography, color temperature is fundamental for white balance. If you shoot under tungsten light (2700K) with WB set to "Daylight" (5500K), the image will appear orange. Adjusting WB to the actual scene temperature neutralizes color casts.
- Tungsten: 2700-3200K
- Flash: ~5500K
- Overcast: 6000-7000K
- Shade: 7000-8000K
� Reverse calculator
The reverse conversion (Color → Temperature) estimates the equivalent Kelvin temperature of any HEX color. It finds the closest match on the black-body curve (Planckian locus). If the color is far from this curve, accuracy will be lower.
�💡 Practical Use Cases
Case 1: Restaurant website
You want to stimulate appetite and create a cozy feeling.
→ Use warm colors (2700-3500K): oranges, reds, yellows
→ Avoid cool blues that reduce appetite
Case 2: Banking/finance app
You need to convey trust and professionalism.
→ Cool colors (6000-8000K): blues, teal greens
→ Avoid reds (associated with losses/alerts)
Case 3: LED lighting selection
You're choosing LEDs for a commercial space.
→ Clothing store: 3000-3500K (warm, cozy)
→ Office: 4000-5000K (neutral, productive)
→ Jewelry/gallery: 5500-6500K (faithful color reproduction)
Case 4: Warm/cool balance in landing page
Your palette is all cool and the page feels distant.
→ Add a warm accent (~3000K) for CTAs
→ Use the Warm/Cool comparison to see the contrast
→ Orange or coral over blue creates visual balance
⚡ Pro tip
Export the temperature scale as CSS variables for a thematic color system. You can create "warm" and "cool" themes simply by switching between temperature ranges.