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.
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
- Escolha formato de cópia — Class pra utilities Tailwind, HEX pra ferramentas de design, rgb() pra variáveis CSS.
- Clique em qualquer swatch pra copiar o valor. Um check marca brevemente confirma.
- 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
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.