AZ Tools

Paleta de Cores Tailwind

Cor

Referência visual da paleta padrão inteira do Tailwind (v3.4 e v4 compartilham os mesmos valores). Cada swatch mostra número do tom e HEX, com toggle de modo de cópia pra pegar o valor no formato que seu codebase quiser: `bg-slate-700`, `#334155` ou `rgb(51, 65, 85)`. A busca filtra por nome de matiz ou substring HEX.

Copiar:

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Valores de tema padrão pro Tailwind CSS v3.4 / v4.

Como usar

  1. Escolha formato de cópia — Class pra utilities Tailwind, HEX pra ferramentas de design, rgb() pra variáveis CSS.
  2. Clique em qualquer swatch pra copiar o valor. Um check marca brevemente confirma.
  3. Digite um matiz (`emerald`) ou fragmento HEX (`fde0`) pra filtrar.

Perguntas frequentes

Corresponde ao Tailwind v4?
Sim — o tema padrão do v4 mantém os mesmos valores de matiz/tom do v3.4, então a paleta é idêntica. Se você customizou `theme.colors` na config, a paleta do seu projeto pode diferir.
Por que há cinco cinzas?
Tailwind oferece slate / gray / zinc / neutral / stone como cinco matizes neutros com undertones ligeiramente diferentes: slate tende ao azul frio, gray é neutro, zinc é mais frio/aço, neutral é neutro puro, stone é taupe quente. Escolha o que combina com seu accent.
O que significa tom 950?
Tailwind adicionou um passo 950 mais escuro em v3.3 junto à escada existente 50–900. É quase preto com leve tom do matiz, útil pra fundos dark profundos e bordas muito sutis.

Ferramentas relacionadas