Cuál es el método más eficaz para extraer los códigos de color de una determinada captura de pantalla?
Si haces una búsqueda rápida en Internet sobre este tipo de preguntas, descubrirás que no hay muchos artículos sobre este tema.
Por ello, hemos decidido escribir un artículo que lo explique de la forma más completa e informativa posible.
Ya sea a través de un sitio web, una aplicación o una extensión de Chrome, cada uno tiene su propio conjunto de beneficios e inconvenientes.
Aquí hay cinco métodos para extraer HEX, RGB, HSL y otros códigos de color de las capturas de pantalla.
1- Use ImageColorFinder.com
Prometemos que el propósito de este post no es únicamente promocionar nuestra propia herramienta, pero en cierto modo lo es :)
Después de investigar un poco en la web, descubrimos que las soluciones disponibles no eran muy fáciles de usar o tenían demasiados anuncios en cada página.
Nuestra aplicación no sólo te permite subir tu propia imagen, encontrar la paleta de colores ideal de forma automática y seleccionar manualmente un color, sino que también puede producir fotos aleatorias de Internet para inspirarte con esos colores.
En esta ocasión concreta, sólo hablaremos de encontrar colores en una captura de pantalla, pero en otros casos, podrías ver cómo algo así puede ser útil para un diseñador o un programador.
Así es como funciona:
Paso 1: Sube tu propia imagen
Sólo tienes que pulsar el botón de carga y seleccionar la foto de tu dispositivo.
Se puede cargar cualquier formato de imagen, así como archivos GIF y SVG.
Una vez que hayas subido tu captura de pantalla, nuestra herramienta la analizará y te mostrará y recomendará algunos colores que podrían ser similares a los que estás buscando.
Si no es así, el siguiente paso te ayudará igualmente.
Paso 2: Haga clic, pase el ratón o pulse sobre el contenedor de imágenes
Puedes seleccionar manualmente los colores de cualquier imagen si los colores generados no son los que buscas.
Para ello, utilizarás el cuentagotas para mayor precisión y comodidad.
Al pulsar, hacer clic o tocar la imagen, aparecerá este cuentagotas.
Después, puedes pasar el ratón por encima y buscar el color exacto que estás buscando.
Las esquinas del cuentagotas también te mostrarán el color sobre el que pasas el ratón, y el cuadrado rojo de su interior te ayudará a saber en qué parte de la imagen te encuentras.
Paso 3: Copia el valor del color
Después de haber completado el paso 2, todo lo que tienes que hacer ahora es copiar los códigos de color que has obtenido de nuestra herramienta.
Para ello, basta con tocar el contenedor de color y el valor se copiará en el portapapeles automáticamente.
Otras características adicionales que puedes utilizar son las personalizaciones en la parte inferior de la herramienta.
Éstas le permitirán seleccionar entre los sistemas de color HEX, RGB y HSL, pixelar la imagen para mayor comodidad y también aumentar o disminuir el zoom del cuentagotas.
2- Utiliza las herramientas de desarrollo de Chrome
Si eres un desarrollador o tienes algún conocimiento de cómo funcionan Chrome y sus herramientas para desarrolladores, puedes utilizar esta opción; de lo contrario, te recomiendo que sigas el método nº 1.
En esta situación, puedes abrir la imagen en Chrome y luego inspeccionar la página para encontrar los códigos de color de la imagen utilizando el cuentagotas incorporado de Chrome.
Esto es lo que haría:
Paso 1: Abra o arrastre el archivo de imagen en Chrome
Para este paso, puedes simplemente hacer clic con el botón derecho en una imagen y seleccionar Abrir con > Chrome.
Por otro lado, puedes iniciar Chrome directamente y arrastrar la imagen a una nueva pestaña o a una existente.
Paso 2: Inspecciona la página
Una vez que tengas la imagen abierta en una pestaña de Chrome, sólo tienes que inspeccionar la página con las herramientas de desarrollo de Chrome.
Puede inspeccionar una página haciendo clic con el botón derecho del ratón sobre ella y seleccionando inspeccionar página, o pulsando Ctrl + Shift + I.
Se abrirá una nueva pestaña a la derecha de su pantalla como resultado de esto.
Paso 3: Haga clic o cree cualquier color en el contenedor de Estilos
En esta etapa, buscaremos en el contenedor de estilos cualquier propiedad de color de un elemento aleatorio, o crearemos uno aleatorio.
Después de eso, podemos hacer clic en dicho color y cambiarlo por el que estamos tratando de obtener el valor de color exacto.
3- Utiliza el Paint incorporado de Windows
Si tienes un ordenador con Windows, Paint es una forma sencilla de conseguirlo.
En lugar de utilizar Chrome para abrir la imagen esta vez, simplemente haremos clic con el botón derecho y seleccionaremos editar.
Ahora, dentro del panel de control de Paint, seleccione el selector de color y elija el color exacto del que desea copiar su valor.
Después, seleccione "Editar colores" y Paint mostrará el último color que haya seleccionado en valores RGB y HSL.
4- Descarga y uso de extensiones de Chrome
Estas dos últimas son mis opciones menos favoritas porque requieren que instales un software adicional en tu dispositivo, pero sin duda pueden ayudarte en este caso.
Hay muchas extensiones de Chrome que te permiten obtener los códigos de color en cualquier sitio web utilizando esta forma.
Son extremadamente similares a las dos primeras formas de esta lista, por lo que no creo que sean muy útiles.
Esta es también una buena alternativa para las personas que no saben cómo inspeccionar un sitio web en Chrome y no quieren poner el esfuerzo adicional en el uso del cuentagotas de Chrome.
Recomiendo ir a la Chrome Web Store y buscar un selector de color que cumpla con tus exigencias y funcione bien.
Colorgrab y Color Picker son dos que recomendaría.
Si estás en un teléfono móvil, entonces la siguiente opción podría ser definitivamente mejor para ti.
5- Uso de aplicaciones móviles
Para algunas personas, el uso de aplicaciones móviles puede ser increíblemente conveniente, pero no tanto para aquellos que sólo necesitan realizar este tipo de actividad de vez en cuando.
La mayoría de las aplicaciones móviles funcionan de la misma manera que la primera estrategia que hemos mencionado.
Subirás una imagen y luego seleccionarás un color dentro de ella.
En dispositivos IOs, Color Names AR sería el primero que comprobaría, y en Android, sería Color Picker.
Sin embargo, debes tener en cuenta que cuando abras la aplicación por primera vez, se te presentará una oferta premium de pago; simplemente haz clic en el botón X para descartar la oferta y utilizar la versión gratuita en su lugar.
Conclusión
A fin de cuentas, todo se reduce a lo que usted quiera y al esfuerzo que esté dispuesto a realizar.
Si sólo lo necesitas ahora y no lo vas a volver a necesitar, los dos primeros procedimientos son los mejores; si lo vas a necesitar regularmente, los dos primeros métodos y el último son bastante más convenientes.
¡Gracias por tomarte el tiempo de leer y visitar! 🤘