FerramentasDev.

Gerador de escala de cores

Gere tons de 50 a 950 no estilo Tailwind a partir de uma cor.

Cor base
// tailwind.config.js → theme.extend.colors
primary: {
  50: "#eef8f5",
  100: "#dbefe9",
  200: "#bee2d8",
  300: "#96cebe",
  400: "#66b39f",
  500: "#3b9b86",
  600: "#16816c",
  700: "#086e5c",
  800: "#0f5c4d",
  900: "#114a3e",
  950: "#073129",
},

Para que serve uma escala de cores

Design systems usam cada cor em vários tons: os claros (50–200) para fundos e estados de hover, os médios (400–600) para botões e links, e os escuros (700–950) para textos e bordas. Gerar a escala a partir da cor da marca garante consistência em toda a interface.

Como usar

  1. Escolha a cor da marca no seletor ou cole o HEX.
  2. Dê um nome para a cor (primary, brand, accent...).
  3. Clique em um tom para copiar o HEX, ou copie o código pronto para Tailwind, CSS ou SCSS.

Perguntas frequentes

Como a escala é calculada?

A partir da sua cor, cada tom recebe uma luminosidade fixa no espaço de cor OKLCH, calibrada com base nas escalas do Tailwind, mantendo o mesmo matiz. A saturação diminui nos tons muito claros e muito escuros, como acontece em paletas profissionais.

Minha cor aparece exatamente na escala?

Sim. O tom com luminosidade mais próxima da sua cor (marcado como “base”) usa exatamente o HEX que você escolheu.

Como uso no Tailwind?

No Tailwind v3, cole o objeto dentro de theme.extend.colors no tailwind.config.js. No v4, cole o bloco @theme no seu CSS. Depois use classes como bg-primary-500 e text-primary-900.