Balance colors mathematically instead of by hand

[jenstornell]

One thing I instantly liked was the beautiful default sets of colors. Then I got disappointed by the fact that they are blanaced by the eye and not mathematically.

A common question we get is "how do I generate the 100–900 shades of my own custom colors?". Bad news: color is complicated and we've yet to find a tool that does a good job generating these sorts of color palettes. We picked all of Tailwind's default colors by hand, balancing them by eye. Sorry!

Before using Tailwind (yesterday) I always got back to https://colors.eva.design/ for colors. It's really great and has exactly 9 shaded.

Just add the 500 color in the input and you will get the other 8 shades.

Cons

The only downside is that the shade 100 is not always as bright as we may need. Personally I add another shade that I call 50 but that would probably look ugly for Tailwind.

My suggestions is to keep the beautiful color set, but just tweak them to be mathematically correct.

[adamwathan]

but just tweak them to be mathematically correct.

Can you please define what you mean by "mathematically correct"?

We've tried every color generation tool out there and they all give poor results for real UIs. Our colors (especially the new ones that will come in 2.0 and are being tested in Tailwind UI) are very meticulously picked and tested in dozens of real-world UI scenarios to make sure the colors are actually useful for solving real problems. We also validate our choices by comparing all of the colors in the CIELAB color space to make sure there are no obvious deviations from the expected trends across the shades.

You can of course change the colors, too:

https://tailwindcss.com/docs/customizing-colors

[adamwathan]

Here's a useful blog post on designing color systems by Stripe that covers the same general approach we use to choosing colors:

https://stripe.com/en-ca/blog/accessible-color-systems

I wish you could just plug a number into a calculator and get a perfect set of colors but it doesn't work that way (or at least no one has built anything that does it well yet).

[jenstornell]

@adamwathan You always provide great info to each of my questions. Thanks for that! 👍

That blog post proves quite well your point of view. The color curves goes at any direction so I understand it better now.

I'm not really sure, but maybe LCH colors (future css) is a better color format for things like this? http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

Interesting that you actually do have a color 50 in the new palette (feeling like home). 👍

I'm with you on this approach now and because we can extend colors to anything we want, I'm closing this now.

[marceloadsj]

For those who wants another really good tool: https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1 Create by @gka!

I manage to create some really good looking palettes with that using two or three colors (lighter, middle, darker). Of course, it's not better than a high skilled eyeball, but, what is?