Gerador de tons de cor

Gere escalas de tons claros e escuros com variáveis CSS exportáveis.

O Gerador de tons de cor cria escalas de tons claros e escuros a partir de uma cor base, pré-visualiza como barra de gradiente e exporta propriedades CSS prontas para uso.

Cor

Quantidade

Modo

Saída

{
  "mode": "tint",
  "count": 5,
  "colors": [
    "#4c7fef",
    "#739bf2",
    "#9ab7f6",
    "#c1d2f9",
    "#e8eefd"
  ],
  "cssVars": "--shade-1: #4c7fef;\n--shade-2: #739bf2;\n--shade-3: #9ab7f6;\n--shade-4: #c1d2f9;\n--shade-5: #e8eefd;"
}

Como usar

Escolha uma cor base.
Escolha quantos passos e se deseja tons claros, escuros ou ambos.
Copie as cores ou as variáveis CSS.

Perguntas frequentes

Como os tons claros e escuros são criados?

A luminosidade é interpolada em direção ao branco para claros e ao preto para escuros.

A paleta pode ser compartilhada?

Sim, cor, quantidade e modo são armazenados nos parâmetros de consulta da URL.

Gerador de paletas de cores

Crie paletas de cores harmoniosas com modos aleatório, análogo, complementar e triádico.

Conversor de cores

Converta cores entre HEX, RGB, HSL e HSV instantaneamente.

Verificador de contraste de cores

Verifique taxas de contraste WCAG para texto e interface acessíveis.

Simulador de daltonismo

Veja como imagens aparecem para os tipos comuns de daltonismo.

Gerador de gradientes de cor

Crie gradientes lineares CSS com cores e direções personalizadas.

Localizador de nomes de cores

Encontre o nome de cor CSS mais próximo para qualquer valor de cor.