Gerador de Paleta Tailwind – Escala 50 a 950 em OKLCH a partir de uma cor
Digite uma cor e receba a escala 50–950 no padrão do Tailwind v4, em OKLCH, pronta para @theme, tailwind.config ou variáveis CSS.
Classes geradas: bg-marca-500
- 50#f5f4fd
oklch(97.1% 0.0124 292.72)
Branco 1,09 · Preto 19,27
- 100#eae7fc
oklch(93.6% 0.0289 292.72)
Branco 1,21 · Preto 17,30
- 200#dad3fa
oklch(88.5% 0.0537 292.72)
Branco 1,43 · Preto 14,69
- 300#c2b5fb
oklch(80.8% 0.0991 292.72)
Branco 1,86 · Preto 11,27
- 400#a58afc
oklch(70.7% 0.1632 292.72)
Branco 2,74 · Preto 7,65
- 500#936afb
oklch(63.7% 0.2065 292.72)
Branco 3,69 · Preto 5,69
- 600Base#8b5cf6
oklch(60.56% 0.2189 292.72)
Branco 4,23 · Preto 4,96
- 700#6e40cb
oklch(50.5% 0.2024 292.72)
Branco 6,46 · Preto 3,25
- 800#5b37a8
oklch(44.4% 0.1714 292.72)
Branco 8,26 · Preto 2,54
- 900#4b3386
oklch(39.6% 0.1322 292.72)
Branco 9,90 · Preto 2,12
- 950#291c4b
oklch(27% 0.0847 292.72)
Branco 15,46 · Preto 1,36
Contraste em verde atinge 4,5:1 (WCAG AA para texto normal). A cor informada fica exata no passo com luminosidade mais próxima; os demais têm luminosidade fixa por passo e croma reduzido nas pontas.
Cole no seu CSS principal, depois do @import "tailwindcss". Gera bg-marca-500, text-marca-700 etc.
@theme {
--color-marca-50: oklch(97.1% 0.0124 292.72);
--color-marca-100: oklch(93.6% 0.0289 292.72);
--color-marca-200: oklch(88.5% 0.0537 292.72);
--color-marca-300: oklch(80.8% 0.0991 292.72);
--color-marca-400: oklch(70.7% 0.1632 292.72);
--color-marca-500: oklch(63.7% 0.2065 292.72);
--color-marca-600: oklch(60.56% 0.2189 292.72);
--color-marca-700: oklch(50.5% 0.2024 292.72);
--color-marca-800: oklch(44.4% 0.1714 292.72);
--color-marca-900: oklch(39.6% 0.1322 292.72);
--color-marca-950: oklch(27% 0.0847 292.72);
}Como usar esta ferramenta
- Digite a cor da marca em HEX, rgb(), hsl() ou oklch(), ou escolha no seletor
- Dê um nome à cor: ele vira o nome das classes, como bg-marca-500
- Confira nas amostras o HEX e o contraste de cada passo contra branco e preto
- Escolha o formato (Tailwind v4, v3 ou variáveis CSS) e copie o código
Sobre esta ferramenta
O que é
Uma escala de cor 50–950 é a sequência de tons do mais claro ao mais escuro que o Tailwind usa em classes como bg-blue-100 e text-blue-900. Gerar essa escala em HSL dá degraus desiguais, porque a luminosidade do HSL não corresponde à percebida; em OKLCH o mesmo passo tem a mesma claridade em qualquer matiz, e trocar uma cor por outra no layout mantém o contraste.
Quando usar
- Criar a cor primária de um projeto a partir do HEX da marca
- Migrar uma paleta customizada do Tailwind v3 para o @theme do v4
- Descobrir quais passos da escala passam em AA com texto branco ou preto
- Gerar variáveis CSS de tons para um projeto sem Tailwind
Segurança
Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.
Perguntas frequentes
- Por que minha cor não ficou no passo 500?
- Porque ela vai para o passo com a luminosidade mais parecida. Uma cor clara como #dbeafe tem luminosidade OKLCH perto de 0,93 e entra no 100; forçá-la no 500 deixaria a escala inteira clara demais e quebraria a equivalência com as outras cores do Tailwind.
- Qual a diferença entre o formato v4 e o v3?
- No Tailwind v4 as cores são declaradas no CSS, dentro de @theme, como --color-marca-500: oklch(...). No v3 elas vão no objeto theme.extend.colors do tailwind.config.js; ali exportamos em HEX, porque o v3 não gera fallback para navegadores sem suporte a oklch.
- O que acontece com tons que não cabem na tela?
- Em luminosidades muito altas ou muito baixas, o croma pedido pode não existir no sRGB. Nesse caso o croma é reduzido até a cor caber, mantendo luminosidade e matiz — como recomenda o CSS Color 4. Cortar os canais RGB diretamente mudaria o tom da cor.
- Para que serve o contraste mostrado em cada amostra?
- É a razão WCAG do passo contra branco e contra preto. Valores a partir de 4,5:1 (em verde) passam em AA para texto normal: ajuda a decidir, por exemplo, se o botão bg-marca-600 aceita texto branco.