10 colors that show why good color science matters
How humans perceive difference between colors is not the same as the mathematical distance between two colors. And we should always optimise for human perception!
If you search Nearest Color for #008000 in the Tailwind palette, you get the Tailwind class lime-700. But with a mathematical distance algorithm, you'll get
green-800.
#008000
Human perception
lime-700
Mathematical distance
green-800
Most color-sighted humans would say that the lime-700
is closer to the original color than green-800. Read more about the science of this.
Here are 9 more examples of colors that show how tools like Nearest Color that use human perception of color difference help you find the right color.
#00FF00
Human perception
lime-400
Mathematical distance
green-500
#4682B4
Human perception
cyan-600
Mathematical distance
slate-500
#CD853F
Human perception
yellow-600
Mathematical distance
orange-400
#5F9EA0
Human perception
teal-600
Mathematical distance
slate-500
Windows coming soon
#BA55D3
Human perception
fuchsia-600
Mathematical distance
purple-500
#00FFFF
Human perception
cyan-300
Mathematical distance
cyan-400
#ee5333
Human perception
orange-600
Mathematical distance
red-500
#00BFFF
Human perception
sky-400
Mathematical distance
sky-500
#FF8C00
Human perception
orange-400
Mathematical distance
amber-500
Hopefully, you found this useful! Most color-sighted humans would see the colors on the left – the Tailwind classes found by Nearest Color – as closer to the input color than the colors on the right.
A bit about the science
The mathematical distance approach to finding the closest color is to find the Euclidean distance of colors in sRGB. Because sRGB doesn't match how we perceive colours, two colors with the same Euclidean distance can look very different to color-sighted humans. Read more about Euclidean distance.
DeltaE is the name for the family of formulas that have been developed to find the difference between colors according to human perception. Humans are more sensitive to some colors than to others. Read more about DeltaE and about how humans perceive color difference.
Windows coming soon