Clareador de cor
Clarear #3366cc em 20 % resulta em #5c85d6: a luminosidade sobe de 50 % para 60 % e o azul mantém matiz e saturação. Crie tons mais suaves da cor da sua marca sem que ela fique acinzentada. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Cor hex
- #3366cc
- Quantidade
- 20
- Cód. hex
- #5c85d6
- Luminosidade antes
- 50
- Luminosidade depois
- 60
Um clareador de cor recebe um código hex CSS e uma porcentagem e devolve uma versão mais clara elevando apenas o canal de luminosidade no espaço HSL. Matiz e saturação permanecem iguais, assim azuis de marca continuam azuis e vermelhos continuam vermelhos, enquanto a superfície fica mais suave para estados hover, fundos e tintas acessíveis. A quantidade é uma porcentagem da folga restante entre a luminosidade atual e o branco puro: zero por cento deixa a amostra inalterada, cem por cento produz branco puro e os valores intermediários escalam de forma suave para qualquer tom inicial. Cadeias hex inválidas e porcentagens fora de zero a cem são rejeitadas com erro de validação claro em vez de recortar em silêncio.
Como o clareamento funciona em HSL
Comece com uma cor hex CSS como #3366cc ou a forma curta #36c. O analisador expande códigos de três dígitos, coloca os dígitos em minúsculas e converte cada par em inteiros de vermelho, verde e azul de zero a duzentos e cinquenta e cinco.
Esses canais são mapeados para matiz, saturação e luminosidade com as fórmulas padrão CSS e W3C: a luminosidade é a média das frações máxima e mínima do canal, a saturação depende dessa luminosidade e o matiz se mede em graus na roda de cores, com cinzas acromáticos reportando matiz zero. Clarear não mistura a cor em direção ao branco em RGB; eleva apenas a porcentagem de luminosidade enquanto matiz e saturação ficam fixos. A nova luminosidade é a antiga mais a distância restante até cem, escalada pela quantidade sobre cem.
Com amount zero a fórmula é identidade pura; com amount cem o resultado é branco puro com luminosidade cem; com amount vinte um azul de tom médio avança vinte por cento da luminosidade atual em direção ao branco. Depois de conhecida a nova luminosidade, o mesmo caminho CSS de matiz para RGB converte HSL de volta a canais inteiros e um código hex de seis dígitos em minúsculas. Não há sementes aleatórias, carimbos de tempo nem chamadas de rede, então as mesmas entradas sempre geram a mesma saída.
Formas hex com alfa de quatro ou oito dígitos são rejeitadas porque este contrato é apenas RGB opaco. Porcentagens abaixo de zero ou acima de cem falham na validação para que os clientes não ultrapassem o intervalo permitido em silêncio.
O que você envia e o que recebe de volta
Envie dois campos: color como string hex e amount como número finito entre zero e cem inclusive. Em caso de sucesso a resposta ecoa a cor normalizada de seis dígitos e o amount limpo, e então fornece amostras original e result. Cada amostra inclui role, hex, inteiros r g b, números de matiz saturação luminosidade e strings imprimíveis rgb e hsl.
Uma string formula curta documenta a regra L prime para docs e suporte. Verificações típicas: clarear #3366cc em vinte por cento, clarear vermelho puro em cinquenta por cento e confirmar que amount zero devolve o hex original. Use o formulário gratuito do navegador para revisões de design e tintas rápidas; chame o mesmo contrato a partir de scripts quando precisar de geração em massa de tokens hover ou escalas de tema.
Mantenha amount no intervalo documentado em vez de confiar em recortes silenciosos — esta ferramenta falha de forma explícita para que sistemas de design permaneçam previsíveis.
Onde clareadores de cor aparecem no trabalho real
Designers de produto constroem estados hover e active clareando primárias de marca sem deslocar o matiz, de modo que um clareamento de vinte por cento de um CTA navy continua navy em vez de lavar para cinza ou ciano. Revisores de acessibilidade exploram companheiros mais claros de cores de texto ou ícone ao combinar com fundos escuros e entregam os candidatos a um verificador de contraste em vez de adivinhar meios-tons a olho.
Equipes de marketing produzem amostras pastéis de campanha a partir de logotipos saturados para banners sociais e cabeçalhos de e-mail preservando a identidade de matiz da marca. Engenheiros frontend programam rampas de sombra em integração contínua para que uma única cor de marca produza uma escada documentada de passos mais claros para gráficos, chips e botões secundários.
Se mais tarde você precisar escurecer uma cor, converter HSL em RGB, montar uma paleta análoga ou checar contraste WCAG, trate isso como intenções de busca e páginas separadas em vez de sobrecarregar esta página de clareamento.
Casos de uso
Tintas hover e active da IU
Derive fundos hover mais claros a partir de tokens hex de marca mantendo matiz e saturação estáveis para estados de componente consistentes.
Rampas de sombra com tokens de design
Gere passos pastéis e de superfície suave a partir de uma cor base para temas, variáveis CSS e sistemas multi-marca.
Pastéis de marketing a partir de logotipos
Produza amostras mais claras prontas para campanha a partir de cores de logo saturadas para banners, slides e criativos sociais.
Perguntas frequentes
Como este clareador de cor altera meu hex?
Converte hex para HSL, eleva a luminosidade com L' = L + (100 − L) × (amount / 100), mantém matiz e saturação fixos e reconverte para hex e RGB.
Qual intervalo de quantidade é permitido?
Amount deve ser um número finito de 0 a 100 inclusive.
O que acontece em 0% e 100%?
0% deixa a cor inalterada. 100% produz branco puro (luminosidade 100) informando o matiz e a saturação fixos da cor original.
Quais formatos hex são aceitos?
Hex CSS de três e seis dígitos, com ou sem cerquilha inicial. Formas com alfa (#rgba / #rrggbbaa) e caracteres não hex são rejeitados.
Quanto custa?
A ferramenta do navegador é gratuita e roda localmente.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/lighten \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#3366cc","amount":20}'const res = await fetch("https://api.kit.forhosting.com/color/lighten", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#3366cc",
"amount": 20
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/lighten",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#3366cc",
"amount": 20
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/lighten", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#3366cc","amount":20}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#3366cc","amount":20}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/lighten", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"color": "#3366cc",
"amount": 20
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.lighten",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Sem chamadas de rede, sem sementes aleatórias e sem deriva de modelo — cor e quantidade idênticas sempre produzem o mesmo JSON.
O que você envia e o que recebe de volta
Color também aceita os aliases hex e base; amount aceita percent e pct. Campos ausentes, caracteres não hex, comprimentos errados, NaN, Infinity e quantidades fora do intervalo fechado falham com invalid_input e não são cobrados. O hex de nível superior é a cor clareada para clientes de uma linha; lightness_before e lightness_after tornam o passo percentual auditável sem rederivar HSL. O preço das chamadas API bem-sucedidas é a base publicada de US$ 0,002 por item; falhas de validação não consomem saldo pré-pago.
Onde clareadores de cor aparecem no trabalho real
Pipelines de tokens de design geram tintas suaves de fundo a partir de um único hex base e armazenam o hex derivado em JSON ou variáveis CSS para superfícies em modo claro. Como esta capacidade é um motor de parse puro, o preço da API é a base publicada de US$ 0,002 por item bem-sucedido e a validação falha não consome saldo.