Gerador de Tons de Cor

Gere variações mais claras de uma cor adicionando branco, criando tons brilhantes e aéreos para estéticas de design frescas

Quantas variações de tom gerar

Luminosidade máxima (0.1-1.0)

Valores separados por vírgula (ex: 0.1,0.3,0.5,0.7,0.9)

Fatos principais

Categoria
Design e cor
Tipos de entrada
color, select, number, text, checkbox
Tipo de saída
html
Cobertura de amostras
3
API disponível
Yes

Visão geral

O Gerador de Tons de Cor permite criar variações mais claras de qualquer cor base, adicionando branco de forma precisa para obter tons brilhantes, pastéis ou suaves, ideais para composições de design equilibradas.

Quando usar

  • •Ao criar paletas de cores para interfaces de usuário que exigem tons pastéis ou variações de destaque.
  • •Quando precisar de uma escala de cores consistente para elementos de design, como botões ou fundos.
  • •Para ajustar a luminosidade de uma cor base mantendo a harmonia visual em projetos gráficos.

Como funciona

  • •Selecione a sua cor base utilizando o seletor de cores.
  • •Escolha o método de mistura (como Linear, HSL ou Pastel) para definir como o branco será aplicado.
  • •Ajuste o número de variações e a intensidade desejada para controlar o brilho final.
  • •Visualize os códigos HEX, RGB e HSL gerados para aplicar diretamente no seu software de design.

Casos de uso

Desenvolvimento de sistemas de design (Design Systems) com escalas de cores claras para estados de hover ou fundos.
Criação de ilustrações com profundidade usando variações de luminosidade da mesma paleta cromática.
Design de interfaces web que utilizam tons pastéis para transmitir uma estética leve e moderna.

Exemplos

1. Paleta de Tons Pastéis para UI

Designer de UI
Contexto
Preciso criar uma série de botões secundários que sejam variações suaves de uma cor de marca vibrante.
Problema
Manter a consistência da marca enquanto garanto que os botões tenham contraste suficiente e um visual leve.
Como usar
Defini a cor base da marca, selecionei o método 'Pastel' e configurei para gerar 5 variações com distribuição 'equal'.
Configuração de exemplo
tintMethod: pastel, tintCount: 5, stepType: equal
Resultado
Obtive uma escala de 5 tons pastéis harmoniosos que mantêm a identidade da marca, mas com a suavidade necessária para elementos secundários.

2. Escala de Brilho para Gráficos

Analista de Dados
Contexto
Estou criando um gráfico de barras onde cada categoria precisa de uma tonalidade diferente da mesma cor base.
Problema
Diferenciar as categorias visualmente sem usar cores totalmente distintas que poluem o gráfico.
Como usar
Utilizei a cor base do gráfico, selecionei o método 'Linear' e a distribuição 'exponential' para criar variações que vão do escuro ao muito claro.
Configuração de exemplo
tintMethod: linear, tintCount: 4, stepType: exponential
Resultado
Uma paleta de 4 tons que permite diferenciar os dados de forma intuitiva, mantendo a legibilidade e o profissionalismo do gráfico.

Testar com amostras

design
Exemplos de códigos de cor
Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação
title token color
sample
Amostras ICS do Agendador por Fuso Horario
Arquivos ICS na mesma estrutura retornada pelo Time Zone Workflow Scheduler, com varios VEVENT de horarios candidatos
task generate
sample
Exemplos PDF
Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10
task generate
sample

Hubs relacionados

Ferramentas de Design para Generate
Explore 19 ferramentas de design para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Design para Convert
Explore 98 ferramentas de design para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Json para Generate
Explore 33 ferramentas de json para fluxos de generate e encontre utilitários próximos com rapidez.
Ferramentas de Pdf para Generate
Explore 11 ferramentas de pdf para fluxos de generate e encontre utilitários próximos com rapidez.

FAQ

O que é um 'tom' (tint) de cor?

Um tom é criado adicionando branco a uma cor pura, o que aumenta a sua luminosidade e diminui a saturação, resultando em cores mais claras e suaves.

Quais métodos de mistura estão disponíveis?

Oferecemos diversos métodos, incluindo Linear, HSL, LAB, Correção Gama e Efeito Pastel, cada um alterando a cor base de forma matemática distinta.

Posso exportar os valores das cores geradas?

Sim, a ferramenta exibe automaticamente os códigos HEX, RGB e HSL de cada variação gerada para facilitar a cópia e uso.

Quantas variações posso gerar de uma vez?

Você pode gerar entre 2 a 12 variações de tons a partir de uma única cor base.

A ferramenta funciona para criar paletas completas?

Sim, ao ativar a opção de gerar paleta estendida, você obtém uma sequência organizada de tons que podem ser usados como uma paleta de design coesa.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-tint

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
baseColor color Sim -
tintMethod select Não -
tintCount number Não Quantas variações de tom gerar
intensity number Não Luminosidade máxima (0.1-1.0)
stepType select Não -
customSteps text Não Valores separados por vírgula (ex: 0.1,0.3,0.5,0.7,0.9)
includeOriginal checkbox Não -
showHexCodes checkbox Não -
showRgbValues checkbox Não -
showHslValues checkbox Não -
generatePalette checkbox Não -

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-color-tint": {
      "name": "color-tint",
      "description": "Gere variações mais claras de uma cor adicionando branco, criando tons brilhantes e aéreos para estéticas de design frescas",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-tint",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]