Como Configurar e Estender Cores no Tailwind CONFIG

Como Configurar e Estender Cores no Tailwind CONFIG com lógica de escala

O Tailwind usa uma convenção numérica que vai dos tons mais claros aos mais escuros. O tom 50 é quase branco com uma presença mínima da cor. O 100 e o 200 servem para fundos sutis. O 300 e o 400 começam a ter presença visual em badges, bordas e ilustrações. O 500 costuma representar a cor da marca em seu ponto mais reconhecível. O 600, 700, 800, 900 e 950 avançam para variações de maior profundidade.

Essa numeração cria uma linguagem comum entre design e código. Quando um designer pede um fundo mais suave, o desenvolvedor pode testar `brand-50` ou `brand-100`. Quando o botão precisa de hover mais forte, `brand-600` ou `brand-700` são candidatos naturais. Quando um texto precisa manter identidade da marca sem perder contraste, `brand-900` ou `brand-950` entram como opções robustas.

Escolhendo a cor base no tom 500

A cor base deve ser a expressão principal da identidade visual. Ela precisa funcionar em botão, link, gráfico, ícone e estado selecionado. Antes de assumir que uma cor é o tom 500, teste sua legibilidade com texto branco e com texto escuro. Se a cor for clara demais, talvez ela deva ocupar o 400. Se for escura demais, talvez ela esteja mais próxima do 600.

Uma boa regra prática é escolher o 500 como o ponto de maior reconhecimento da marca e construir a escala ao redor dele. Para tons claros, aumente a luminosidade e reduza a saturação para evitar fundos gritantes. Para tons escuros, reduza a luminosidade e controle a saturação para evitar cores sujas ou pesadas demais. Em modelos perceptuais como OKLCH, esse processo fica mais previsível porque a luminosidade acompanha melhor a percepção humana.

Calculando tons claros e escuros de forma algorítmica

Um algoritmo simples começa convertendo a cor base para um modelo com luminosidade separada. Em HSL, você pode variar o lightness. Em OKLCH, você pode variar L e ajustar C conforme o tom se afasta do 500. Tons muito claros costumam precisar de croma menor. Tons muito escuros também podem perder croma para manter aparência elegante.

A escala abaixo usa uma base azul corporativa em `#445AD8`. O 500 preserva a identidade principal. Os tons claros servem para superfícies e feedback discreto. Os tons escuros servem para hover, contraste e títulos com identidade de marca.

Código pronto para theme.extend no tailwind.config.js

Cole o bloco abaixo dentro de `theme.extend` no arquivo `tailwind.config.js`. Depois disso, classes como `bg-corporate-500`, `text-corporate-900`, `border-corporate-200` e `hover:bg-corporate-700` ficam disponíveis em todo o projeto.

{
  "colors": {
    "corporate": {
      "50": "#F4F6FF",
      "100": "#E8ECFF",
      "200": "#C9D2FF",
      "300": "#9EADFF",
      "400": "#6F80F0",
      "500": "#445AD8",
      "600": "#3345BA",
      "700": "#283795",
      "800": "#202D76",
      "900": "#1A245F",
      "950": "#151D4F"
    }
  }
}

<button class="rounded-xl bg-corporate-500 px-5 py-3 font-black text-white transition hover:bg-corporate-700 focus:ring-4 focus:ring-corporate-200">
  Começar agora
</button>