Create Tailwind CSS shades from your brand colors

When using Tailwind CSS to style your UI, you might have noticed that they use a shade system for colors. Usually when you pick brand colors though, you don't necessarily pick all shades for them but only a few specific colors.

To create shades that you can easily use in your Tailwind CSS classes and therefore in your UI, you can use the uicolors.app tool.

It allows you to enter the hex code of your brand color and will generate all the shades for you, as well as give you recommendations on what shades to use where in your UI including contrast ratios.