Idioma:Português
Chromoforge

Gerador de variáveis de cores CSS

Comece com uma cor e receba um bloco :root pronto para copiar. Ele inclui a cor base, uma cor legível para o texto e onze tons primários.

Gerar CSS

A redução de croma conserva luminosidade e matiz antes do arredondamento HEX. Original mantém as paletas e os links anteriores.

Use HEX, RGB, HSL ou OKLCH. OKLCH aceita luminosidade/chroma numéricas ou percentuais e unidades angulares. Apenas cores opacas; valores fora de sRGB são limitados com um aviso.

Cor selecionada#E24B4ATexto sobre esta cor: #111111

Escala de tons 50–950

:root {
  --brand: #E24B4A;
  --on-brand: #111111;
  --primary-50: #FFEEEC;
  --primary-100: #FFDDD8;
  --primary-200: #FFBCB5;
  --primary-300: #F5918A;
  --primary-400: #E24B4A;
  --primary-500: #C1282F;
  --primary-600: #9A000A;
  --primary-700: #7B0000;
  --primary-800: #5C0000;
  --primary-900: #410000;
  --primary-950: #2E0000;
}
Converter esta corVerificar texto e fundo

De uma cor aos tokens CSS

  1. Digite uma cor HEX, RGB, HSL ou OKLCH ou use o seletor. O resultado é atualizado aqui.
  2. Copie o bloco :root inteiro ou baixe um arquivo CSS. Cada tom também pode ser copiado separadamente.
  3. Use var(--brand), var(--on-brand) e de var(--primary-50) a var(--primary-950) na sua folha de estilos.

Confira os papéis antes de usar a escala

A cor original é preservada na posição mais próxima da escala. Os números dos tons são rótulos, não garantias de contraste. --on-brand é escolhido apenas para texto opaco sobre --brand; confira os outros pares separadamente. Para mais harmonias e formatos de exportação, continue na ferramenta principal.

Continue com a sua cor

Gerador de tons de coresGere onze tons de 50 a 950 a partir de uma cor HEX, RGB ou HSL. Preserve a cor original e exporte CSS, Tailwind v3/v4 ou JSON.Conversor de cores: HEX, RGB, HSL e OKLCHConverta HEX, RGB, HSL ou OKLCH em HEX, RGB, HSL e OKLCH na hora. Copie cada formato ou uma variável CSS. Grátis, local e sem conta.Verificador de contraste WCAGConfira o contraste de texto e fundo e veja os resultados AA e AAA. Digite duas cores HEX para calcular a taxa no navegador.