Extraer colores de una imagen (extractor de colores dominantes)

Sube una imagen para extraer automáticamente sus colores dominantes, los colores representativos usados en una foto o ilustración. Todo el procesamiento ocurre en tu navegador; la imagen nunca se envía a un servidor.

Cómo extraer colores de una imagen

Cuando quieres saber qué colores predominan en una foto, una ilustración o un logotipo, ir eligiéndolos uno a uno con una herramienta de cuentagotas resulta tedioso. Esta herramienta hace ese trabajo por ti: basta con subir una imagen para que liste automáticamente los colores representativos —los llamados colores dominantes— que ocupan las mayores áreas de la imagen. Los códigos HEX y los valores RGB se muestran de inmediato, listos para copiarlos directamente en CSS, Figma, Photoshop o cualquier otra herramienta de diseño que estés usando.

Por dentro, la herramienta dibuja la imagen sobre un elemento Canvas del navegador y lee sus datos de píxeles. Los colores parecidos se agrupan (se cuantizan) en grupos amplios, se cuenta cuántas veces aparece cada grupo y se eligen los grupos más frecuentes como colores representativos. Las áreas transparentes de una imagen PNG se excluyen automáticamente de este recuento, de modo que incluso un recorte con fondo transparente arroja resultados centrados en los colores del propio sujeto y no en el fondo. Las imágenes grandes se reducen internamente antes de analizarlas, por lo que incluso fotos de varios megapíxeles se procesan casi al instante. Como todo el cálculo ocurre localmente en tu navegador, los datos de la imagen nunca salen de tu dispositivo, lo que hace que la herramienta sea segura incluso para fotos sensibles o privadas.

Pasos para extraer colores de una imagen

  1. Sube una imagen Arrastra y suelta un archivo de imagen en el área indicada, o haz clic en ella para elegir un archivo desde el selector.
  2. Elige cuántos colores extraer Selecciona 4, 8 o 12 en la opción «Número de colores a extraer». El resultado se recalcula al instante cada vez que cambias la selección, sin necesidad de volver a subir la imagen.
  3. Revisa las muestras extraídas Las muestras de color aparecen ordenadas de mayor a menor frecuencia. Junto a cada muestra se indican su código HEX y sus valores RGB.
  4. Copia un código HEX Haz clic en el botón de copiar debajo de cualquier muestra para enviar ese código HEX directamente al portapapeles, listo para pegarlo en CSS o en una aplicación de diseño.

Consejos para aprovecharla mejor

  • Haz clic en el botón de copiar debajo de cada muestra para copiar su código HEX al portapapeles, listo para pegarlo en CSS o en tu herramienta de diseño.
  • Elige 4, 8 o 12 colores para extraer. Usa 4 para una paleta de logotipo sencilla, o 12 para capturar las variaciones sutiles de una foto detallada.
  • Las áreas transparentes de las imágenes PNG se excluyen automáticamente, por lo que los colores extraídos se centran en el sujeto real y no en el fondo.
  • Todo el procesamiento se ejecuta localmente en tu navegador mediante la API Canvas; la imagen nunca se envía a ningún servidor, por lo que es seguro usarla incluso con imágenes sensibles.
  • Los colores se muestran de mayor a menor frecuencia. Los primeros colores mostrados ocupan la mayor área de la imagen.

Formas de aprovechar esta herramienta

Crear una paleta a partir de un logotipo existente

Sube la imagen de un logotipo para obtener como códigos HEX los colores exactos que utiliza, facilitando que un sitio web o una presentación mantengan coherencia visual con la marca.

Encontrar candidatos de color de marca en fotos de producto

Extraer los colores representativos de un empaque o de una fotografía de producto te da material concreto para decidir un color corporativo o un color de acento para una página de campaña.

Entender el equilibrio cromático de una foto o ilustración

Alternar entre 4 y 12 colores extraídos te permite ver de un vistazo el tono general de una imagen y, al mismo tiempo, el desglose más fino de matices al observarla con más detalle.

Trasladar colores a CSS o a una herramienta de diseño

Copia un código HEX extraído y pégalo directamente en una variable CSS o en el selector de color de Figma o Photoshop, evitando el trabajo manual de transcribir colores a simple vista.

Glosario

