Selector de color de imagen
Sube una imagen, selecciona un píxel en el lienzo y consulta valores HEX, RGB, HSL, HSV y CMYK. Compara colores recientes, extrae una paleta principal y descarga una muestra PNG.
Haz clic o arrastra y suelta
La imagen se lee en tu navegador. Cuando aparezca en el lienzo, haz clic o toca el píxel que quieras muestrear.
Hasta 10 MB · imágenes compatibles con el navegadorVista previa del lienzo
Color seleccionado
Colores recientes
Paleta
listas para usar.
- Pantalla claraSeparamos entrada y resultado para que se encuentren rápido.
- Resultado primeroMostramos lo importante antes y el proceso solo cuando ayuda.
- Menos fricciónSin registro ni datos innecesarios para empezar.
Elige un píxel para el código exacto y usa la paleta para leer la imagen completa
Este selector de color de imagen sirve para tomar un punto de una foto, captura, logo o ilustración y ver su color en HEX, RGB, HSL, HSV y CMYK. Al hacer clic en el lienzo, todos los campos de código cambian a la vez y el color queda guardado en colores recientes.
No es lo mismo copiar el color de un píxel que entender la gama principal de una imagen. Usa el clic sobre el lienzo cuando necesites un valor concreto, y extrae una paleta cuando quieras preparar una referencia para una miniatura, una maqueta o una nota de diseño.
Subir la imagen y escoger el primer punto
- Usa Añadir imagen o el área de carga para elegir un archivo compatible con el navegador, como JPG, PNG, GIF o WebP.
- Cuando la imagen aparezca en el lienzo, mueve el puntero o toca el área que quieres revisar.
- Haz clic o toca para fijar el color seleccionado y actualizar los campos de código.
Mirar con lupa antes de copiar
- Un borde de logo, una sombra o un degradado puede cambiar de color en pocos píxeles.
- La lupa 9×9 ayuda a elegir una zona sólida en lugar de un borde mezclado.
- Las pistas de coordenada y alfa son útiles cuando la imagen tiene transparencia o detalles muy pequeños.
Elegir el formato de color adecuado
- HEX suele ser el formato más cómodo para CSS, tokens de diseño y documentación breve.
- RGB encaja bien con trabajos de canvas, scripts y procesos de imagen.
- HSL y HSV ayudan a hablar de tono, saturación y valor; CMYK es una referencia aproximada, no una prueba de imprenta.
Comparar candidatos en colores recientes
- Cada color seleccionado se añade a la lista de colores recientes.
- Toma varios puntos del mismo fondo, botón o acento y compara las tarjetas antes de decidir.
- Vacía el historial cuando cambies de imagen o empieces otra ronda de diseño.
Extraer una paleta de colores principales
- La paleta agrupa colores similares de la imagen y muestra primero los tonos más presentes.
- Usa 5 colores para una vista rápida, 8 para una referencia equilibrada de web o miniatura, y 10 a 12 para fotos con más variación.
- La paleta sirve para acotar opciones, no para sustituir una guía de marca.
Descargar una muestra PNG
- Descargar guarda la paleta extraída o, si todavía no hay paleta, el último color seleccionado.
- La imagen PNG reúne muestras y códigos, útil para comentarios, borradores y documentos de referencia.
- Extrae la paleta primero si quieres guardar varios colores en el mismo archivo.
Qué significa procesar en el navegador
- La imagen elegida se lee en el navegador actual y se dibuja en el lienzo.
- Los valores de color salen de los píxeles de ese lienzo, y la herramienta no sube la imagen para leer sus colores.
- Al cerrar la pestaña, reiniciar o elegir otra imagen, el estado de trabajo cambia.
Por qué el color puede verse distinto
- Las imágenes grandes pueden redibujarse al tamaño de vista previa para mantener la página fluida.
- El brillo del monitor, los perfiles de color, la transparencia y la decodificación del navegador pueden cambiar la percepción del mismo valor.
- Para aprobación de impresión o revisión de píxel original, conviene contrastarlo con el archivo fuente y un flujo con gestión de color.
Revisar contraste antes de usarlo en interfaz
- Un color puede verse bien como muestra y fallar como texto o etiqueta de botón.
- Prueba cada combinación sobre fondos claros y oscuros.
- Para textos, botones y controles importantes, usa también una herramienta específica de contraste.
Flujos de trabajo habituales
- Toma el fondo de una captura y pega el valor HEX en una variable CSS.
- Extrae una paleta de 8 colores de una foto de producto para orientar una miniatura.
- Prueba varios acentos de una ilustración y conserva el mejor candidato en colores recientes.
Preguntas frecuentes
¿Mi imagen se sube a un servidor?
No. La imagen seleccionada se lee en tu navegador actual y se dibuja en el lienzo. Esta herramienta no sube la imagen a un servidor para leer sus valores de color.
¿Qué archivos de imagen puedo usar?
Puedes usar archivos que tu navegador pueda decodificar, como JPG, PNG, GIF y WebP. La visualización real depende del soporte del navegador que estés usando.
¿La herramienta lee los píxeles originales de una imagen grande?
No siempre. Para mantener la pantalla fluida, una imagen grande puede redibujarse al tamaño del lienzo de vista previa, y los valores se leen desde ese lienzo.
¿Puedo usar la paleta extraída como colores oficiales de marca?
La paleta es una lista inicial de colores muestreados desde la imagen. Para colores oficiales de marca o impresión, revisa también la guía original, el archivo fuente o una herramienta con gestión de color.
¿Qué se guarda en el PNG descargado?
Si extrajiste una paleta, el PNG guarda las muestras de color y sus códigos HEX. Si todavía no extrajiste una paleta, guarda solo el último color seleccionado como muestra.