LÂMINA · CORES
Gerador de escala Tailwind (50–950)
Cola a cor da marca e leva os 11 tons no padrão do Tailwind — interpolados em OKLCH pra escala ficar uniforme no olho, com o bloco do tailwind.config e as CSS variables prontos.
tailwind.config
marca: {
50: '#fff2ef',
100: '#ffe0da',
200: '#ffc8bf',
300: '#ffa698',
400: '#f77363',
500: '#e64436',
600: '#ca2f23',
700: '#ad261c',
800: '#8e231a',
900: '#74221a',
950: '#4a130e',
}CSS variables
:root {
--marca-50: #fff2ef;
--marca-100: #ffe0da;
--marca-200: #ffc8bf;
--marca-300: #ffa698;
--marca-400: #f77363;
--marca-500: #e64436;
--marca-600: #ca2f23;
--marca-700: #ad261c;
--marca-800: #8e231a;
--marca-900: #74221a;
--marca-950: #4a130e;
}Processado no seu navegador — seus arquivos não saem do seu computador.
Como funciona
-
Escolha a cor-base
Digite o hex da cor da marca ou use o seletor visual. Vale rgb(), hsl() e oklch() também — a escala recalcula enquanto você digita.
-
Confira os 11 tons
A régua mostra do 50 (quase branco) ao 950 (quase preto), com a sua cor ancorando o meio da escala. Clique em qualquer tom pra copiar o hex dele.
-
Copie no formato do seu projeto
Dois blocos prontos: o objeto pro tailwind.config e as variáveis CSS pro :root. Cada um com o próprio botão copiar.
Perguntas frequentes
Por que a escala é gerada em OKLCH?
Porque no OKLCH a luminosidade é perceptual: o salto do 300 pro 400 parece igual ao do 600 pro 700 — exatamente como nas paletas oficiais do Tailwind, que também são desenhadas em OKLCH. Gerar em HSL deixaria uns tons estourados e outros mortos.
Como uso a escala no tailwind.config?
Copie o bloco e cole em theme.extend.colors do seu tailwind.config (ou num @theme do Tailwind 4). Aí é usar como qualquer cor nativa: bg-marca-500, text-marca-700, border-marca-200. Renomeie "marca" pro nome que quiser.
Minha cor original aparece na escala?
A escala preserva o matiz e ancora a intensidade da sua cor no tom 500; a luminosidade de cada degrau segue o padrão do Tailwind. Se a sua cor for bem clara ou bem escura, o tom mais parecido com ela pode ser o 300 ou o 700 — é o comportamento esperado.
Pra que servem os tons extremos como 50 e 950?
O 50 e o 100 são fundos: hover de item, fundo de badge, faixa de tabela. O 900 e o 950 são textos sobre fundos claros e fundos no dark mode. Regra prática: fundo claro + texto 700+ da mesma escala quase sempre passa no contraste AA.
Funciona pra quem não usa Tailwind?
Sim. O segundo bloco sai como variáveis CSS puras (--marca-50 a --marca-950) prontas pro :root de qualquer projeto — com ou sem framework.
Minha cor é enviada pra algum servidor?
Não. A escala é calculada dentro do seu navegador, no seu aparelho. Nada sai do seu computador.