Cómo identificar un color en particular en una aplicación o sitio web

Imagínese desplazarse por las imágenes y encontrar el color perfecto, el tono exacto que necesita para su próximo proyecto de diseño. Hay algunas herramientas excelentes en Internet para ayudarlo a identificar ciertos colores en cualquier aplicación o sitio web. Echemos un vistazo a algunas de las mejores opciones para ellos.

1. Utilice herramientas para desarrolladores en el navegador web Chrome.

Una opción que puede probar es la herramienta para desarrolladores de Chrome. Chrome incluye muchas funciones útiles para los desarrolladores, lo que facilita mucho las tareas. Puede utilizar los siguientes pasos para identificar ciertos colores en cualquier aplicación o sitio web.

  • Abra el sitio web donde desea reconocer un color en el navegador web Chrome.
  • Haga clic en el icono de tres puntos en la parte superior derecha de Chrome. Aparecerá una ventana emergente con varias opciones.
  • Haga clic en «Más herramientas» y luego seleccione «Herramientas de desarrollo» en la ventana emergente.
  • Use Ctrl + Shift + I si desea omitir los pasos anteriores
  • La ventana ahora está dividida en dos pantallas: el sitio izquierdo y el código del sitio derecho.
  • Escribe Ctrl + Shift + C en el teclado. Le muestra todos los detalles sobre un elemento en particular en el sitio cuando abre el mouse sobre los elementos.
  • Puede encontrar el código de color del artículo junto con otra información útil.

Ejemplo

Si está interesado en códigos de colores específicos para algunos de los artículos en el siguiente sitio web:


Puede seleccionar las herramientas de desarrollo haciendo clic en los tres puntos en la esquina de la pantalla. En el menú desplegable, seleccione Más herramientas y luego Herramientas para desarrolladores.



La pantalla se dividirá en dos páginas. Verá el sitio a la izquierda y el código del sitio a la derecha.


Escriba el comando «Ctrl + Shift + C» y el acceso directo y coloque el cursor del mouse sobre los elementos del sitio web. Mostrará el color de ese elemento, junto con otra información útil. A continuación se muestran dos ejemplos en los que encontramos el color de la barra de navegación y el panel de herramientas de búsqueda.

Aquí encontramos el código de color en la ventana emergente de la barra de navegación. El código de color es # 333333.


El color de la placa se puede encontrar junto con otros detalles útiles. Color: # 333333, Color de fondo: # 5D4A8E. Si bien puede resultar un poco intimidante al principio, el programa es mucho más fácil de usar sin mucha práctica.

2. Extensión de cuentagotas de cromo

Eye Dropper es una popular extensión de Chrome que se usa ampliamente para ayudarlo a encontrar ciertos colores en cualquier sitio web o aplicación.


Siga los pasos a continuación para identificar colores específicos en un sitio web o aplicación utilizando la herramienta de extensión Eye Dropper.

  • Abra cualquier sitio web o aplicación en el navegador web Chrome
  • Haga clic en el icono de la extensión Eye Dropper
  • Seleccione ‘Elegir color de página web’ y navegue a varios aspectos de la aplicación o sitio web.


Puede encontrar el código de color de los elementos enumerados en la parte inferior derecha de la página web.

Ejemplo

Bien, usemos la herramienta de extensión de pipetas para un ejemplo de la vida real. Comenzaremos abriendo un sitio web y haciendo clic en el icono de la extensión Eye Dropper.


A medida que recorre los distintos elementos del sitio web, puede ver los códigos de color que aparecen en la parte inferior derecha de la pantalla.


Cuando abro el mouse sobre el ícono en forma de V, veo su código de color en la ventana de abajo, como se mencionó. La ventaja de esta herramienta es que puede obtener el código RGB así como el código de color hexadecimal del elemento. El método es flexible para aquellos que desean una forma rápida y fácil de encontrar sus códigos de colores favoritos.