Question 1

What is the difference between shades and tints?

Accepted Answer

A shade is a color mixed with black — it gets darker. A tint is a color mixed with white — it gets lighter. A complete palette typically includes both.

Question 2

How many colors should a CSS palette have?

Accepted Answer

For a UI design system, 9–11 steps (50 through 900 or 950) per color is the standard, popularized by Tailwind CSS and Material Design.

Question 3

Should I use HEX, RGB, or HSL in CSS?

Accepted Answer

HEX is the most concise for static colors. HSL is best for palette generation because it maps to human perception. RGB is useful for rgba transparency. For production, define your palette as variables and use them everywhere.

Question 4

Can I use this palette in Tailwind CSS?

Accepted Answer

Yes — add the generated colors to tailwind.config.js under theme.extend.colors. Then use them as bg-primary-400, text-primary-900, etc.

Guia Completo de Paletas de Cores CSS

Sistema de Paleta com Variáveis CSS

Perguntas Frequentes