Extractor de Colores de Imagen - Extraer Paleta Online
Extrae colores dominantes de cualquier imagen y genera paletas de colores. Obtén valores HEX, RGB y HSL — 100% del lado del cliente.
Preguntas Frecuentes
¿Qué es un extractor de colores de imagen y por qué lo necesito?
Un extractor de colores de imagen analiza los píxeles de una imagen cargada e identifica los colores más dominantes, produciendo una paleta de colores. Es útil para diseñadores que necesitan derivar un esquema de colores consistente de fotografías, obras de arte o imágenes de marca. En lugar de muestrear colores manualmente con un cuentagotas, la herramienta identifica automáticamente los colores más representativos y los proporciona en formatos listos para la web (HEX, RGB, HSL) para uso inmediato en CSS, herramientas de diseño o directrices de marca.
¿Cómo uso esta herramienta de extracción de colores?
1. Arrastra y suelta una imagen en el área de carga (o haz clic para examinar archivos). 2. La herramienta extrae automáticamente los colores dominantes y los muestra como una paleta. 3. Ajusta el número de colores usando el control deslizante (2-16 colores). 4. Haz clic en cualquier muestra de color para copiar su valor HEX, RGB o HSL. 5. Usa las opciones de exportación para copiar toda la paleta como variables CSS, JSON o texto plano. 6. Opcionalmente, ordena los colores por frecuencia, tono o brillo usando los controles de clasificación.
¿Están seguros mis datos de imagen? ¿Se suben las imágenes a un servidor?
Tus imágenes están 100% seguras y nunca salen de tu navegador. Toda la extracción de colores se realiza del lado del cliente usando la API Canvas de HTML5. La herramienta lee los datos de píxeles directamente de tu imagen en el navegador, aplica un algoritmo de cuantización de color localmente y muestra los resultados. No se transmiten datos de imagen a ningún servidor, haciendo esta herramienta completamente privada.
¿Qué algoritmo de cuantización de color se utiliza?
Esta herramienta utiliza el algoritmo Median Cut, una técnica de cuantización de color bien establecida. Funciona dividiendo recursivamente el espacio de color de la imagen en regiones más pequeñas, dividiéndose en la mediana a lo largo del canal (rojo, verde o azul) con el rango más amplio. Luego se promedia cada región para producir un solo color representativo. Median Cut es rápido, determinista y produce paletas visualmente agradables.
¿Qué formatos de imagen son compatibles?
La herramienta admite imágenes PNG, JPEG (JPG), WebP y GIF de hasta 10MB. Los píxeles transparentes en imágenes PNG, WebP y GIF se ignoran automáticamente durante la extracción de colores para no alterar la paleta. Para imágenes GIF, solo se analiza el primer fotograma (estático).
¿Cuántos colores puedo extraer de una imagen?
Puedes extraer entre 2 y 16 colores. El valor predeterminado es 8 colores, que proporciona un buen equilibrio para la mayoría de los casos. Para imágenes más simples o paletas minimalistas, 4-6 colores funcionan bien. Para fotografías complejas con muchas regiones de color distintas, 10-16 colores capturarán más matices. La extracción se actualiza en tiempo real al ajustar el control deslizante.
¿Cuál es la diferencia entre ordenar por frecuencia, tono y brillo?
Frecuencia (predeterminado) ordena los colores por el área que ocupan en la imagen, con el color más dominante primero. Tono ordena los colores por su posición en la rueda de colores (0-360 grados), creando una secuencia tipo arcoíris. Brillo ordena los colores del más claro al más oscuro según su valor de luminosidad HSL, útil para crear degradados o identificar rangos de contraste.
¿Puedo exportar la paleta de colores para usar en mi código?
Sí. La herramienta ofrece múltiples formatos de exportación optimizados para desarrolladores: Variables CSS genera :root { --color-1: #FF5733; ... } listo para CSS. JSON exporta un array de objetos con valores hex, rgb y hsl para uso programático. Texto plano proporciona una lista simple de códigos HEX, uno por línea.
Ejemplos de Código
// Extract dominant colors from an image using Canvas API + Median Cut
function extractColorsFromImage(imageSource, colorCount = 8) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
const maxPixels = 10000;
const scale = Math.min(1, Math.sqrt(maxPixels / (img.width * img.height)));
const width = Math.max(1, Math.floor(img.width * scale));
const height = Math.max(1, Math.floor(img.height * scale));
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
const imageData = ctx.getImageData(0, 0, width, height);
const pixels = [];
for (let i = 0; i < imageData.data.length; i += 4) {
if (imageData.data[i + 3] < 128) continue;
pixels.push({
r: imageData.data[i],
g: imageData.data[i + 1],
b: imageData.data[i + 2],
});
}
const colors = medianCut(pixels, colorCount);
resolve(colors);
};
img.onerror = () => reject(new Error("Failed to load image"));
if (imageSource instanceof File) {
img.src = URL.createObjectURL(imageSource);
} else {
img.src = imageSource;
}
});
}
function medianCut(pixels, targetCount) {
if (pixels.length === 0) return [];
let buckets = [pixels];
while (buckets.length < targetCount) {
let maxRange = -1, maxIndex = 0, splitChannel = "r";
for (let i = 0; i < buckets.length; i++) {
if (buckets[i].length < 2) continue;
for (const ch of ["r", "g", "b"]) {
const values = buckets[i].map((p) => p[ch]);
const range = Math.max(...values) - Math.min(...values);
if (range > maxRange) {
maxRange = range;
maxIndex = i;
splitChannel = ch;
}
}
}
if (maxRange <= 0) break;
const toSplit = buckets[maxIndex];
toSplit.sort((a, b) => a[splitChannel] - b[splitChannel]);
const mid = Math.floor(toSplit.length / 2);
buckets.splice(maxIndex, 1, toSplit.slice(0, mid), toSplit.slice(mid));
}
const totalPixels = pixels.length;
return buckets.map((bucket) => {
const r = Math.round(bucket.reduce((s, p) => s + p.r, 0) / bucket.length);
const g = Math.round(bucket.reduce((s, p) => s + p.g, 0) / bucket.length);
const b = Math.round(bucket.reduce((s, p) => s + p.b, 0) / bucket.length);
const hex = "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("").toUpperCase();
return { hex, rgb: { r, g, b }, percentage: ((bucket.length / totalPixels) * 100).toFixed(1) };
});
}
// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener("change", async (e) => {
const file = e.target.files[0];
const colors = await extractColorsFromImage(file, 8);
colors.forEach((c) => console.log(`${c.hex} - ${c.percentage}%`));
});