Como o Gerador de Cores Tailwind monta a escala 50-950?

Ele converte sua cor para OKLCH, mantém a matiz, rampa a luminosidade pelos onze passos do Tailwind e reduz a croma em direção aos extremos. OKLCH é perceptualmente uniforme, então cada passo parece igualmente espaçado em vez de se aglomerar nos médios como fazem as rampas HSL simples.

Por que minha cor de marca cai em 400 ou 600 em vez de 500?

O gerador alinha sua entrada ao passo cuja luminosidade alvo está mais próxima dela e preserva sua cor exata ali. Uma cor de marca mais clara ancora perto de 300-400 e uma mais escura perto de 600-700, então a escala sempre contém a cor que você digitou.

O que significam os números de contraste em cada amostra?

São razões de contraste WCAG 2.x daquele tom contra preto puro e branco puro. Um selo verde é de pelo menos 4,5:1 (AA para texto normal) e âmbar é de pelo menos 3:1 (AA para texto grande ou UI). Use-os para escolher combinações de texto e fundo.

Posso colar rgb(), hsl() ou uma cor nomeada em vez de hex?

Sim. Qualquer string de cor CSS funciona — #7c3aed, rgb(124 58 237), hsl(262 83% 58%), ou um nome como rebeccapurple. A ferramenta a analisa, converte para OKLCH e monta a escala do mesmo jeito.

Como uso a saída no meu projeto?

Copie o bloco tailwind.config para theme.extend.colors e referencie classes como bg-brand-500 ou text-brand-800. Ou copie a versão de variáveis CSS e use var(--brand-500) em qualquer lugar no CSS puro. Renomeie a chave mudando o campo de nome da cor.

As cores que eu digito são enviadas para algum lugar?

Não. A escala inteira — análise, a matemática OKLCH, as razões de contraste e ambos os formatos de saída — é calculada no seu navegador. A cor de marca que você digita ou escolhe nunca sai do seu dispositivo e não é enviada à ArrayKit.

Gerador de Cores Tailwind

Transforme uma cor de marca em uma escala Tailwind completa de 50-950 em OKLCH, com contraste WCAG por tom, direto no seu navegador.

O Gerador de Cores Tailwind roda inteiramente no seu navegador. A cor de marca que você digita e os tons gerados são calculados no seu dispositivo e nunca são enviados à ArrayKit.

Abrir o Conversor de Cores CSS

Sobre Gerador de Cores Tailwind

O Gerador de Cores Tailwind transforma uma única cor de marca em uma escala de tons completa 50, 100, 200 … 900, 950 que você pode colar direto no tailwind.config. Em vez de adivinhar valores hex, ele interpola a luminosidade em OKLCH — um espaço perceptualmente uniforme — para que cada passo pareça igualmente espaçado, e alinha sua entrada ao passo mais próximo para que a paleta realmente contenha a sua cor de marca exata. Cada amostra mostra seu hex mais a razão de contraste WCAG contra preto e contra branco, para que você saiba de relance quais tons são seguros para texto. Copie a escala inteira como um bloco theme.colors ou como propriedades personalizadas CSS. Cole qualquer cor CSS — hex, rgb(), hsl(), ou uma cor nomeada como rebeccapurple. Tudo é calculado no seu dispositivo; as cores que você digita nunca saem do navegador.

Recursos

Gere uma escala Tailwind completa de 50-950 a partir de uma cor de marca
Luminosidade interpolada em OKLCH para passos perceptualmente uniformes
Cor de entrada alinhada e preservada no seu passo mais próximo
Contraste WCAG por tom contra preto e branco, com selos AA
Aceita hex, rgb(), hsl() e cores CSS nomeadas
Copie um bloco theme.colors do tailwind.config pronto para colar
Copie a mesma escala como propriedades personalizadas CSS em :root
Clique em qualquer amostra para copiar seu hex; prévia ao vivo do gradiente da rampa

Como usar Gerador de Cores Tailwind

Digite ou escolha sua cor de marca (hex, rgb(), hsl(), ou um nome)
Defina um nome de cor — ele vira a chave, ex.: brand ou accent
Leia os selos de contraste WCAG por tom para identificar passos seguros para texto
Alterne entre a saída tailwind.config e variáveis CSS
Copie o bloco, ou clique em uma amostra para pegar seu hex

Exemplo

Entrada

#7c3aed  (name: brand)

Saída

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

Um hex violeta se expande em uma escala 50-950 espaçada em OKLCH indexada como brand.

Erros comuns e solução de problemas

O tom 500 não corresponde exatamente ao hex da minha marca. — Sua cor é ancorada ao passo mais próximo por luminosidade, que pode ser 400 ou 600 em vez de 500. Procure a amostra cujo hex é igual à sua entrada — esse é o passo âncora que a reproduz fielmente.
O tom 50 ou 950 parece um pouco desbotado ou sujo. — A croma é reduzida em direção aos extremos para que o quase-branco e o quase-preto continuem críveis. Se quiser mais saturação nas pontas, comece de uma cor de marca um pouco mais cromática.
Nada é gerado depois que digito uma cor. — O valor precisa ser uma cor CSS analisável. Use um hex completo como #7c3aed, uma função rgb()/hsl(), ou um nome de cor CSS; um hex parcial como #7c ainda não é válido.
Texto claro nos meus tons médios falha na verificação de contraste. — Use os selos por tom: verde atende ao WCAG AA (4,5:1) e âmbar atende ao AA de texto grande (3:1). Escolha um passo mais escuro (700-900) para texto de corpo sobre um fundo claro.

Perguntas frequentes

Como o Gerador de Cores Tailwind monta a escala 50-950?: Ele converte sua cor para OKLCH, mantém a matiz, rampa a luminosidade pelos onze passos do Tailwind e reduz a croma em direção aos extremos. OKLCH é perceptualmente uniforme, então cada passo parece igualmente espaçado em vez de se aglomerar nos médios como fazem as rampas HSL simples.
Por que minha cor de marca cai em 400 ou 600 em vez de 500?: O gerador alinha sua entrada ao passo cuja luminosidade alvo está mais próxima dela e preserva sua cor exata ali. Uma cor de marca mais clara ancora perto de 300-400 e uma mais escura perto de 600-700, então a escala sempre contém a cor que você digitou.
O que significam os números de contraste em cada amostra?: São razões de contraste WCAG 2.x daquele tom contra preto puro e branco puro. Um selo verde é de pelo menos 4,5:1 (AA para texto normal) e âmbar é de pelo menos 3:1 (AA para texto grande ou UI). Use-os para escolher combinações de texto e fundo.
Posso colar rgb(), hsl() ou uma cor nomeada em vez de hex?: Sim. Qualquer string de cor CSS funciona — #7c3aed, rgb(124 58 237), hsl(262 83% 58%), ou um nome como rebeccapurple. A ferramenta a analisa, converte para OKLCH e monta a escala do mesmo jeito.
Como uso a saída no meu projeto?: Copie o bloco tailwind.config para theme.extend.colors e referencie classes como bg-brand-500 ou text-brand-800. Ou copie a versão de variáveis CSS e use var(--brand-500) em qualquer lugar no CSS puro. Renomeie a chave mudando o campo de nome da cor.
As cores que eu digito são enviadas para algum lugar?: Não. A escala inteira — análise, a matemática OKLCH, as razões de contraste e ambos os formatos de saída — é calculada no seu navegador. A cor de marca que você digita ou escolhe nunca sai do seu dispositivo e não é enviada à ArrayKit.

Ferramentas relacionadas

Conversor de cores CSS — Converta entre HEX, RGB e HSL com uma amostra ao vivo.
Verificador de contraste — Verifique a relação de contraste WCAG e se passa em AA/AAA entre duas cores.
Conversor de Formato de Cor — Veja uma cor em HEX, RGB, HSL, OKLCH e mais de uma vez.
Gerador de Meta Tags — Gere meta tags de SEO, Open Graph e Twitter Card a partir de um formulário, no navegador.
Gerador de CSS Grid — Monte um layout de grid visualmente e copie o CSS.
Gerador de Open Graph — Gere meta tags Open Graph e Twitter com prévia do card social.