Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Escala de Cores do Tailwind CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Cor Base

Seletor de Cores

Feitiço

Nome

Usado como a chave da paleta em Tailwind, CSS e saída JSON.

Opções

Estilo

A saída v4 gera o formato moderno oklch() em CSS. A saída v3 gera valores em hex, ainda interpolados no espaço OKLCH.

Incluir o parada 950

Chroma: 100 Ajuste a saturação de cada parada. 100 mantém a chroma da cor de entrada.

Formato de Exportação

Formatar

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Escala de Cores do Tailwind CSS

Cole uma única cor em hex e obtenha imediatamente uma paleta completa de 50 a 950 no estilo do Tailwind com passos perceptualmente equilibrados. A escala é construída no espaço de cor OKLCH, então cada parada parece uma salto de luminosidade equilibrado para o olho humano — não apenas uma queda linear em RGB ou HSL.

Cole o resultado diretamente em seu tailwind.config.js, insira-o como propriedades CSS personalizadas ou variáveis SCSS, ou exporte como JSON para seu pipeline de tokens de design.

Como usar

Escolha uma cor base com o seletor de cores ou cole um valor em hex, como #464aff.
Dê um nome à paleta (por exemplo primary, brand, ou accent) — isso se torna a chave do objeto no código exportado.
Escolha Tailwind v4 (OKLCH) para o moderno oklch() CSS, ou Tailwind v3 (hex) para saída em hex clássica.
Ative ou desative a parada 950 e ajuste o controle de chroma para aumentar ou reduzir a saturação.
Escolha o formato de exportação — configuração do Tailwind, propriedades CSS personalizadas, variáveis SCSS ou JSON — e copie ou baixe o código gerado.
Clique em qualquer cor na prévia para copiar seu valor em hex para a área de transferência.

Características

Matemática perceptual OKLCH – Interpola a luminosidade e a chroma no espaço de cor OKLCH, para que cada parada entre 50 e 950 pareça um passo equilibrado para o olho humano.
Escala completa de 50 a 950 – Gera a paleta completa de 11 paradas, com a opção de remover a parada extra-escura 950 se apenas os 10 clássicos forem necessários.
Prévia interativa de cores – Veja todas as tons de uma olhada, clique em qualquer cor para copiar seu valor em hex e reajuste a escala instantaneamente enquanto digita.
Verificador de contraste WCAG – Cada parada é avaliada contra fundos brancos e pretos com badges de passo AA e AAA.
Múltiplos destinos de exportação – Saída em variáveis CSS, variáveis SCSS ou tokens de design simples. tailwind.config.js, :root Controle de aumento de chroma
– Um controle único ajusta a saturação em todas as paradas, permitindo aumentar a brilhância ou reduzir a saturação sem mudar o tom. Seguro no gamut
– A chroma é automaticamente limitada em cada nível de luminosidade, para que os valores em hex gerados sempre sejam exibidos dentro do sRGB. O que é o espaço de cor OKLCH?

ANUNCIADO Remover?

 Perguntas frequentes

OKLCH é um espaço de cor perceptual derivado do modelo Oklab. Ele representa uma cor como três valores — L (luminosidade percebida), C (chroma, ou intensidade de cor) e H (ângulo do tom). Diferentemente do HSL, o OKLCH é projetado para que uma mudança dada em L pareça a mesma mudança de luminosidade independentemente do tom. Isso o torna ideal para gerar escalas de cores onde cada passo precisa parecer uniformemente espaçado.

Por que o OKLCH é melhor que o HSL para escalas de cores?
O HSL foi projetado para ser fácil de calcular, não para corresponder à percepção humana. No HSL, cores com a mesma L podem parecer drasticamente diferentes em brilho — um amarelo na luminosidade 50% parece muito mais brilhante do que um azul na mesma luminosidade. O OKLCH corrige isso modelando como o olho realmente percebe a luminosidade, então uma escala construída no OKLCH produz tons visualmente equilibrados que o HSL não consegue alcançar.

O que significa uniformidade perceptual?
Um espaço de cor é perceptualmente uniforme quando distâncias numéricas iguais correspondem a diferenças percebidas iguais. Em outras palavras, se você mover o valor de luminosidade em uma quantidade igual duas vezes, o olho deve ver essas duas etapas como do mesmo tamanho. O OKLCH é aproximadamente perceptualmente uniforme, o que é o motivo de produzir gradientes suaves e escalas de cores uniformemente espaçadas.

O que significam os números de 50 a 950 nas paletas do Tailwind?
O Tailwind nomeia cada tom de uma paleta com um número de 50 (o tom mais claro) a 950 (o tom mais escuro), com 500 geralmente representando a cor base. Números mais baixos são mais claros e números mais altos são mais escuros. A escala de 11 paradas (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) oferece aos designers um vocabulário consistente em todas as cores do sistema.

primary