Tools
Colors
By default, during development, we will use a tool called UnoCSS to help us generate the everything about stylesheet, it’s a great tool that works just the same as Tailwind.
Therefore, for basic color palettes, they are being listed under Colors - Core concepts - Tailwind CSS.
Generally, we will use neutral, pink, violet and cyan for default theme. Either of UnoCSS or Tailwind supports opacity adjustment based on color, but according to Refactoring UI:
when ever we wanted to change the chroma of the color, we should try to avoid using opacity, but rather hand pick the best solid, non-alpha channel included colors for the best contrast.
So, unless opacity is part of the typography design, please try to pick a best solid color for better readability.
Another great tool we use is called Radix Colors, it’s kind of the building blocks of our interactive UI elements, since they built great color palettes with nice color theory backed, you can pick the suitable color from the palette as well.
You may already learned that a complementary color is, it was useful for the color contrast, here are several nice tools can help you choose the complementary color quickly and interactively: