Clareador / Escurecedor de Cor

• Clarear e escurecer instantâneos: o clareador e o escurecedor de cores atualizam a visualização e todos os valores de saída em tempo real conforme você arrasta o controle deslizante. Nenhum botão para pressionar - ajuste de -100% (totalmente escurecido) a +100% (totalmente iluminado) e veja o resultado instantaneamente com amostras de cores vivas.
• Escala de luminosidade interativa: veja uma escala de luminosidade completa de 7 etapas abaixo dos controles principais, mostrando a cor nos ajustes de luminosidade de -50%, -25%, -10%, original, +10%, +25% e +50%. Clique em qualquer botão predefinido para ir diretamente para esse nível de ajuste e explorar rapidamente as cores.
• 100% Privado - Sem Upload: Todo o processamento acontece localmente no seu navegador usando JavaScript. Seus valores de cores nunca saem do seu dispositivo e nunca são enviados para nenhum servidor - completamente seguro para projetos de clientes e sistemas de design proprietários.
• Gratuito e sem limites: clareie e escureça cores ilimitadas sem inscrição, sem assinatura e sem limites de uso. O Color Lightener / Darkener é totalmente gratuito para sempre, sem anúncios bloqueando a interface.

• CSS Hover e estados de interação: os desenvolvedores de front-end usam o Color Lightener / Darkener para gerar estados de foco, ativo e foco para elementos da IU. Ao clarear ou escurecer a cor base em uma porcentagem consistente, eles garantem feedback interativo uniforme em botões, links e cartões sem adivinhar manualmente os valores das cores.
• Adaptação de cores do modo escuro: Designers e desenvolvedores usam o Color Lightener / Darkener para adaptar as paletas de cores do modo claro para o modo escuro. Ao escurecer sistematicamente as cores da interface e ao mesmo tempo manter o matiz e a saturação, eles criam temas escuros coesos que preservam a identidade da marca e garantem a legibilidade.
• Acessibilidade e otimização de contraste: Os especialistas em acessibilidade usam o Color Lightener/Darkener para encontrar variantes de cores acessíveis que atendam aos requisitos de contraste das WCAG. Ao clarear ou escurecer gradualmente uma cor, mantendo a tonalidade intacta, eles podem descobrir o ajuste mínimo necessário para passar nas taxas de contraste AA ou AAA.
• Paleta de cores e criação de matiz/sombra: os designers usam o clareador/escurecimento de cores para gerar escalas de cores para sistemas de design. Ao criar etapas de luminosidade consistentes a partir de uma cor base, eles criam paletas coesas de tonalidades e sombras que mantêm a consistência da marca em todos os elementos da interface do usuário, do plano de fundo ao texto.
• Variantes de componentes de UI: os designers de produtos usam o Color Lightener/Darkener para criar múltiplas variantes visuais de componentes de UI. Desde estados sutis de foco até botões de call to action proeminentes, a ferramenta ajuda a gerar uma gama completa de variantes de cores a partir de uma única cor base com ajustes de luminosidade consistentes e previsíveis.
• Geração de token do sistema de design: os mantenedores do sistema de design usam o Color Lightener / Darkener para gerar tokens de cores com valores de luminosidade previsíveis. Ao ajustar as cores no espaço HSL, eles criam tokens como --color-primary-50 até --color-primary-900 com etapas perceptivas consistentes.

O clareamento e o escurecimento de cores são técnicas que ajustam o brilho percebido de uma cor, preservando ao máximo seu matiz e saturação. Quando você clareia uma cor, o valor da luminosidade aumenta até 100% (branco), criando uma tonalidade. Quando você escurece uma cor, a luminosidade diminui até 0% (preto), criando uma sombra. Nosso Color Lightener / Darkener realiza esses ajustes no espaço de cores HSL, o que garante resultados de aparência natural que mantêm o caráter da cor original.

1. Insira uma cor base: digite um valor de cor HEX ou use o seletor de cores nativo para selecionar qualquer cor. A ferramenta converte instantaneamente para o formato HSL (Matiz, Saturação, Luminosidade), que separa a cor em canais independentes para manipulação precisa.
2. Ajuste o controle deslizante de luminosidade: arraste o controle deslizante para a esquerda para escurecer (porcentagem negativa) ou para a direita para clarear (porcentagem positiva). A faixa de gradiente mostra toda a gama, do escurecido ao claro. Clique em qualquer botão predefinido (-50%, -25%, etc.) para saltos rápidos. A visualização de cores ajustada é atualizada em tempo real junto com o original para comparação.
3. Explore a escala e copie: A escala de luminosidade de 7 etapas abaixo mostra a aparência da cor em diferentes níveis de ajuste. Clique em qualquer etapa para pular instantaneamente para esse nível. Use o botão Copiar próximo a qualquer formato para copiar valores individuais ou copie todos os formatos de uma vez com o botão “Copiar todos os valores”.

• Clareamento (matizes): Quando você clareia uma cor, o valor da luminosidade aumenta proporcionalmente até 100% (branco puro). Um ajuste de +50% em uma cor com 50% de luminosidade irá movê-la 50% da distância restante para 100%, resultando em 75% de luminosidade. Isso cria tons pastéis que preservam o matiz e a saturação originais.
• Escurecimento (tons): Quando você escurece uma cor, o valor da luminosidade diminui proporcionalmente até 0% (preto puro). Um ajuste de -50% em uma cor com 50% de luminosidade irá movê-la 50% da distância em direção a 0%, resultando em 25% de luminosidade. Isso cria tons mais profundos que mantêm o caráter original.
• Preservação de matiz e saturação: Ao contrário da mistura RGB simples (mistura com branco ou preto), os ajustes baseados em HSL mantêm os valores de matiz e saturação inalterados. Isto significa que a cor permanece fiel ao seu caráter original enquanto apenas o brilho muda, resultando em variações de cores mais limpas e previsíveis.
• Faixa de -100% a +100%: o controle deslizante vai de -100% (totalmente escurecido para preto), passando por 0% (cor original) até +100% (totalmente clareado para branco). Nos extremos, a cor torna-se preto puro ou branco puro, mas em valores intermediários a tonalidade e a saturação originais permanecem visíveis.

Clarear (ajustar a luminosidade em HSL) é diferente de ajustar o brilho (V em HSV/HSB). A luminosidade em HSL vai do preto (0%) passando pela cor pura (50%) até o branco (100%), enquanto o brilho no HSV vai do preto até a cor pura apenas. Isso significa que os ajustes de luminosidade HSL produzem matizes e tonalidades de aparência mais natural que combinam com a forma como os designers pensam sobre as cores.

A saturação é uma propriedade separada que controla a intensidade da cor. Ao clarear ou escurecer, a saturação permanece constante para manter a vibração da cor. Se você precisar ajustar a luminosidade e a saturação juntas, use nossa ferramenta Saturador/Desaturador de cores. Para muitos fluxos de trabalho de design, apenas ajustar a luminosidade é suficiente para criar as variantes de cores necessárias para componentes de UI, estados de foco e tokens do sistema de design.