Cómo identificar un color específico en una aplicación o sitio web

Imagina que te desplazas a través de las imágenes y encuentras el color perfecto, el tono exacto que necesitas para tu próximo proyecto de diseño. Hay algunas herramientas increíbles en Internet que te ayudan a identificar colores específicos en cualquier aplicación o sitio web. Echemos un vistazo a algunas de las mejores opciones.

1. Uso de las herramientas de desarrollo en el navegador web Chrome

Una opción que puedes probar es la herramienta de desarrollo de Chrome. Chrome viene con muchas características útiles para los desarrolladores, lo que hace que las tareas sean mucho más fáciles de hacer. Puedes utilizar los siguientes pasos para identificar colores específicos en cualquier aplicación o sitio web.

  • Abre la página web en la que quieres identificar un color en el navegador web Chrome
  • Haz clic en el icono de tres puntos que se encuentra en la parte superior derecha de Chrome. Aparecerá una ventana emergente con un montón de opciones.
  • Haz clic en «Más herramientas» y luego selecciona «Herramientas para desarrolladores» en la ventana emergente resultante.
  • Usa Ctrl + Shift + I si quieres saltarte los pasos anteriores
  • Ahora, la ventana se divide en dos pantallas – el sitio web a la izquierda y el código del sitio web a la derecha
  • Teclea Ctrl + Shift + C en tu teclado. Esto le muestra todos los detalles de un elemento en particular en el sitio web cuando pasamos el cursor del ratón sobre los elementos.
  • Puedes encontrar el código de color del elemento junto con otra información útil.
VER  Facebook: Cómo activar el modo oscuro

Ejemplo

Digamos que estás interesado en los códigos de color específicos para algunos elementos en el siguiente sitio web:

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

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

Escriba el comando y el atajo «Ctrl + Shift + C» y pase el cursor del ratón sobre los elementos de la página web. Esto 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 un panel de control debajo de la herramienta de búsqueda.

Aquí, podemos encontrar el código de color en el pop up de la barra de navegación. El código de colores es el #333333.

El color del tablero de mandos se puede encontrar junto con otros detalles útiles. El color: #333333, Color de fondo: #5D4A8E.Aunque puede parecer un poco intimidante al principio, el programa se vuelve mucho más fácil de usar con un poco de práctica.

2.Extensión del cromo del gotero

El gotero es una extensión de cromo popular y ampliamente utilizada para ayudarte a encontrar ciertos colores en cualquier sitio web o aplicación.

Siga los siguientes pasos para identificar colores específicos en un sitio web o una aplicación utilizando la herramienta de extensión del gotero.

  • Abrir cualquier sitio web o aplicación en el navegador web Chrome
  • Haga clic en el icono de la extensión del gotero
  • Selecciona «Elegir color de la página web» y pasa el cursor del ratón por diferentes elementos de la aplicación o del sitio web.
VER  Gmail: Cómo cambiar el fondo

Puedes encontrar el código de colores de los elementos listados en la parte inferior derecha de la página web.

Ejemplo

Bien, usemos la herramienta de extensión del gotero en un ejemplo de la vida real. Comenzaremos abriendo una página web y pulsando el icono de la extensión del cuentagotas

Al pasar el cursor sobre varios elementos del sitio web, puede ver que los códigos de color aparecen en una sección en la parte inferior derecha de la pantalla.

Cuando coloco el cursor sobre el icono en forma de V, puedo ver su código de colores en la ventana inferior como se ha mencionado.La ventaja de esta herramienta es que también se puede encontrar el código RGB junto con el código de color hexadecimal del elemento. El método es flexible de usar para aquellos que quieren una manera simple y rápida de agarrar los códigos de sus colores favoritos.