Extraiga la paleta de colores dominantes de una imagen
Cuatro tonos de rojo y azul muestreados, pidiendo 2 colores, se convierten en dos muestras, #F24538 y #1E89E6, cada una con 50 de 100 píxeles. Los tonos cercanos se unen, así obtiene una paleta corta y no colores casi repetidos. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- N
- 2
- Solicitado
- 2
- Devuelto
- 2
- Píxeles totales
- 100
Convierta una lista representativa de píxeles de una imagen en una paleta de colores compacta y útil. Esta capacidad agrupa valores RGB cercanos, ordena los grupos según su presencia ponderada e informa de cada color dominante como muestra hexadecimal y canales RGB, junto con su recuento de píxeles y su proporción en la muestra suministrada. Está pensada para procesos que ya han muestreado o contado píxeles y necesitan un resumen determinista sin cargar ni decodificar la imagen original.
Prepare muestras de píxeles representativas
Empiece con píxeles obtenidos de toda la imagen, no solo de una esquina cómoda. Cada registro contiene valores de los canales rojo, verde y azul entre 0 y 255. Si el preprocesamiento ya ha contado los colores idénticos, añada count al registro; de lo contrario, omítalo y cada registro representará un píxel.
Los registros ponderados resultan especialmente útiles en imágenes con grandes zonas uniformes, ya que conservan la frecuencia real sin obligarle a repetir miles de veces el mismo objeto RGB. El muestreo debe estar equilibrado espacialmente. Una cuadrícula sencilla, un intervalo uniforme o una vista previa reducida suelen reflejar mejor la imagen que tomar los primeros píxeles según el orden del archivo.
Excluya los píxeles transparentes salvo que ya los haya compuesto sobre el fondo visible, porque un valor RGB invisible no debe influir en una paleta visible. El algoritmo fusiona los duplicados exactos antes de agruparlos; por ello, los registros repetidos y un registro equivalente con recuento producen el mismo resultado.
Comprenda el agrupamiento determinista de colores
Elija n como número máximo de colores dominantes que desea obtener. Debe ser un entero de al menos 1, y la capacidad devuelve menos colores cuando la muestra contiene menos valores RGB distintos. Los centros se inicializan de forma determinista a partir de muestras frecuentes y bien separadas, y después se refinan mediante un agrupamiento ponderado y limitado en el espacio RGB.
No intervienen semillas aleatorias, relojes, servicios de red ni modelos, por lo que una entrada idéntica genera una salida idéntica. Los tonos próximos pueden quedar en el mismo grupo; así, los artefactos de compresión, el suavizado, los degradados y pequeños cambios de iluminación contribuyen a una muestra representativa en vez de fragmentar la respuesta. El valor RGB representativo es la media ponderada del grupo, redondeada a canales enteros válidos, y el hexadecimal procede de esos mismos canales.
Los grupos se ordenan por recuento de píxeles, con un desempate hexadecimal estable. La distancia RGB es deliberadamente sencilla: ofrece un resumen práctico, no un sistema perceptual para trabajos de impresión críticos.
Use recuentos y proporciones en otros procesos
La respuesta contiene un array colors ordenado desde el mayor recuento de píxeles representados hasta el menor. Cada elemento incluye hex, un objeto RGB, count y share. Use la primera muestra como aproximación al acento dominante, pero examine su proporción antes de suponer que representa la mayor parte de la imagen.
Un primer color con una proporción cercana a la mitad es una señal visual mucho más fuerte que el primero de una paleta de cinco colores equilibrados. Para automatizar, conserve la lista completa y ordenada, de modo que pueda cambiar los umbrales sin procesar de nuevo las muestras. Los valores no válidos y n menor que 1 generan errores explícitos.
Qué puede hacer con ella
Genere temas de interfaz adaptables
Elija acentos, tratamientos de texto o fondos provisionales desde una paleta ordenada y use la proporción para no exagerar un color secundario.
Etiquete imágenes de productos por color
Convierta píxeles muestreados de un catálogo en rasgos cromáticos estables para filtros, búsquedas por similitud, agrupaciones comerciales y controles de calidad.
Resuma recursos creativos a gran escala
Guarde paletas compactas en lugar de todos los píxeles al comparar campañas, detectar desviaciones visuales o reunir candidatos para paneles de inspiración.
Preguntas frecuentes
¿Por qué la respuesta puede contener menos de n colores?
El valor solicitado es un máximo. Si la entrada tiene menos valores RGB distintos, solo se devuelven los grupos disponibles.
¿Debo repetir píxeles idénticos?
No. Envíe un registro RGB con count igual a su frecuencia o repita el registro; los duplicados exactos se fusionan con la misma ponderación.
¿Se admiten píxeles transparentes?
La entrada solo contiene muestras RGB. Excluya los píxeles invisibles o componga la transparencia sobre el fondo previsto antes de crear la lista.
¿Cómo debo tomar la muestra de píxeles de mi imagen?
Reparta la muestra por toda la imagen: una cuadrícula sencilla, un paso regular o una vista previa reducida funcionan bien. Tomar los primeros píxeles del archivo o una sola esquina puede dar una paleta que no representa la imagen.
¿Por qué los tonos parecidos acaban en un solo color?
Los tonos cercanos se agrupan a propósito, de modo que las marcas de compresión, los bordes suavizados, los degradados y los pequeños cambios de luz suman a una muestra representativa en lugar de dividirse en entradas casi iguales. Cada color es el promedio ponderado de su grupo.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
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)Ejemplo de solicitud
{
"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
}
]
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.dominant_palette",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 15 |
max_megapixels | 12 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Use recuentos y proporciones en otros procesos
Share es el recuento del grupo dividido por el total ponderado y se redondea a seis decimales para obtener un JSON estable. La respuesta también indica el tamaño solicitado de la paleta, la cantidad realmente devuelta y total_pixels; así, quien la consume puede comprobar la cobertura y distinguir una muestra pequeña de otra abundante. El navegador y la API usan el mismo solucionador puro; cada llamada API cuesta $0.002.
Preguntas técnicas
¿Cuánto cuesta una solicitud API?
Cada solicitud API cuesta $0.002. El mismo solucionador determinista también puede ejecutarse en el navegador.
¿Qué ocurre si n es menor que 1?
La solicitud falla con un error invalid_input, porque una paleta no puede pedir menos de un grupo.