Clarear/Escurecer Cor

Ajuste o brilho das cores e crie variações

-100 20 100

Quantidade de ajuste para brilho da cor (-100% a +100%)

Aplica-se apenas quando "Gradiente (faixa completa)" está selecionado. Controla quantas cores gerar na sequência do gradiente (2-20 passos)

Fatos principais

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

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.

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.

Exemplos

1. Criando estados de botão

Designer de UI
Contexto
Um designer precisa criar o estado 'hover' para um botão azul (#4A90E2) que deve ser ligeiramente mais escuro.
Problema
Encontrar a tonalidade exata que mantenha a identidade da marca sem perder a legibilidade.
Como usar
Defina a cor base como #4A90E2, selecione 'Escurecer' e ajuste a porcentagem para 15%.
Resultado
A ferramenta gera o código hexadecimal correspondente, garantindo um efeito de hover profissional e consistente.

2. Gerando paleta de gradiente

Desenvolvedor Front-end
Contexto
Necessidade de criar uma escala de 5 tons para um gráfico de barras baseado em uma cor corporativa.
Problema
Criar manualmente 5 tons que tenham uma transição suave de brilho é demorado e impreciso.
Como usar
Selecione a cor base, escolha 'Gradiente' e defina 'Passos do Gradiente' para 5.
Resultado
Uma sequência de 5 cores com variações uniformes de luminância, prontas para serem aplicadas ao 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

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.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/color-lighten-darken

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
baseColor color Sim -
adjustmentType select Sim -
adjustmentValue range Não Quantidade de ajuste para brilho da cor (-100% a +100%)
steps number Não Aplica-se apenas quando "Gradiente (faixa completa)" está selecionado. Controla quantas cores gerar na sequência do gradiente (2-20 passos)
includeComplementary checkbox Não -
preserveSaturation 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-lighten-darken": {
      "name": "color-lighten-darken",
      "description": "Ajuste o brilho das cores e crie variações",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-lighten-darken",
      "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]