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.

Paleta de Cores Tailwind

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

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

Ordenar Cores

Cole uma lista de cores hex e ordene por matiz, saturação, claridade ou brilho percebido — útil pra organizar uma paleta de tokens de design.

Cor 0 0

Gerador de Tons Claros e Escuros

Gere tints (mais claros), shades (mais escuros) e tons (com cinza) de qualquer cor base — 2 a 20 passos, em HEX, RGB ou HSL.

Cor 0 0

Gerador de Paleta de Cores

Escolha uma cor base, obtenha harmonias clássicas de roda de cores — complementar, split-complementar, triádica, tetrádica, quadrado, análoga, monocromática.

Cor 0 0

Paleta de Cor a partir de Imagem

Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.

Cor 0 0

Exportador de Tokens de Cor

Defina uma paleta de cores uma vez, exporte para CSS custom properties, config Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color ou `colors.xml` Android. Swatches de pré-visualização ao vivo.

Cor 0 0

Buscador de nome de cor

Encontre o nome de cor CSS, Tailwind ou XKCD mais próximo de qualquer hex/RGB — ordenado por distância perceptual em OKLab.

Cor 0 0