Color dominante
El color que ocupa la mayor área de una imagen, o que aparece con mayor frecuencia en ella. Las muestras que lista esta herramienta corresponden exactamente a estos colores dominantes, ordenados según cuánta superficie de la imagen cubren.
Código HEX
Una notación que representa los componentes rojo, verde y azul de un color como un número hexadecimal de dos dígitos cada uno, por ejemplo «#3366cc». Tras el símbolo «#» se indican, en orden, el rojo, el verde y el azul, y este formato se usa ampliamente en CSS y en programas de diseño.
Valor RGB
Una forma de especificar un color mediante los tres colores primarios de la luz —rojo, verde y azul—, cada uno expresado con un número entre 0 y 255. Combinando estos tres valores se puede reproducir prácticamente cualquier color visible.
Cuantización del color
El proceso de redondear colores parecidos y agruparlos en un número menor de grupos. Esta herramienta divide cada canal RGB en grupos de 32 unidades, de modo que las pequeñas variaciones de color introducidas, por ejemplo, por la compresión JPEG se cuenten como el mismo color en lugar de tratarse como ruido.
Valor alfa (transparencia)
Un valor que describe la opacidad de cada píxel individual de una imagen. Las áreas transparentes de un PNG con transparencia tienen un valor alfa bajo, y esta herramienta excluye automáticamente esos píxeles de su recuento de colores.
API Canvas
Una interfaz de JavaScript del navegador para dibujar y analizar imágenes y gráficos. Esta herramienta la usa para leer una imagen píxel a píxel y extraer sus colores íntegramente en tu dispositivo, sin enviar nunca los datos a un servidor.

Preguntas frecuentes

Esta herramienta usa un algoritmo simple que cuantiza la imagen en grupos de color y devuelve el color promedio del grupo más frecuente como color representativo. Es suficiente para obtener una idea rápida del tono general de una imagen, pero ten en cuenta que no es tan preciso como los métodos de agrupamiento más rigurosos (como k-means) que usan las herramientas profesionales de paletas de color.

No. Esta herramienta usa la API Canvas para cargar la imagen y extraer los colores completamente dentro de tu navegador (del lado del cliente). Los datos de la imagen nunca se envían a un servidor, por lo que es seguro usarla incluso con imágenes sensibles.

Cualquier formato de imagen común que la etiqueta de un navegador pueda mostrar (incluyendo JPEG, PNG, WebP y GIF) debería funcionar, según los formatos que acepte el selector de archivos de tu navegador.

Sí. Cada color se muestra como un código HEX (por ejemplo, #3366cc) que puedes copiar al portapapeles con un clic, para pegarlo directamente en Figma, Photoshop, CSS o cualquier otra herramienta que acepte valores de color HEX.
Tool-kun

A propósito — El trabajo de encontrar colores de marca en fotografías

Extraer los colores usados en una foto o en el empaque de un producto es una tarea habitual en el diseño web y gráfico. Al crear las pautas visuales de una marca, los diseñadores suelen empezar extrayendo colores representativos de fotos o logotipos existentes, y luego los usan como candidatos para un color corporativo o de acento. Lo que antes se hacía a simple vista con un gotero de color, uno por uno, ahora puede automatizarse con algoritmos como la extracción de colores dominantes que usa esta herramienta.

Existen muchos algoritmos para extraer colores. El método de cuantización por grupos y conteo de frecuencia que usa esta herramienta redondea el valor RGB de cada píxel a un grupo aproximado y cuenta cuántas veces aparece cada grupo; es una técnica simple y económica de calcular que se ejecuta rápido. Métodos más avanzados, como la agrupación k-means, agrupan los colores según la distancia en el espacio de color y pueden producir agrupaciones más naturales, a costa de un mayor cálculo.

Un detalle curioso es cuánto puede cambiar la impresión de una misma imagen según cuántos colores se extraigan. Extraer solo 4 colores revela el tono general de una imagen (si tiende a ser cálida o fría), mientras que extraer 12 empieza a capturar variaciones sutiles causadas por sombras y reflejos de luz. Ajustar la cantidad permite obtener distintos niveles de detalle de la misma imagen.

Leer curiosidades relacionadas

Ver todas las curiosidades

Las personas que vieron esta herramienta también vieron

Conversor de RGB a Hex (y de Hex a RGB) — Gratis, Sin Registro

Introduce un valor RGB o un código de color hexadecimal para convertirlo al instante en la otra dirección. Funciona tanto de RGB a hex como de hex a RGB, listo para pegar en tu CSS o herramienta de diseño — gratis, sin n...

Conversor de modelos de color (RGB, HSL, HSV, CMYK)

Introduce un código de color HEX o elige uno con el selector de color para calcular al instante sus valores equivalentes en RGB, HSL, HSV (HSB) y CMYK, todos a la vez.

Comprobador de contraste (verificación de conformidad WCAG)

Introduce dos colores para calcular la relación de contraste WCAG (Web Content Accessibility Guidelines) y comprobar su conformidad con los niveles AA y AAA.

Simulador de daltonismo (deficiencia de visión de color)

Herramienta gratuita que simula cómo se ve un color para personas con protanopia, deuteranopia o tritanopia (deficiencia de visión de color).

Guía de paletas de colores — copia colores estándar de la Web y Material Design

Una colección de referencia con las paletas de diseño más consultadas: colores estándar de la Web, el sistema de color de Material Design y una rampa de grises, cada una con su código HEX y un botón de copia con un clic.

Convertidor de RGBA a RGB (fusión con el fondo)

Introduce un color de primer plano semitransparente (RGBA) y un color de fondo para calcular el color RGB opaco resultante de mezclar ambos mediante alpha blending, ideal como alternativa donde rgba() no es compatible.