Selector de color de imagen: obtenga códigos de color HEX y RGB

Cargue cualquier JPG, PNG, WebP o GIF y haga clic en cualquier lugar de la imagen mostrada: el píxel exacto debajo del cursor se muestrea y se muestra como HEX, RGB y HSL con una copia con un solo clic para cada formato. Útil para combinar el color de una marca, probar una muestra de una fotografía o captar tonos destacados de una maqueta 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.

Sí. Se ejecuta en el navegador y no necesita cuenta. No hay nada que instalar ni límite en la cantidad de paletas que inspecciona.

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.

Sí, Pixoate admite el procesamiento por lotes y en masa. Cambie al modo por lotes, agregue hasta 60 imágenes en Premium o 200 en Pro, configure sus opciones una vez y cada imagen se procesará con la misma configuración antes de descargar una hoja de cálculo: una fila de paleta por imagen. El procesamiento masivo es una característica Premium; la salida utiliza la misma calidad y configuración que el modo único.

Sí, con el procesamiento masivo usted configura los ajustes una sola vez y se aplican a todos los elementos del lote: hasta 60 imágenes en Premium o 200 en Pro. No es necesario repetir la configuración por elemento y la extracción de la paleta se ejecuta en su navegador; sólo la hoja de cálculo terminada se guarda para descargar.

Casi siempre una de tres cosas. El archivo supera el límite de carga gratuita de 20 MB: Premium ocupa 50 MB y Pro 120 MB. El formato no es uno que acepte esta herramienta, así que verifique la lista que se muestra en el panel de carga. O el archivo no tiene realmente el formato que dice su nombre: cambiar el nombre de un archivo no cambia lo que contiene, y esa es la razón por la que se rechaza una imagen que parezca válida.

Informa lo que realmente hay en el archivo, por lo que un resultado en blanco o sorprendente generalmente significa que los datos nunca estuvieron allí: eliminados por la aplicación que los guardó por última vez, eliminados por una plataforma al cargarlos o ausentes del original. Pruebe el archivo original intacto directamente desde la cámara o la fuente en lugar de una copia enviada a través de una aplicación de mensajería.

Color Picker supports free standard use within the published processing allowances. Free downloads are clean — no watermark. No signup is required for standard tool use. Photo effects and AI edits have a web-size limit on Free, with the original-resolution result available through Premium or one credit. Crop, resize, rotate, compress and convert stay full size. Premium supports batches of up to 60 files, with the applicable plan limits shown before processing.

No: Color Picker funciona en el navegador, tanto en el ordenador como en el móvil. No necesitas instalar nada, iniciar una prueba ni comprar una licencia antes de comprobar si resuelve lo que necesitas. Pruébalo con el archivo real con el que tienes problemas, no con una muestra.