Extraer colores de una imagen: paleta HEX, RGB y HSL

Suba una imagen y obtenga sus 5 a 10 colores dominantes con porcentaje en HEX, RGB y HSL, con exportación CSS, Tailwind o JSON. Sin enviar archivos.

Cómo extraer los colores de una imagen

Para extraer los colores dominantes de una imagen, se reduce, se leen sus píxeles y se agrupan por median cut: se ordena el grupo de píxeles más numeroso según su canal (rojo, verde o azul) más extenso, se corta en el píxel mediano y se promedia cada grupo en un color. La herramienta devuelve de 5 a 10 colores con su porcentaje.

Pasos

  • La imagen se redibuja en un canvas de 160 px como máximo: incluso una foto de 24 megapíxeles sigue siendo rápida.
  • Los píxeles con alfa inferior a 128 se ignoran, lo que gestiona los PNG transparentes.
  • El median cut produce entre 5 y 10 grupos; la parte de cada color es su número de píxeles dividido entre el total.
  • Conversión HSL: tono, saturación y luminosidad se calculan a partir de R, G y B llevados a un rango de 0 a 1, con l = (max + min) ÷ 2.

Ejemplo

Una imagen con 50 píxeles rojos, 30 azules y 20 transparentes da dos colores: #ff0000 al 62,5 % y #0000ff al 37,5 %, sin contar los píxeles transparentes.

Formatos de exportación

Variables CSS (--palette-1: #ff0000;), configuración de Tailwind y una matriz JSON con HEX, RGB, HSL y porcentaje.

Límites

El color obtenido es un promedio: puede no coincidir exactamente con ningún píxel. Una foto muy contrastada con pocos grupos pierde detalle; aumente el número de colores para más matices. El procesamiento es local, la imagen nunca se envía.

Fuentes y fechas: el algoritmo median cut fue descrito por Paul Heckbert en «Color Image Quantization for Frame Buffer Display», ACM SIGGRAPH Computer Graphics, vol. 16, n.º 3, julio de 1982, pp. 297-307. La herramienta aplica una variante sencilla (el grupo más numeroso se corta en el píxel mediano de su canal más extenso). Las fórmulas de RGB a HSL son las clásicas de conversión, con valores redondeados a enteros (verificado el 14/10/2026)

Preguntas frecuentes

¿Cómo extraer los colores de una imagen?

Suba la imagen a la herramienta: se reduce y se analiza con median cut, que devuelve de 5 a 10 colores dominantes con su porcentaje. Cópielos en HEX, RGB o HSL.

¿Se envía mi imagen a un servidor?

No. Su navegador lee y analiza la imagen mediante un canvas, sin ninguna petición de red. Desaparece de la memoria en cuanto cierra la página.

¿Cómo obtener el código HEX de un color de una foto?

Ejecute el análisis y copie el valor HEX del tono que desee, por ejemplo #3a7bd5. Para el color exacto de un píxel use un cuentagotas; aquí cada color es el promedio de un grupo de píxeles.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.