Extraia a paleta de cores dominantes de uma imagem
Quatro tons de vermelho e azul amostrados, pedindo 2 cores, viram duas amostras, #F24538 e #1E89E6, cada uma com 50 de 100 pixels. Tons próximos se juntam, então você recebe uma paleta curta em vez de cores quase repetidas. 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
- N
- 2
- Solicitado
- 2
- Retornado
- 2
- Pixels totais
- 100
Transforme uma lista representativa de pixels da imagem em uma paleta de cores compacta e útil. Este recurso agrupa valores RGB próximos, classifica os grupos por presença ponderada e apresenta cada cor dominante como amostra hexadecimal e canais RGB, junto com sua contagem de pixels e participação na amostra fornecida. Ele foi criado para fluxos que já amostraram ou contaram pixels e precisam de um resumo determinístico sem enviar nem decodificar a imagem original.
Prepare amostras representativas de pixels
Comece com pixels coletados em toda a imagem, e não apenas em um canto conveniente. Cada registro contém valores dos canais vermelho, verde e azul entre 0 e 255. Se o pré-processamento já contou cores idênticas, adicione count ao registro; caso contrário, omita esse campo e cada registro representará um pixel.
Registros ponderados são particularmente úteis em imagens com grandes áreas uniformes, pois preservam a frequência real sem exigir a repetição do mesmo objeto RGB milhares de vezes. A amostragem deve ser equilibrada no espaço. Uma grade simples, um intervalo uniforme ou uma prévia reduzida geralmente retrata melhor a imagem do que os primeiros pixels na ordem do arquivo.
Exclua pixels transparentes, a menos que eles já tenham sido compostos sobre o fundo que ficará visível, pois um valor RGB invisível não deve definir uma paleta visível. O algoritmo reúne duplicatas exatas antes do agrupamento; portanto, registros repetidos e um registro equivalente com contagem produzem o mesmo resultado.
Entenda o agrupamento determinístico de cores
Escolha n como o número máximo de cores dominantes desejadas. Ele deve ser um inteiro de pelo menos 1, e o recurso devolve menos cores quando a amostra contém menos valores RGB distintos. Os centros são inicializados de modo determinístico a partir de amostras frequentes e bem separadas, depois refinados por um agrupamento ponderado e limitado no espaço RGB.
Não há semente aleatória, relógio, serviço de rede ou modelo; assim, entradas idênticas produzem saídas idênticas. Tons próximos podem entrar no mesmo grupo, permitindo que artefatos de compressão, antisserrilhamento, gradientes e pequenas variações de luz contribuam para uma amostra representativa, em vez de fragmentar a resposta. O valor RGB representativo é a média ponderada do grupo, arredondada para canais inteiros válidos, e o hexadecimal deriva dos mesmos canais.
Os grupos são classificados por contagem de pixels, com desempate hexadecimal estável. A distância RGB é simples e previsível de propósito: trata-se de um resumo prático, não de um sistema perceptual para impressão crítica.
Aproveite contagens e proporções no fluxo
A resposta contém um array colors ordenado da maior contagem de pixels representados para a menor. Cada item inclui hex, um objeto RGB, count e share. Use a primeira cor como aproximação do destaque dominante, mas confira sua proporção antes de concluir que ela representa a maior parte da imagem.
Uma cor líder com participação próxima da metade é um sinal visual muito mais forte do que a primeira cor de uma paleta equilibrada com cinco tons. Para automação, armazene toda a lista classificada, permitindo ajustar limites sem processar as amostras novamente. Canais inválidos, registros malformados e n abaixo de 1 geram erros explícitos.
Casos de uso
Crie temas de interface adaptáveis
Escolha destaques, tratamentos de texto ou fundos provisórios em uma paleta classificada e use a proporção para não valorizar demais uma cor secundária.
Classifique imagens de produtos por cor
Converta pixels amostrados do catálogo em atributos cromáticos estáveis para filtros, busca por similaridade, grupos comerciais e controle de qualidade.
Resuma materiais criativos em escala
Guarde paletas compactas no lugar de todos os pixels ao comparar campanhas, detectar desvios visuais ou reunir opções para painéis de referência.
Perguntas frequentes
Por que a resposta pode ter menos de n cores?
O valor solicitado é um máximo. Se a entrada tiver menos valores RGB distintos, somente os grupos disponíveis serão retornados.
Preciso repetir pixels idênticos?
Não. Envie um registro RGB com count igual à frequência ou repita o registro; duplicatas exatas são reunidas com peso equivalente.
Pixels transparentes são aceitos?
A entrada contém apenas amostras RGB. Exclua pixels invisíveis ou componha a transparência sobre o fundo desejado antes de criar a lista.
Como devo coletar a amostra de pixels da minha imagem?
Espalhe a amostra pela imagem inteira: uma grade simples, um passo regular ou uma prévia reduzida funcionam bem. Pegar os primeiros pixels do arquivo ou um só canto pode gerar uma paleta que não representa a imagem.
Por que tons parecidos acabam virando uma só cor?
Tons próximos são agrupados de propósito, para que marcas de compressão, bordas suavizadas, degradês e pequenas mudanças de luz somem a uma amostra representativa em vez de se dividirem em entradas quase iguais. Cada cor é a média ponderada do seu grupo.
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/image/dominant-palette \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"pixels":[{"r":244,"g":67,"b":54,"count":40},{"r":235,"g":76,"b":63,"count":10},{"r":33,"g":150,"b":243,"count":30},{"r":25,"g":118,"b":210,"count":20}]}'const res = await fetch("https://api.kit.forhosting.com/image/dominant-palette", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"pixels": [
{
"r": 244,
"g": 67,
"b": 54,
"count": 40
},
{
"r": 235,
"g": 76,
"b": 63,
"count": 10
},
{
"r": 33,
"g": 150,
"b": 243,
"count": 30
},
{
"r": 25,
"g": 118,
"b": 210,
"count": 20
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/dominant-palette",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"pixels": [
{
"r": 244,
"g": 67,
"b": 54,
"count": 40
},
{
"r": 235,
"g": 76,
"b": 63,
"count": 10
},
{
"r": 33,
"g": 150,
"b": 243,
"count": 30
},
{
"r": 25,
"g": 118,
"b": 210,
"count": 20
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/dominant-palette", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"pixels":[{"r":244,"g":67,"b":54,"count":40},{"r":235,"g":76,"b":63,"count":10},{"r":33,"g":150,"b":243,"count":30},{"r":25,"g":118,"b":210,"count":20}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"pixels":[{"r":244,"g":67,"b":54,"count":40},{"r":235,"g":76,"b":63,"count":10},{"r":33,"g":150,"b":243,"count":30},{"r":25,"g":118,"b":210,"count":20}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/dominant-palette", 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
{
"pixels": [
{
"r": 244,
"g": 67,
"b": 54,
"count": 40
},
{
"r": 235,
"g": 76,
"b": 63,
"count": 10
},
{
"r": 33,
"g": 150,
"b": 243,
"count": 30
},
{
"r": 25,
"g": 118,
"b": 210,
"count": 20
}
]
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.dominant_palette",
"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.
Limites
max_mb | 15 |
max_megapixels | 12 |
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
Aproveite contagens e proporções no fluxo
Share corresponde à contagem do grupo dividida pelo total ponderado de pixels e é arredondada para seis casas decimais, garantindo JSON estável. A resposta também informa o tamanho de paleta solicitado, a quantidade efetivamente retornada e total_pixels; isso permite verificar a cobertura e diferenciar uma pequena amostra de origem de uma imagem amplamente amostrada. O navegador e a API usam o mesmo solucionador puro, e cada chamada API custa US$ 0,002.
Perguntas técnicas
Quanto custa uma solicitação de API?
Cada solicitação de API custa US$ 0,002. O mesmo solucionador determinístico também pode ser executado no navegador.
O que acontece quando n é menor que 1?
A solicitação falha com o erro invalid_input, pois uma paleta não pode pedir menos de um grupo.