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.
Cards Gradients
Buttons Usage You can import this palette using
Tailwind .
Add these CSS variables:
--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:
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:
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!
More reading on blackbody radiation