Blackbody Radiation

When an object gets hot enough, it emits light, causing it to glow.

Objects that do this very efficiently are called blackbody radiators, and their colour is determined by their temperature.

Our sun is an imperfect blackbody radiator, with a temperature around 5780 Kelvin, giving it a light orange colour

Metal filaments in lightbulbs are typically between 2700 Kelvin

and 6500 Kelvin

Perhaps counterintuitively, the hotter an object is, the more blue it appears.

The Palette

I wanted to see what a palette derived from this natural spectrum of colours would look like in a UI.

I found this mapping of blackbody temperatures to hex values. It ignores any brightness differences between the temperatures, which is okay because our monitors wouldn't be able to represent those magnitudes anyway.

The palette starts at a bright red-orange colour at 1000 Kelvin

, a little cooler than a commercial jet engine. It goes up to a medium-light blue colour at 29800 Kelvin

, which is the temperature of some very hot stars, like star R99 in the Dorado constellation.

In the palette, the lightest points occur at 99% lightness on the HSL scale, at 6400 Kelvin

and 6600 Kelvin

. The hue of the colour at 6600 Kelvin

is 290 degrees, which is a warm purple-ish colour, so that appears to be the turning point between the warm and cool colours.

Colours

There are 97 colours in the palette.

Hotter

Cooler

Cards

Gradients

Buttons

Usage

You can import this palette using Tailwind.

Add these CSS variables:

main.css

Copy code

