# Clarear/Escurecer Cor Ajuste o brilho das cores e crie variações > Página canônica: https://elysiatools.com/pt/tools/color-lighten-darken - **Categoria:** Design - **Palavras-chave:** cor, clarear, escurecer, brilho, ajustar, tom, sombra, ajuste de cor, luminância ## Visão geral O Clarear/Escurecer Cor é uma ferramenta online intuitiva que permite ajustar a luminosidade de qualquer cor base, facilitando a criação de paletas harmônicas, variações de tons para interfaces e sombras precisas para elementos de design. ## Entradas - **Cor Base** (color) - **Tipo de Ajuste** (select) - **Quantidade de Ajuste (%)** (range): Quantidade de ajuste para brilho da cor (-100% a +100%) - **Passos do Gradiente** (number): Aplica-se apenas quando "Gradiente (faixa completa)" está selecionado. Controla quantas cores gerar na sequência do gradiente (2-20 passos) - **Incluir Cores Complementares** (checkbox) - **Preservar Saturação Relativa** (checkbox) ## Quando usar - Ao criar variações de tons para estados de botões (hover, active, disabled). - Ao gerar paletas de cores consistentes para sistemas de design ou identidades visuais. - Ao ajustar a legibilidade de textos ou ícones em relação ao fundo, alterando sua luminância. ## Como funciona - Selecione a cor base utilizando o seletor de cores ou inserindo o código hexadecimal. - Escolha o tipo de ajuste desejado: clarear, escurecer, criar um gradiente ou aplicar um ajuste personalizado. - Defina a porcentagem de intensidade do ajuste e, se necessário, configure o número de passos para gradientes. - Visualize o resultado instantaneamente e utilize as variações geradas em seus projetos. ## Casos de uso - Criação de estados de interação para componentes de UI, como botões que escurecem ao serem clicados. - Desenvolvimento de sistemas de design com escalas de cores primárias e secundárias. - Ajuste rápido de contraste para garantir que elementos de interface atendam aos padrões de acessibilidade. ## Perguntas frequentes ### Como funciona o ajuste de porcentagem? A porcentagem define o quanto a cor será movida em direção ao branco (clarear) ou ao preto (escurecer) na escala de luminância. ### Posso gerar uma paleta completa de uma só vez? Sim, utilizando a opção 'Gradiente', você pode definir o número de passos para criar uma sequência de tons da mesma cor. ### O que faz a opção 'Preservar Saturação Relativa'? Esta opção mantém a intensidade da cor original enquanto ajusta apenas o brilho, evitando que a cor fique cinzenta ao ser clareada ou escurecida. ### A ferramenta suporta cores complementares? Sim, ao ativar a opção 'Incluir Cores Complementares', a ferramenta gera automaticamente variações baseadas no oposto da sua cor original no círculo cromático. ### Os resultados podem ser usados em CSS? Com certeza. Os códigos hexadecimais gerados são compatíveis com qualquer folha de estilo CSS ou ferramentas de design como Figma e Adobe XD. ## Ferramentas relacionadas - [Complemento de Cor](https://elysiatools.com/pt/tools/color-complement): Encontrar cores complementares e criar esquemas harmoniosos com relacionamentos triádicos, tetraédricos e análogos - [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 - [Inversor de Cor](https://elysiatools.com/pt/tools/color-inverter): Inverter cores e criar versões negativas com métodos de inversão RGB, HSL e brilho - [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 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 - [Gerador de Tons de Cor](https://elysiatools.com/pt/tools/color-tint): Gere variações mais claras de uma cor adicionando branco, criando tons brilhantes e aéreos para estéticas de design frescas - [Gerador de Cores Neon](https://elysiatools.com/pt/tools/neon-colors): Gere cores neon vibrantes e brilhantes com alta saturação e brilho, criando efeitos de luz elétrica chamativos perfeitos para telas digitais e design moderno - [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 ## 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.