Verifique a proporção de uso das cores da marca
Uma paleta de marca vai além de uma lista de cores aprovadas: ela também precisa de equilíbrio prático.
Executar grátis
Esta ferramenta converte a cobertura medida por área de pixels em percentuais e compara cada cor com a participação definida na sua diretriz. Informe a cobertura em pixels ou em outra unidade de área consistente, adicione metas como 60, 30 e 10 e escolha uma tolerância aceitável. O resultado mostra quais cores estão adequadas, a diferença exata de cada uma e se o design atende à diretriz como um todo.
Transforme a cobertura de pixels em uma auditoria útil da paleta
Uma peça visual pode usar todas as amostras aprovadas e ainda não transmitir a marca porque as proporções estão erradas. Uma área grande de destaque pode se sobrepor à cor principal, enquanto o excesso de neutros pode deixar uma campanha apagada. Comece com medições da área de pixels do design inteiro ou de uma região claramente definida. Adicione uma linha para cada cor da marca e mantenha a mesma unidade de cobertura em todas elas. Contagens de pixels são uma boa opção, mas pontos quadrados, células amostradas ou outra unidade comum de área produzem os mesmos percentuais. A ferramenta soma os valores e divide cada cor pelo total positivo; portanto, as dimensões da imagem e a escala da medição não alteram a proporção. Nomeie as cores por função ou código de modo reconhecível para os revisores. Inclua toda a área relevante, pois omitir um fundo amplo ou reunir cores sem relação pode fazer um resultado matematicamente correto representar o design errado.
Defina metas e interprete desvios em pontos percentuais
Informe um percentual desejado para cada cor listada. As metas devem somar 100, pois descrevem toda a área medida das cores da marca. Uma hierarquia clássica usa 60 por cento para a cor dominante, 30 para a secundária e 10 para o destaque, mas a calculadora não presume essa regra: ela aceita qualquer distribuição completa entre duas e vinte cores. O desvio apresentado está em pontos percentuais, e não em variação percentual relativa. Se uma cor ocupa 14 por cento diante de uma meta de 10, o desvio é positivo em 4 pontos percentuais. Se ocupa 27.5 por cento diante de 30, o desvio é negativo em 2.5 pontos. Um número positivo indica uso acima da meta; um negativo indica uso abaixo. A tolerância determina quais diferenças são aceitas. Com tolerância 2, passam desvios de menos 2 a mais 2. Cada linha recebe um resultado próprio, e a diretriz geral só é atendida quando todas passam.
Use o resultado na revisão de design e no controle de qualidade
Trate os números como evidências para uma avaliação visual, não como substitutos dela. Comece pelo resultado geral e depois examine os desvios individuais para decidir onde uma alteração terá maior efeito. Quando uma cor de destaque supera a meta, reduzi-la ou ampliar outras áreas incluídas pode recuperar o equilíbrio; os percentuais estão ligados porque compartilham o mesmo total. Guarde os dados de cobertura, a distribuição desejada, a tolerância e o resultado junto da versão do design para que outra pessoa possa reproduzir a decisão. No controle automatizado, use a resposta da API para sinalizar peças reprovadas e encaminhá-las a um designer, em vez de rejeitá-las sem explicação. Aplique o mesmo método de medição em todos os materiais da campanha, pois suavização, limites de similaridade entre cores, gradientes e recortes podem alterar as contagens antes da análise. O cálculo é determinístico e não examina imagens: ele avalia os valores de cobertura que você fornece.
Casos de uso
Revise uma composição 60-30-10
Confirme se as cores dominante, secundária e de destaque permanecem dentro da tolerância acordada no layout final.
Audite a consistência da campanha
Compare as proporções medidas da paleta em banners, peças para redes sociais e páginas de destino com uma regra reproduzível.
Adicione uma etapa de qualidade de design
Sinalize arquivos exportados quando alguma cor da marca se afastar da meta além dos pontos percentuais permitidos.
Perguntas frequentes
Qual unidade de cobertura devo usar?
Use pixels ou qualquer unidade de área não negativa, desde que todas as cores usem a mesma. Os percentuais dependem apenas das proporções.
As metas percentuais precisam somar 100?
Sim. As metas representam uma distribuição completa da área medida das cores da marca e, por isso, devem somar 100.
O que significa a tolerância?
É o desvio absoluto máximo, em pontos percentuais, permitido para cada cor. Todas precisam passar para que a diretriz geral seja atendida.
Esta ferramenta extrai cores de uma imagem?
Não. Ela avalia medições de cobertura que você já possui; nenhuma imagem é enviada, examinada ou classificada.
O que acontece se todas as coberturas forem zero?
A solicitação retorna um erro de entrada inválida porque não é possível calcular percentuais a partir de um total não positivo.
Quanto custa uma solicitação de API?
Cada solicitação de API custa US$ 0,002. A versão para navegador executa localmente o mesmo cálculo determinístico.
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/date/brand-color-usage-ratio-check \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"colors":[{"color":"Primary blue","coverage":60000,"target_percentage":60},{"color":"Secondary gray","coverage":30000,"target_percentage":30},{"color":"Accent orange","coverage":10000,"target_percentage":10}]}'const res = await fetch("https://api.kit.forhosting.com/date/brand-color-usage-ratio-check", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"colors": [
{
"color": "Primary blue",
"coverage": 60000,
"target_percentage": 60
},
{
"color": "Secondary gray",
"coverage": 30000,
"target_percentage": 30
},
{
"color": "Accent orange",
"coverage": 10000,
"target_percentage": 10
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/date/brand-color-usage-ratio-check",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"colors": [
{
"color": "Primary blue",
"coverage": 60000,
"target_percentage": 60
},
{
"color": "Secondary gray",
"coverage": 30000,
"target_percentage": 30
},
{
"color": "Accent orange",
"coverage": 10000,
"target_percentage": 10
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/date/brand-color-usage-ratio-check", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"colors":[{"color":"Primary blue","coverage":60000,"target_percentage":60},{"color":"Secondary gray","coverage":30000,"target_percentage":30},{"color":"Accent orange","coverage":10000,"target_percentage":10}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"colors":[{"color":"Primary blue","coverage":60000,"target_percentage":60},{"color":"Secondary gray","coverage":30000,"target_percentage":30},{"color":"Accent orange","coverage":10000,"target_percentage":10}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/date/brand-color-usage-ratio-check", 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
{
"colors": [
{
"color": "Primary blue",
"coverage": 60000,
"target_percentage": 60
},
{
"color": "Secondary gray",
"coverage": 30000,
"target_percentage": 30
},
{
"color": "Accent orange",
"coverage": 10000,
"target_percentage": 10
}
]
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "date.brand_color_usage_ratio_check",
"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. |