Extrae el color exacto de cualquier imagen

Sube cualquier JPG, PNG, WebP o GIF y haz clic en cualquier punto de la imagen mostrada: se muestrea el píxel exacto bajo tu cursor y se muestra en HEX, RGB y HSL con copia en un clic para cada formato. Perfecto para igualar un color de marca, muestrear un tono de una fotografía o capturar colores de acento de un boceto de diseño.

Haz clic en cualquier píxel y este selector de color muestra su código de color HEX (por ejemplo #FF6B35) junto a RGB y HSL: los mismos códigos de color HTML/CSS que pegas directamente en una hoja de estilos, un token de diseño o un atributo HTML. Pulsa Copiar para llevarte el código hex con un solo clic.

La imagen se reduce a 320 píxeles en su lado más largo y luego cada píxel se agrupa según sus 4 bits superiores por canal. Los grupos más poblados se promedian de nuevo a color completo de 8 bits, se ordenan por frecuencia y se devuelven como tu paleta. El resultado suele ser de 5 a 24 colores dominantes que resumen visualmente la imagen.

Sí. Los botones de descarga producen dos formatos: un bloque de variables CSS listo para pegar en un selector :root (--color-1, --color-2…) y un archivo JSON con el valor hexadecimal, los componentes RGB y el porcentaje de peso de cada color. Ambos formatos se integran limpiamente en tokens de diseño, configuraciones de Tailwind y bibliotecas de paletas.

No: la selección de color y la extracción de paletas se realizan íntegramente en tu navegador mediante la API canvas de HTML. La imagen permanece en tu dispositivo, lo que hace que la herramienta sea segura para fotos de productos sin lanzar, maquetas en borrador y recursos de marca sujetos a acuerdos de confidencialidad.

Para trabajos de identidad de marca, de 5 a 8 colores es el punto ideal: captura el tema dominante sin diluir las opciones de acento. Para visualización de datos recomendamos de 10 a 16 colores, así tienes suficientes tonos categóricos. El control deslizante te permite elegir entre 5 y 24.

Los píxeles con un alfa inferior a 128 se ignoran, de modo que los fondos transparentes no contaminan la paleta con colores de «fondo». Esto hace que el Selector de Color de Imagen sea especialmente útil para recortes de productos, ilustraciones de stickers y sujetos aislados.

HEX (#RRGGBB) es el más compacto y es el que usan CSS, Figma y Sketch de forma predeterminada. RGB muestra los tres valores de componente del 0 al 255, útil al trabajar con datos de imagen de forma programática. HSL (tono, saturación, luminosidad) es intuitivo para ajustar colores: desplaza el tono para cambiar de familia de color y ajusta la luminosidad para los tintes y las sombras.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

No hace falta ninguna imagen. El selector y la rueda de color de arriba funcionan por sí solos: arrastra el cuadro de saturación/brillo y el control de tono, o escribe cualquier valor HEX, RGB o HSL para fijar un color exacto. Subir una imagen es opcional, solo sirve para capturar colores de una foto con el cuentagotas.

Elige tu color base y el panel de armonías de color creará al instante combinaciones complementarias, análogas, triádicas, complementarias divididas, tetrádicas y monocromáticas siguiendo la teoría del círculo cromático. Haz clic en cualquier muestra para copiar su código HEX.

En el Selector de color y Rueda independiente, ajusta tu color y el panel muestra su relación de contraste frente al blanco puro y al negro puro junto con la calificación WCAG: AAA, AA, AA Large o Fail. Úsalo antes de finalizar el color de un texto o botón para que siga siendo legible y cumpla las pautas de accesibilidad WCAG 2.1.

Sí. El Selector y rueda de color independiente muestra el color CSS con nombre más cercano junto al valor HEX, RGB o HSL que hayas ajustado, lo cual resulta práctico para describir rápidamente un tono en un informe, un ticket o una especificación de diseño sin adivinar.

Haz clic en Aleatorio en el Selector de color y rueda cromática para saltar a un nuevo color, y luego usa el panel de Armonías de color de abajo para ver paletas complementarias, análogas, triádicas y otras combinaciones creadas a partir de ese color: una forma rápida de encontrar un punto de partida cuando diseñas desde cero en lugar de tomar muestras de una imagen existente.

Usa el menú desplegable de Tamaño sobre la paleta para elegir 5, 8, 10, 16 o 24 colores dominantes: la paleta se recalcula al instante a medida que lo cambias. Combina un tamaño pequeño como 5 para una paleta de marca limpia con el cuentagotas de color seleccionado para capturar uno o dos tonos de acento exactos que la extracción automática podría promediar y perder.

Sí: el Selector y rueda de color independiente muestra la relación de contraste de tu color actual frente al blanco puro y el negro puro justo debajo de la muestra, etiquetada como AAA, AA, AA Large o Fail según los umbrales de la WCAG (7:1, 4,5:1, 3:1). Úsalo para comprobar que una combinación de texto/fondo cumple los estándares de accesibilidad antes de fijar un color de diseño.

El Selector de color y la Rueda hacen coincidir automáticamente el color que hayas ajustado —mediante el selector, el cuadro HEX o los campos RGB/HSL— con el nombre de color CSS estándar más cercano, mostrado como 'Nombre más cercano' junto a la muestra. Es una forma rápida de describir un color verbalmente o de encontrar su equivalente web-safe más próximo.

Sí: cada clic o toque en la imagen subida añade una nueva muestra a tu lista de Colores seleccionados en lugar de reemplazar la anterior, así que puedes crear un conjunto personalizado de colores exactos de píxeles de distintas partes de una foto. Elimina cualquier muestra con su botón ×, o vacía toda la lista con Borrar selección.

Sí: el botón Aleatorio (icono de barajar) del Selector y rueda de color salta a una nueva combinación de tono, saturación y brillo con un solo clic, útil para superar un bloqueo creativo o explorar una paleta que no habrías escrito manualmente. HEX, RGB, HSL y las muestras de armonía de debajo se actualizan todas a la vez.

En una pantalla táctil, arrastra el dedo por la imagen para ver el color que hay debajo en una muestra flotante en vivo y luego levanta el dedo para añadir ese píxel exacto a tu lista de Colores seleccionados: no hace falta un toque de confirmación aparte. El mismo menú desplegable de tamaño de paleta y los botones de exportación funcionan igual en el móvil.

Sí. La rueda de color en la parte superior de la página tiene un botón Aleatorio que salta a un color al azar y muestra al instante sus códigos HEX, RGB y HSL, su color con nombre más cercano, las relaciones de contraste sobre blanco y negro, y conjuntos completos de armonías: complementaria, análoga, triádica, complementaria dividida, tetrádica y monocromática. Es una forma rápida de explorar puntos de partida para una paleta.

Esta herramienta toma muestras de color de una imagen subida o de la rueda de color integrada, en lugar de leer tu pantalla en tiempo real. La solución más rápida para un selector de color de pantalla: toma una captura de pantalla, suéltala en la página y haz clic en el píxel exacto que quieras — obtienes los mismos códigos HEX, RGB y HSL sin instalar ninguna extensión, y la captura nunca sale de tu navegador.