¿Cuál es la mejor manera de escoger los códigos de color de una imagen?
Resulta que no hay demasiadas respuestas a esta pregunta en Internet, así que hemos decidido crear un post que responda a esta pregunta de la mejor y más útil manera posible.
Ya sea a través de un sitio web, una aplicación o una extensión de Chrome, todos tienen diferentes ventajas y desventajas.
Aquí hay 5 maneras en las que se puede recoger HEX, RGB, HSL y muchos otros códigos de color de cualquier foto.
1- Use ImageColorFinder.com
Prometemos que el objetivo de este post no es sólo comercializar nuestra propia herramienta, pero en cierto modo lo es :)
Después de investigar un poco en Internet, nos dimos cuenta de que las opciones disponibles no eran muy fáciles de usar, o simplemente tenían demasiados anuncios en cada página.
Nuestra herramienta no sólo te permite subir tu propia imagen, elegir automáticamente la mejor paleta de colores y dejarte elegir manualmente un color, sino que también puede generar imágenes aleatorias de Internet para inspirarte con esos colores.
Lo que esto significa es que, si tu propósito principal es encontrar una combinación de colores para tus proyectos y diseños, entonces al buscar otras imágenes en línea, podrás hacerlo potencialmente más rápido.
Así es como funciona:
Paso 1: Sube tu propia imagen
Sólo tienes que hacer clic en el botón de carga y buscar esa imagen en tu dispositivo.
Puedes subir cualquier formato de imagen, y también archivos GIF y SVG.
Una vez cargada, tu imagen será analizada y nuestra herramienta te mostrará y sugerirá algunos colores que podrían ser los que estás tratando de conseguir.
Si no es así, el siguiente paso te ayudará a pesar de todo.
Paso 2: Pulse, haga clic, pase el ratón o toque el contenedor de la imagen
Si los colores generados no son lo que buscas, entonces puedes escoger manualmente los colores de cualquier imagen.
Para ello, utilizarás el cuentagotas para mayor precisión y facilidad.
Este cuentagotas se activará una vez que pulse, haga clic o toque en la imagen.
Una vez que esto ocurra, podrás moverte y buscar el color exacto que quieres.
Las esquinas del cuentagotas también te mostrarán el color sobre el que estás pasando, y el cuadrado rojo de su interior te ayudará a ver en qué lugar exacto de la imagen te encuentras.
Paso 3: Copiar el valor del color
Una vez que hayas terminado con el paso 2, el último paso debería ser simplemente copiar los códigos de color que obtuviste de nuestra herramienta.
Para ello, basta con tocar el contenedor de color y su valor se copiará automáticamente en el portapapeles.
2- Utilizar las herramientas de desarrollo de Chrome
Si usted es un desarrollador o tiene algún conocimiento de cómo Chrome y la web funciona, entonces usted podría utilizar este método, de lo contrario, yo realmente le animo a seguir con el método # 1.
En este caso, lo que puedes hacer es abrir la imagen usando Chrome, y luego inspeccionar la página para usar el cuentagotas incorporado de Chrome para encontrar los códigos de color de esa imagen.
Así es como funcionarí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 abrir Chrome directamente y arrastrar la imagen a una nueva pestaña o a una pestaña actualmente abierta.
Paso 2: Pulse el botón derecho del ratón y luego inspeccione la página, pulse o Ctrl + Shift + I
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.
Para ello, puede hacer clic con el botón derecho del ratón en la página y luego seleccionar inspeccionar la página o simplemente pulsar Ctrl + Shift + I.
Esto hará que se abra una nueva pestaña a la derecha de tu pantalla.
Paso 3: Haga clic o cree cualquier color en el contenedor de Estilos
En este paso, buscaremos cualquier propiedad de color en el contenedor de estilos, o crearemos una al azar.
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- Utilizando el Paint incorporado de Windows
Si tu PC funciona con Windows, entonces una forma muy fácil de hacer esto podría ser simplemente usando Paint.
Esta vez, sin embargo, en lugar de abrir la imagen con Chrome, 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 de hacer esto, puedes pulsar en "Editar colores" y el Paint tendrá el último color que elegiste tanto en valores RGB como HSL.
4- Descarga y uso de extensiones de Chrome
Estos dos últimos métodos son los que menos me gustan, ya que requieren que instales un software adicional en tu dispositivo, pero sin duda pueden ayudarte en esta situación.
Para este método, hay un montón de extensiones de Chrome que le permiten obtener los códigos de color en cualquier sitio web.
Funcionan de forma muy similar a los 2 primeros métodos de esta lista, por eso no los veo tan convenientes.
Pero para aquellos que no saben cómo inspeccionar una página en Chrome y hacer todo el trabajo extra para usar el cuentagotas de Chrome, esta es también una buena alternativa.
Te animo a que vayas a la Chrome Web Store y busques un selector de colores que se adapte a tus necesidades y funcione sin problemas.
Algunos que recomendaría son Colorgrab y Color Picker.
5- Uso de aplicaciones móviles
El uso de aplicaciones móviles también puede ser muy conveniente para algunas personas, pero no tanto para aquellos que sólo necesitan hacer este tipo de cosas de vez en cuando.
La mayoría de las aplicaciones móviles funcionan de forma similar al primer método que hemos mencionado.
Subes una imagen y eliges un color determinado de la misma.
En dispositivos IOs, Color Names AR sería el primero que comprobaría, y en Android, sería Color Picker.
Sin embargo, tenga cuidado, ya que al entrar en la aplicación se le pedirá una oferta premium, simplemente haga clic en el botón X para omitir el pago y utilizar la versión gratuita en su lugar.
Conclusión
Al final del día, realmente depende de lo que estés buscando y de cuánto tiempo estés dispuesto a dedicar a hacer esto.
Si esto es solo algo que necesitas ahora, y probablemente nunca, entonces los primeros 2 métodos son los mejores, si vas a hacer esto consistentemente, entonces el primero, y los dos últimos son más convenientes por lejos.
¡Gracias por leer y estar aquí! 🤟