# 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 > Página canônica: https://elysiatools.com/pt/tools/color-tint - **Categoria:** Design - **Palavras-chave:** cor, tom, clarear, branco, brilhante, pastel, variações, mais claro, tonalidade, pálido ## 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. ## Entradas - **Cor Base** (color) - **Método de Tom** (select) - **Número de Tons** (number): Quantas variações de tom gerar - **Intensidade do Tom** (number): Luminosidade máxima (0.1-1.0) - **Distribuição dos Passos** (select) - **Valores de Passos Personalizados** (text): Valores separados por vírgula (ex: 0.1,0.3,0.5,0.7,0.9) - **Incluir Cor Original** (checkbox) - **Mostrar Códigos HEX** (checkbox) - **Mostrar Valores RGB** (checkbox) - **Mostrar Valores HSL** (checkbox) - **Gerar Paleta Estendida** (checkbox) ## 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. ## Perguntas frequentes ### 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. ## Ferramentas relacionadas - [Cores Analógicas](https://elysiatools.com/pt/tools/color-analogous): Gerar esquemas de cores análogas harmoniosas com cores adjacentes na roda de cores, criando combinações unificadas e pacíficas - [Gerador de Gradiente de Cores](https://elysiatools.com/pt/tools/color-gradient-generator): Gera gradientes de cores suaves entre múltiplas cores com passos e formatos personalizáveis - [Deslocador de Matiz de Cor](https://elysiatools.com/pt/tools/color-hue-shifter): Desloque matizes de cores e crie variações com controles de rotação horária/antihorária - [Clarear/Escurecer Cor](https://elysiatools.com/pt/tools/color-lighten-darken): Ajuste o brilho das cores e crie variações - [Saturação/Dessaturação de Cor](https://elysiatools.com/pt/tools/color-saturate-desaturate): Ajuste a saturação das cores e crie variações de saturação - [Gerador de Esquemas de Cores](https://elysiatools.com/pt/tools/color-scheme-generator): Gera esquemas de cores e paletas profissionais para projetos de design - [Gerador de Sombras de Cor](https://elysiatools.com/pt/tools/color-shade): Gere variações mais escuras de uma cor adicionando preto, criando sombras ricas para profundidade e contraste no design - [Ferramenta de Tétrade de Cores](https://elysiatools.com/pt/tools/color-tetrad): Gerar esquemas de cores tétricas com quatro cores dispostas em padrões retangulares na roda de cores, criando relacionamentos de cores ricos e complexos ## Exemplos - [Exemplos de códigos de cor](https://elysiatools.com/pt/samples/color-code): Coleção de códigos de cor em vários formatos (Hex, RGB, HSL, cores com nome) para testes de validação - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato ## Conteúdo relacionado - [Ferramentas para sistemas de cores acessíveis](https://elysiatools.com/pt/hubs/color-design-tools): Crie um sistema de cores reutilizável transformando cores, gerando harmonias, verificando contraste e visão de cores e documentando tokens. - [Fluxo de sistema de cores e efeitos CSS](https://elysiatools.com/pt/hubs/design-generate): Extrair uma paleta, construir relacoes acessiveis, gerar tokens e aplicar efeitos CSS coerentes em estados reais de interface.