Obtener colores dominantes y códigos HEX

Selecciona o pega una imagen, elige entre 4 y 12 colores y extrae la paleta. Pulsa una muestra para copiar su código HEX; los tonos aproximan los colores dominantes.

Se ejecuta localmente en tu navegador

Ver categoría: Frontend y diseño (34)

Los píxeles se muestrean y reducen solo en este navegador. La imagen nunca se envía a VoriTools ni a un servicio de imágenes.

Origen de imagen

Suelta una imagen aquí, pégala o elige un archivo local

Opciones de paleta

Colores a extraer

Los píxeles transparentes se ignoran. Las imágenes grandes se reducen antes del análisis para que el navegador siga respondiendo; las muestras representan regiones dominantes, no píxeles exactos.

Usar la paleta

Haz clic en una muestra para copiar su valor hexadecimal. Combina primer plano y fondo con el Auditor de accesibilidad para comprobar contraste WCAG.

Abrir comprobador de contraste

Paleta extraída

Elige una imagen para extraer una paleta local.

Encuentra colores útiles sin enviar un recurso de diseño

El extractor analiza un lienzo reducido en el navegador y mantiene el archivo original en tu dispositivo. Para trabajo accesible, valida por separado cada pareja final de texto y fondo.

Cómo extraer una paleta de colores de una imagen

Image Color Extractor obtiene una paleta práctica de una imagen local: suéltala, pégala o elige un archivo, selecciona entre 4 y 12 colores y copia los valores HEX directamente en tu CSS.

La imagen se muestrea en un lienzo reducido dentro de esta pestaña, así que no se sube nada. El resultado aproxima los colores dominantes; no es un cuentagotas que lea píxeles exactos.

Añade una imagen: suéltala en la zona de carga, pégala mientras la página tiene el foco o elige un archivo local (PNG, JPEG, WebP, GIF, AVIF o BMP, hasta 40 MB).
Elige cuántos colores conservar: 4, 5, 6, 8, 10 o 12. El valor predeterminado es 6.
Pulsa Extraer colores. Se ignoran los píxeles con alfa inferior a 90, así que la paleta procede solo de las zonas opacas.
Haz clic en una muestra para copiar su código HEX; cada muestra indica también el valor rgb() y su proporción de los píxeles muestreados. Cargar ejemplo sintético usa una imagen de prueba integrada de 960 × 560.
Limpiar restablece la imagen y los resultados. Para comprobar un par de primer plano y fondo tomado de la paleta, continúa en el Auditor de accesibilidad.

Cómo se calcula la paleta y qué significan los porcentajes

Grupos dominantes, no píxeles exactos

La imagen se dibuja en un lienzo escalado para que su lado mayor mida 420 píxeles y se lee en una rejilla que muestrea como máximo unos 140.000 píxeles. Los colores se agrupan en cubos de 4 bits por canal; los grupos se ordenan por número de píxeles y los colores con una distancia inferior a 28 se fusionan antes de elegir los 4–12 finales.

Cada muestra es el promedio de su grupo, de modo que el resultado resume regiones dominantes. Los degradados finos, el tramado, las líneas de un píxel y los bordes suavizados pueden desaparecer con la reducción: toma los valores como puntos de partida, no como originales medidos.

Cómo leer las muestras

El porcentaje bajo cada muestra es la proporción de píxeles opacos muestreados que cayeron en ese grupo; las cifras suman aproximadamente el 100 %. El número que elijas es un máximo: una imagen plana produce una sola muestra al 100 %, y una imagen con pocos colores distintos produce menos muestras.

Una imagen totalmente transparente informa de 0 colores dominantes y no muestra ninguna muestra. Las muestras son botones reales, accesibles con el teclado, y cada copia se confirma en la barra de estado, o se avisa de que el navegador la bloqueó.

Procesamiento local y límites prácticos

El análisis ocurre por completo en la pestaña: el navegador descodifica el archivo, el lienzo se lee con API de píxeles y no se envía ninguna imagen a ningún sitio, así que la herramienta también funciona sin conexión. En una prueba con Chrome de escritorio, una foto de 4000 × 3000 se analizó en unos 0,2 segundos.

El límite de 40 MB existe porque la descodificación ocurre en el navegador. Para accesibilidad, valida cada par final de texto y fondo con el comprobador de contraste en lugar de tratar la paleta como una garantía WCAG.

Herramientas recientes: