Color dominante
Reduzca una foto a un solo color hexadecimal, el que un espectador asocia con ella de un vistazo, para que una galería muestre un bloque de color antes de que cargue la imagen. No siempre es el píxel más frecuente. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Corre en su navegador. Gratis y sin límite: sus datos no salen de esta página.
A veces no necesita cinco colores, necesita uno solo: el color que mejor resume una imagen incluso antes de que termine de cargar.
La pregunta de un solo color
Una paleta completa sirve cuando está armando un tema o un mood board, pero muchas interfaces reales solo necesitan responder una pregunta mucho más pequeña: ¿cuál es el color de esta imagen? El fondo detrás de una miniatura que carga de forma diferida, el relleno de un div marcador de posición, la franja de acento de una tarjeta: todos estos casos quieren un solo valor, no una lista ordenada para elegir.
Una idea pequeña con mucha trayectoria
Reducir una imagen a un solo color representativo es uno de los trucos más antiguos del diseño de interfaces, y se remonta a la generación de miniaturas en las primeras páginas web, donde un bloque de color sólido sustituía a una imagen que todavía no había cargado.
Lo que antes era un recurso tosco para conexiones lentas se convirtió en una decisión de diseño deliberada: un marcador de color que aparece de inmediato y se transforma suavemente en la foto real se percibe más rápido que una caja en blanco, incluso con una conexión veloz.
Qué puede hacer con ella
Placeholders de carga instantánea
Guarde el color dominante junto a cada imagen para que las galerías muestren un bloque de color de inmediato y luego hagan la transición a la foto real.
Fondos de tarjetas y miniaturas
Use el color dominante como relleno de fondo detrás de una miniatura de producto para que las proporciones inusuales nunca muestren franjas blancas incómodas.
Temas para feeds y cuadrículas
Tiña el borde o la barra de acento de un elemento de feed con su color dominante para dar a una cuadrícula de fotos un aspecto ambiental coherente sin estilos manuales.
Etiquetado rápido de imágenes a gran escala
Agrupe bibliotecas grandes de fotos por un solo tono dominante para navegar rápido o priorizar moderación, sin correr una extracción de paleta completa en cada archivo.
Preguntas frecuentes
¿El resultado siempre es el mismo para una imagen dada?
Sí, el cálculo es determinista, así que la misma imagen siempre devuelve el mismo valor de color dominante.
¿En qué formato se devuelve el color?
Un solo valor de color hexadecimal, listo para usarse directamente como fondo o color de relleno en CSS.
¿El color dominante siempre es el píxel más frecuente?
No necesariamente; el cálculo busca el color que mejor caracteriza la imagen en su conjunto, lo cual suele ser más útil que el simple píxel más repetido.
¿En qué se diferencia el color dominante de una paleta de colores?
Una paleta da varios colores ordenados, útiles para un tema o un tablero de inspiración. El color dominante responde a una pregunta más concreta con un solo valor, listo para un marcador de carga, un fondo o una franja de acento.
¿Cuándo conviene calcular el color dominante de una imagen?
Una sola vez, al subir la imagen. Guarde el color junto a ella para que una galería muestre de inmediato un bloque de color que se funde con la foto real, sin recalcularlo en cada visita a la página.
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-color \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/dominant-color", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/dominant-color",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/dominant-color", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/dominant-color", 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
{
"image": "https://ejemplo.com/imagen.jpg"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.dominant_color",
"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
Este endpoint reduce cualquier foto a un único valor hex representativo, lo bastante rápido como para usarlo en el camino crítico de la carga de una página.
La pregunta de un solo color
Pedir la paleta completa y quedarse con el primer resultado funciona, pero es la herramienta equivocada; este endpoint está construido para responder exactamente esa pregunta más acotada, de forma rápida y económica.
Cómo se calcula
El cálculo es determinista, así que llamadas repetidas sobre la misma imagen devuelven siempre el mismo resultado. Envía una imagen a POST /image/dominant-color y la tarea analiza los datos de píxel y devuelve un solo valor hex que representa el color que mejor caracteriza la imagen en conjunto, no necesariamente el píxel más frecuente, sino el color que un espectador asociaría con la foto de un vistazo.
Qué recibe y cuándo
Como el resultado es diminuto —un color, no un archivo—, se presta muy bien para guardarse junto a los metadatos propios de la imagen y reutilizarse indefinidamente en lugar de recalcularse en cada vista de página. La tarea corre de forma asíncrona como todo lo demás en esta API: recibe un task_id al enviarla, y el único valor hex llega después por webhook firmado o por un enlace firmado válido durante 24 horas.
Cómo lo usan los equipos en la práctica
El patrón más común es calcular el color dominante una sola vez al momento de subir la imagen y guardarlo junto a su URL, para que una galería o un feed puedan mostrar de inmediato un bloque de color antes de que la foto real termine de descargarse, y luego hacer una transición suave cuando llega. A $0.002 por solicitud y sin cargo si falla, es lo bastante económico como para aplicarlo a cada imagen que ingresa a un catálogo o un CMS.
Preguntas técnicas
¿Cuál es la diferencia entre color dominante y paleta de colores?
Color dominante devuelve un solo valor hex que representa mejor toda la imagen; el endpoint de paleta devuelve varios tonos ordenados cuando necesita más de un color.
¿La API de color dominante es gratuita?
La herramienta de arriba es gratis en su navegador. La API es de pago: cada llamada se descuenta de su saldo prepago de ForHosting KIT — se recarga desde $10.00 (no caduca), se paga el precio publicado de cada solicitud, y una llamada sin saldo devuelve HTTP 402. Sin suscripción, sin tokens, y una tarea fallida no se cobra.
¿Puedo procesar una biblioteca grande de fotos en lote?
Sí, cada imagen se envía y se factura como una solicitud independiente, así que puede aplicarlo a toda una biblioteca sin endpoints especiales de lote.
¿Cómo recibo el resultado del color dominante?
Por webhook firmado, recomendado para flujos automatizados, o mediante un enlace firmado válido por 24 horas.
¿Debería usar esto en vez de un placeholder difuminado?
Si busca un marcador que insinúe la forma de la imagen en lugar de un tono plano, el endpoint de BlurHash es la mejor opción.