Criar variantes
Gera tints, shades, tons e uma escala 50–950 a partir de uma cor.
A partir de uma só cor, gera uma escala 50–950 pronta para um design system e as suas variantes mais claras, mais escuras e menos saturadas. Está em logaco.com/ferramentas/variantes.
Passos
Escolhe a cor base
Em Cor base, escreve o código hex ou escolhe a cor no selector. Ao lado tens a mesma cor em HEX, RGB, HSL e OKLCH: clica num para o copiar.
Vê as variantes
- Escala 50–950: o 50 é o mais claro e o 950 o mais escuro. A tua cor fica no passo com a luminosidade mais próxima, marcada como Base.
- Tints: a cor misturada com branco, de 10% em 10%.
- Shades: a cor misturada com preto, de 10% em 10%.
- Tons: a cor a perder saturação até ao cinzento, sem mudar a luminosidade.
Clica numa cor para copiar o código. Por baixo de cada uma vês o contraste sobre branco e sobre preto, com um visto quando passa o nível AA (4,5:1).
Guarda ou exporta
- Guardar 50–900 guarda a escala (uma paleta tem no máximo 10 cores, por isso o 950 fica de fora). Os tints, shades e tons têm cada um o seu Guardar.
- Exportar a escala 50–950: escolhe CSS, SCSS, JSON ou Tailwind,
dá o Nome das variáveis (por exemplo
marca) e clica em Copiar.
Partilhar
O endereço guarda a cor base (logaco.com/ferramentas/variantes?cor=6725D0).
No gerador, o botão
Ver variantes de cada faixa abre esta página já com essa cor.
Sem conta e com conta
Tudo funciona sem conta. Guardar sem sessão iniciada guarda neste dispositivo; com sessão, guarda na tua conta.