--temp-1: #ff3800; /* 1000K */
--temp-2: #ff5300; /* 1200K */
--temp-3: #ff6500; /* 1400K */
--temp-4: #ff7300; /* 1600K */
--temp-5: #ff7e00; /* 1800K */
--temp-6: #ff8912; /* 2000K */
--temp-7: #ff932c; /* 2200K */
--temp-8: #ff9d3f; /* 2400K */
--temp-9: #ffa54f; /* 2600K */
--temp-10: #ffad5e; /* 2800K */
--temp-11: #ffb46b; /* 3000K */
--temp-12: #ffbb78; /* 3200K */
--temp-13: #ffc184; /* 3400K */
--temp-14: #ffc78f; /* 3600K */
--temp-15: #ffcc99; /* 3800K */
--temp-16: #ffd1a3; /* 4000K */
--temp-17: #ffd5ad; /* 4200K */
--temp-18: #ffd9b6; /* 4400K */
--temp-19: #ffddbe; /* 4600K */
--temp-20: #ffe1c6; /* 4800K */
--temp-21: #ffe4ce; /* 5000K */
--temp-22: #ffe8d5; /* 5200K */
--temp-23: #ffebdc; /* 5400K */
--temp-24: #ffeee3; /* 5600K */
--temp-25: #fff0e9; /* 5800K */
--temp-26: #fff3ef; /* 6000K */
--temp-27: #fff5f5; /* 6200K */
--temp-28: #fffafc; /* 6400K */
--temp-29: #fefaff; /* 6600K */
--temp-30: #f8f5ff; /* 6800K */
--temp-31: #f5f3ff; /* 7000K */
--temp-32: #f0f1ff; /* 7200K */
--temp-33: #edefff; /* 7400K */
--temp-34: #e9edff; /* 7600K */
--temp-35: #e6ebff; /* 7800K */
--temp-36: #e3e9ff; /* 8000K */
--temp-37: #e0e7ff; /* 8200K */
--temp-38: #dde6ff; /* 8400K */
--temp-39: #dae4ff; /* 8600K */
--temp-40: #d8e3ff; /* 8800K */
--temp-41: #d6e1ff; /* 9000K */
--temp-42: #d3e0ff; /* 9200K */
--temp-43: #d1dfff; /* 9400K */
--temp-44: #cfddff; /* 9600K */
--temp-45: #cedcff; /* 9800K */
--temp-46: #ccdbff; /* 10000K */
--temp-47: #cadaff; /* 10200K */
--temp-48: #c9d9ff; /* 10400K */
--temp-49: #c7d8ff; /* 10600K */
--temp-50: #c6d8ff; /* 10800K */
--temp-51: #c4d7ff; /* 11000K */
--temp-52: #c3d6ff; /* 11200K */
--temp-53: #c2d5ff; /* 11400K */
--temp-54: #c1d4ff; /* 11600K */
--temp-55: #c0d4ff; /* 11800K */
--temp-56: #bfd3ff; /* 12000K */
--temp-57: #bed2ff; /* 12200K */
--temp-58: #bdd2ff; /* 12400K */
--temp-59: #bcd1ff; /* 12600K */
--temp-60: #bbd1ff; /* 12800K */
--temp-61: #bad0ff; /* 13000K */
--temp-62: #b9d0ff; /* 13200K */
--temp-63: #b8cfff; /* 13400K */
--temp-64: #b7cfff; /* 13600K */
--temp-65: #b7ceff; /* 13800K */
--temp-66: #b6ceff; /* 14000K */
--temp-67: #b5cdff; /* 14200K - 14400K */
--temp-68: #b4ccff; /* 14600K */
--temp-69: #b3ccff; /* 14800K - 15000K */
--temp-70: #b2cbff; /* 15200K - 15400K */
--temp-71: #b1caff; /* 15600K - 15800K */
--temp-72: #b0caff; /* 16000K */
--temp-73: #afc9ff; /* 16200K - 16600K */
--temp-74: #aec9ff; /* 16800K */
--temp-75: #aec8ff; /* 17000K */
--temp-76: #adc8ff; /* 17200K - 17400K */
--temp-77: #acc7ff; /* 17600K - 18000K */
--temp-78: #abc7ff; /* 18200K */
--temp-79: #abc6ff; /* 18400K */
--temp-80: #aac6ff; /* 18600K - 19000K */
--temp-81: #a9c6ff; /* 19200K */
--temp-82: #a9c5ff; /* 19400K - 19800K */
--temp-83: #a8c5ff; /* 20000K - 20200K */
--temp-84: #a8c4ff; /* 20400K */
--temp-85: #a7c4ff; /* 20600K - 21200K */
--temp-86: #a6c3ff; /* 21400K - 22000K */
--temp-87: #a5c3ff; /* 22200K - 22600K */
--temp-88: #a5c2ff; /* 22800K */
--temp-89: #a4c2ff; /* 23000K - 23800K */
--temp-90: #a3c2ff; /* 24000K */
--temp-91: #a3c1ff; /* 24200K - 25000K */
--temp-92: #a2c1ff; /* 25200K - 25800K */
--temp-93: #a2c0ff; /* 26000K - 26200K */
--temp-94: #a1c0ff; /* 26400K - 27600K */
--temp-95: #a0c0ff; /* 27800K */
--temp-96: #a0bfff; /* 28000K - 29200K */
--temp-97: #9fbfff; /* 29400K - 29800K */

Now, update your Tailwind configuration file to register the new variables as colours:

tailwind.config.js

Copy code

const temp = {};
[...Array(97)].forEach((_, i) => {
  temp[i + 1] = `var(--temp-${i + 1})`;
});

module.exports = {
  theme: {
    extend: {
      colors: {
        temp,
      },
    },
  },
};

You can use Tailwind prefixes like bg- and text- with temp, like bg-temp-<i>, where i is an integer from 1 to 97.

Here's an example:

RedCard.tsx

Copy code

import React from 'react';

export function RedCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-temp-25 text-temp-6 shadow-temp-19 shadow-md rounded-md px-4 py-3">
      {children}
    </div>
  );
}

This is the result:

Here is a smiley face and some text.

Conclusion

Physics is a fun source of inspiration for design.

I hope you find this palette useful!

The Palette

Colours

Cards

Gradients

Buttons

Usage

Conclusion

More reading on blackbody radiation