Escureça uma cor reduzindo o valor HSV
Escureça uma cor sem desviar o matiz: tirar 25% do valor HSV transforma #40A0FF em #3078BF, com o mesmo matiz e a mesma saturação, e os números RGB e HSV ao lado. 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
- #40A0FF
- Quantidade
- 25
- Original
- #40A0FF
- Hex
- #3078BF
Este redutor de brilho HSV cria uma versão mais escura de uma cor hexadecimal ao diminuir o componente de valor sem alterar matiz e saturação. Informe uma cor de três ou seis dígitos e a porcentagem do valor atual que deseja remover. A ferramenta devolve a origem normalizada, o hexadecimal escurecido, canais RGB inteiros e os componentes HSV resultantes. Como o cálculo usa aritmética fixa e arredondamento explícito, entradas iguais sempre produzem resultados iguais. Cores inválidas e porcentagens fora de zero a cem geram um erro de entrada claro, sem adivinhação ou correção silenciosa.
Como a redução do valor HSV altera uma cor
HSV descreve uma cor por matiz, saturação e valor. O matiz indica a posição no círculo cromático, a saturação mede a distância do cinza neutro e o valor representa, em porcentagem, o canal RGB mais claro. Esta ferramenta modifica apenas o último componente.
Primeiro converte o código hexadecimal em canais vermelho, verde e azul, transforma esses canais em HSV e multiplica o valor atual por um menos a quantidade solicitada dividida por cem. Assim, uma quantidade de vinte e cinco por cento mantém setenta e cinco por cento do valor original; ela não subtrai vinte e cinco pontos fixos. Essa distinção protege cores já escuras, pois a redução relativa se ajusta naturalmente e não cria valores negativos.
Ainda assim, o cálculo aplica um limite explícito em zero. Matiz e saturação permanecem fixos, então um azul vivo continua com a mesma identidade, apenas mais escuro. Com zero por cento, somente o formato é normalizado; com cem por cento, o valor chega a zero e a saída é preta.
Reduzir valor HSV não é o mesmo que diminuir luminosidade HSL: HSV acompanha o maior canal RGB e atende seletores, ferramentas de imagem e fluxos já baseados nesse modelo.
Como informar cores e porcentagens válidas
Forneça color como texto hexadecimal CSS de três ou seis dígitos, com ou sem o sinal de cerquilha inicial. Uma forma curta como #3AF é expandida canal a canal para #33AAFF antes da conversão. Letras maiúsculas e minúsculas são aceitas, e a origem normalizada retorna em seis dígitos maiúsculos.
Formas alfa de quatro ou oito dígitos são rejeitadas porque esta capacidade transforma uma cor opaca e não compõe transparência sobre um fundo. Espaços ao redor de toda a entrada são ignorados, mas espaços e pontuação dentro do código são inválidos. O campo obrigatório amount indica a porcentagem do valor HSV atual a remover.
Ele deve conter um número finito entre zero e cem, inclusive; decimais permitem gerar tokens precisos. O solucionador aceita texto numérico para compatibilidade com formulários, porém rejeita vazio, texto não numérico, infinito, negativos e valores acima de cem. A validação não inventa uma cor padrão nem limita silenciosamente uma solicitação inválida.
Isso permite que automações encontrem erros de configuração antes de publicar um tom inesperado. A resposta traz a cor original, o hexadecimal escurecido, a quantidade aplicada, inteiros RGB e HSV em graus e porcentagens.
Como usar a saída determinística em design
Use a ferramenta no navegador para criar o estado pressionado de um botão, conferir uma amostra mais escura de um gráfico ou comparar níveis de brilho sem instalar um editor. Os canais RGB são arredondados ao inteiro mais próximo somente depois da conversão de volta, enquanto os campos HSV ficam com seis casas decimais. Essa regra elimina caudas longas de ponto flutuante e mantém precisão para auditoria.
Para uma escala, execute várias quantidades sobre a mesma base em vez de encadear resultados, evitando acúmulo de arredondamento. Escolha esta capacidade quando a regra for reduzir especificamente o valor HSV. Para luminosidade HSL ou OKLCH, mistura alfa ou contraste-alvo, use a transformação própria, pois esses modelos respondem a necessidades diferentes.
Casos de uso
Gerar estados de interação
Crie cores repetíveis para hover, ativo e pressionado a partir de um token base com reduções documentadas do valor HSV.
Montar uma escala HSV
Aplique várias porcentagens à mesma cor e exporte hexadecimais estáveis sem acumular arredondamento.
Normalizar um pipeline gráfico
Use o mesmo ajuste determinístico em prévias no navegador, builds no servidor, testes e documentação gerada.
Perguntas frequentes
O que a porcentagem reduz exatamente?
Ela remove essa porcentagem do valor HSV atual. Por exemplo, 20 por cento mantém 80 por cento do valor original.
Valor HSV é igual à luminosidade HSL?
Não. O valor HSV parte do maior canal RGB; a luminosidade HSL usa o ponto médio entre os canais máximo e mínimo. Os resultados escuros podem divergir.
Quais formatos de cor são aceitos?
Use hexadecimal de três ou seis dígitos, com ou sem cerquilha inicial. Formatos alfa e nomes de cores são rejeitados.
O que acontece em zero e cem por cento?
Zero preserva a cor e normaliza o hexadecimal. Cem define o valor HSV como zero e devolve preto.
Como escurecer #40A0FF em 25 por cento?
Digite #40A0FF como cor e 25 como quantidade. A ferramenta mantém 75% do valor atual e devolve #3078BF, ou seja, RGB 48, 120, 191, com o mesmo matiz e a mesma saturação.
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/dim-hsv \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#40A0FF","amount":25}'const res = await fetch("https://api.kit.forhosting.com/color/dim-hsv", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#40A0FF",
"amount": 25
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/dim-hsv",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#40A0FF",
"amount": 25
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/dim-hsv", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#40A0FF","amount":25}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#40A0FF","amount":25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/dim-hsv", 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": "#40A0FF",
"amount": 25
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.dim_hsv",
"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
Como informar cores e porcentagens válidas
Você também pode usar hex para color e percent ou percentage para amount.
Como usar a saída determinística em design
Use a API quando um compilador de temas, pipeline de tokens, build de documentação ou serviço de ativos precisar repetir a transformação. Cada item bem-sucedido pela API começa em US$ 0,002. O hexadecimal sempre retorna com seis dígitos maiúsculos, pronto para propriedades CSS, tokens JSON ou preenchimentos de canvas.
Perguntas técnicas
Uma porcentagem inválida é limitada?
Não. Valores ausentes, não finitos, negativos ou acima de cem retornam invalid_input para manter o erro visível.
Quanto custa a API?
Cada item concluído pela API começa em US$ 0,002; o mesmo solucionador determinístico roda gratuitamente no navegador.