Selector de color de imagen, obtén los colores de cualquier foto
Extrae colores de cualquier imagen en tu navegador. Pasa el cursor con una lupa, haz clic para capturar valores HEX, RGB y HSL y saca una paleta dominante.
Cargando Selector de color de imagen, obtén los colores de cualquier foto… Si no ocurre nada, activa JavaScript.
Un selector de color de imagen (a menudo llamado cuentagotas) te dice el color exacto de cualquier píxel de una foto, captura de pantalla, logotipo o maqueta de diseño. Carga una imagen, pasa el cursor por encima con la lupa de aumento para inspeccionar píxeles individuales y haz clic para capturar el color como código HEX, valor RGB o valor HSL, cada uno con copia en un clic. La herramienta también analiza automáticamente toda la imagen y extrae una paleta de colores dominantes, de modo que puedes obtener un conjunto coordinado de hasta ocho muestras en segundos, sin ningún muestreo manual.
Preguntas frecuentes
¿Cómo extraigo un color de una imagen?
¿Mi imagen se sube a un servidor?
¿Qué formatos de color ofrece el selector?
¿Cómo funciona la extracción de la paleta dominante?
¿Puedo pegar una captura de pantalla directamente desde el portapapeles?
¿Qué formatos de imagen se admiten?
¿Qué precisión tiene el color capturado?
¿Cuál es la diferencia entre HEX, RGB y HSL?
¿Puedo guardar varios colores y compararlos?
¿Por qué los colores extraídos de un JPEG se ven ligeramente distintos?
Acerca de Selector de color de imagen, obtén los colores de cualquier foto
Sacar un color de una imagen es cuestión de tres pasos: cargar, apuntar, hacer clic. Puedes arrastrar y soltar un archivo en cualquier parte de la herramienta, buscarlo con el selector de archivos o simplemente pegar una captura de pantalla directamente desde el portapapeles con Ctrl+V (Cmd+V en Mac). La lupa muestra una cuadrícula ampliada de los píxeles alrededor del cursor junto con una vista previa en vivo del color que hay debajo, lo que facilita acertar exactamente en el píxel correcto incluso en detalles finos como texto suavizado, bordes delgados o degradados sutiles. Cada color en el que haces clic se añade a una fila de historial, así que puedes comparar candidatos lado a lado y volver a seleccionar cualquiera de ellos más tarde con un solo clic.
Todo ocurre localmente en tu navegador. La imagen se decodifica en un lienzo HTML dentro de tu propio dispositivo y nunca sale de él: no hay subida, ni procesamiento en servidor, ni cuenta, ni seguimiento de tus archivos. Eso hace que este selector sea seguro para material confidencial como fotos de producto sin publicar, activos de marca de clientes o capturas internas. También significa que la herramienta sigue funcionando sin conexión una vez cargada la página y responde al instante sea cual sea la velocidad de tu conexión, porque sencillamente no hay ningún viaje por la red.
Los usos típicos están por todas partes en el trabajo diario de diseño y desarrollo. Los desarrolladores front-end extraen un color de marca de un logotipo para reproducirlo en CSS. Los diseñadores verifican que un recurso exportado usa realmente los valores de marca aprobados. Los responsables de marketing comprueban la coherencia de color entre imágenes de campaña, y los ilustradores muestrean fotos de referencia para construir una paleta de pintura. La extracción automática de paleta es especialmente útil para crear un esquema de color a partir de fotografía, por ejemplo sacar el tema de un sitio web de una imagen de cabecera. Cuando quieras refinar o convertir los valores capturados, el conversor de colores y el generador de paletas de este sitio continúan justo donde esta herramienta termina.
Del cuentagotas a los códigos hexadecimales: cómo aprendimos a nombrar los colores de pantalla
La metáfora del cuentagotas es más antigua de lo que la mayoría espera. Los primeros programas de dibujo de los años 80, incluidos Deluxe Paint en el Amiga y MacPaint en el Macintosh, necesitaban una forma de permitir a los artistas reutilizar un color que ya estaba en el lienzo, y una pipeta absorbiendo una gota de pintura fue el esqueumorfismo que perduró. Cuando Photoshop 1.0 salió en 1990, llevó el cuentagotas a los flujos de trabajo profesionales, y todos los editores de imagen posteriores han conservado tanto la herramienta como el icono, hasta el punto de que muestrear cualquier valor desde cualquier parte de una interfaz hoy se llama genéricamente "hacer cuentagotas".
El código hexadecimal de seis dígitos es un accidente feliz del hardware. Las pantallas adoptaron el color de 24 bits a finales de los años 80, con un byte por canal, y un byte son exactamente dos dígitos hexadecimales, así que #RRGGBB era la forma legible más compacta de escribir lo que la memoria de vídeo contenía realmente. HTML 3.2 estandarizó la notación para la web en 1997, junto con un conjunto de 16 colores con nombre heredados de la paleta VGA de Windows. La lista mucho más larga de nombres que los navegadores entienden hoy, incluidas rarezas como PapayaWhip y DarkSlateGray, vino del sistema de ventanas X11, donde investigadores del MIT y de DEC nombraron colores en los años 80 en parte a ojo y, en algunos casos, según se cuenta, comparándolos con lápices de cera Crayola.
Una reliquia de aquella época todavía aparece en conversaciones de diseño: la paleta segura para web. En los días de las pantallas de 8 bits, los navegadores solo podían garantizar que 216 colores concretos se mostraran sin tramado, así que los diseñadores se limitaban a valores hexadecimales construidos con 00, 33, 66, 99, CC y FF. Las pantallas modernas muestran miles de millones de colores y la restricción lleva dos décadas siendo irrelevante, pero esos toscos valores seguros para web aún asoman en guías de estilo antiguas, un registro fósil de la época en la que elegir un color significaba negociar con el hardware.