Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de variações de cor

Color Shades Generator

Gere de 3 a 20 tons determinísticos em torno de uma cor-base, fixada no centro e limitada antes do preto e do branco puros, como variáveis CSS.

Caminho da tarefa / da entrada ao resultado

Defina a cor base

Roda localmente · Nada é enviado

Como Gerador de variações de cor funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como gerar uma escala de tons de cor

  1. 01

    Defina a cor base

    Insira um valor hexadecimal em Cor base — #RGB, #RGBA, #RRGGBB e #RRGGBBAA funcionam, e o campo abre com #6D5EF8. A cor base sempre fica no meio da escala final.

  2. 02

    Escolha o número de tons

    Defina o Número de tons como um inteiro de 3 a 20 — o padrão é 9. Uma contagem ímpar equilibra os lados mais escuros e mais claros uniformemente ao redor da base; uma contagem par ainda centraliza a base e dá ao lado claro uma amostra a mais.

  3. 03

    Gere a rampa

    Pressione Gerar tons. A paleta vai de tons profundos, passando pela sua cor base, até tinturas claras, e cada amostra é numerada e rotulada com seu valor hexadecimal, então a posição 1 é sempre o passo mais escuro.

  4. 04

    Confira o comportamento da mescla

    Os tons abaixo da base são misturados em direção ao preto e as tinturas acima dela em direção ao branco, mas a mescla nunca vai além de 78% do caminho até qualquer extremo. Os passos finais permanecem cromáticos e utilizáveis em vez de colapsar em quase-preto ou quase-branco.

  5. 05

    Carregue a escala de exemplo

    Pressione Carregar exemplo para gerar sete tons ao redor de #0EA5E9 — uma execução de referência completa que você pode inspecionar antes de inserir a cor da sua marca. Redefinir restaura a base #6D5EF8 e a contagem de 9.

  6. 06

    Copie ou baixe os tokens

    Pressione Copiar saída para copiar um bloco :root de custom properties --toolars-shade-1 …, ou Baixar para salvá-lo como toolars-color-shades.css, pronto para colar em uma folha de estilos. Cada cartão de amostra também mostra seu valor hexadecimal para cópias pontuais.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de variações de cor usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de variações de cor realmente faz

Uma cor de marca chega como um único valor hexadecimal, mas uma interface real precisa de uma escala inteira: um estado de hover mais escuro, uma tintura de fundo sutil, uma borda a um passo da base. Escolher esses passos no olho deriva entre telas e entre membros da equipe. O Gerador de variações de cor interpola a rampa deterministicamente ao redor da sua cor base, mantendo a base fixada no meio e os extremos longe do preto e do branco puros. Ele exporta o resultado como custom properties CSS com nomes numerados estáveis, prontas para um arquivo de tokens de design — calculado localmente, nunca enviado.

Perguntas frequentes

Quantos tons uma escala pode ter?
Entre 3 e 20, definidos no campo Número de tons; o espaço de trabalho usa 9 por padrão. Uma contagem fora desse intervalo é rejeitada com uma mensagem que indica o limite.
Como a escala é calculada?
Deterministicamente: tons abaixo da base são misturados em direção ao preto, tinturas acima dela em direção ao branco, e a própria cor base sempre ocupa a posição central. A mescla é limitada a 78% em direção a qualquer extremo, então nenhum passo chega ao preto ou branco puro e cada parada continua utilizável.
O que muda com um número par de tons?
A cor base ainda ocupa a posição central, mas os dois lados não conseguem espelhar um ao outro exatamente: uma contagem par dá ao lado mais claro uma amostra a mais que o lado mais escuro. Escolha uma contagem ímpar como 9 ou 11 quando quiser uma rampa perfeitamente simétrica.
A escala preserva a transparência?
Sim. Se a cor base carrega um byte de alfa — por exemplo #6D5EF8CC — o mesmo alfa é mantido em toda a rampa, e os valores hexadecimais exportados ganham o byte de alfa sempre que o alfa da base for menor que 1.
Que formato a exportação usa?
Um bloco :root de custom properties CSS chamadas --toolars-shade-1 a --toolars-shade-N contendo os valores hexadecimais, disponível para download como arquivo .css ou para copiar para a área de transferência. Cada cartão de amostra também exibe seu valor hexadecimal para cópia direta.
A cor é enviada para algum lugar?
Não. Toda a rampa é calculada dentro desta aba do navegador, entradas e resultados nunca saem dela, e nenhuma conta é necessária.

Continue lendo

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar