¿Cómo utilizar el selector de color de Google Chrome?

Google Chrome incluye Chrome DevTools, que es una colección de herramientas para desarrolladores web. Entre todas las herramientas accesibles, el selector de color disponible en Chrome resulta muy útil

Pero, ¿cómo se accede a él? ¿Cómo se utiliza? ¿Cuáles son las características que ofrece la herramienta?

En este artículo, exploraremos esta herramienta y sus características

¿Cómo iniciar el selector de color de Chrome?

Puede acceder a la herramienta de cromo selector de color utilizando un atajo de teclado o GUI (Interfaz Gráfica de Usuario)

Pulso Ctrl Mayús I cuando utilice el teclado para acceder a DevTools y luego diríjase al selector de color. Si está utilizando un mac, necesita pulsar, Comando Opción I

Si utiliza el ratón, necesita hacer clic con el botón derecho y luego hacer clic en"Inspeccionar" para navegar a través de las DevTools

También puede configurar Chrome DevTools para que se abra automáticamente con cada nueva pestaña. Así, podrá acceder rápidamente al selector de colores para cada pestaña de su navegador

Para conseguirlo, necesita lanzar una nueva instancia de Chrome utilizando la línea de comandos mientras pasa la siguiente bandera
–

-auto-open-devtools-for-tabs

Este es el aspecto que tiene al lanzar Chrome con auto-open DevTools a través del terminal en Linux

google-chrome-stable --auto-open-devtools-for-tabs

¿Cómo utilizar el selector de color en Chrome?

Una vez que inicie DevTools, tendrá que navegar hasta acceder a las herramientas necesarias para identificar el color en una página web o en un diseño en el que desee trabajar

Por defecto, debería ver la sección "Estilo" activa en la parte inferior de las DevTools, como se muestra en la captura de pantalla

Si tiene seleccionada otra cosa, asegúrese de hacer clic en "Estilo" para acceder al código CSS de la página web

Aquí, necesita desplazarse hacia abajo a través del código CSS disponible y buscar una caja de color etiquetada como fondo o color bajo la sección del cuerpo. Este es el selector de color que estaba buscando

Simplemente haga clic en la caja de color; debería darle más opciones, como se muestra en la captura de pantalla de abajo

Ya está Voilà, ya tiene el selector de color en su navegador listo para ayudarle

Aquí, debería encontrar el código hexadecimal o el valor RGB del color y obtener la posibilidad de seleccionar otros elementos CSS para explorar e inspeccionar el diseño en la página web

Características del selector de color en Chrome

El selector de color incorporado de Chrome le ofrece una gran variedad de información además del código hexadecimal para identificar el color

Esto es lo que puede esperar de él. Algunas características clave incluyen

Paletas de colores: En lugar de pasar por muchas tonalidades de color, obtendrá algunas paletas de colores predefinidas para aplicar algunas selecciones rápidamente

Formato de color: Obtendrá la posibilidad de cambiar de código hexadecimal a valores RGBA y también a valores de color HSLA

Cuentagotas: Cuando acceda al selector de color, podrá navegar por la página web y seleccionar cualquier elemento para obtener el código hexadecimal de ese color. Puede hacer clic en el selector de color para activarlo/desactivarlo

Obtendrá más opciones para ajustar los colores y obtener el color exacto de su elección. Aquí están

• Copiar al portapapeles: Puede copiar el código del color identificado rápidamente en su portapapeles.
• Gradiente de color: Puede ajustar el tono del color y recorrer las posibilidades de una combinación de colores de su agrado.
• Control de opacidad: Puede ajustar el nivel de transparencia para darle un aspecto sólido o mínimo.
• Selector de color de fondo: Para elegir un color de fondo adecuado para conseguir el contraste perfecto.
• Relación de contraste: Ajuste el contraste o corríjalo para que el texto/elemento sea visible.

Nota: La herramienta de selección de color no se limita a Google Chrome, sino que puede utilizarse en cualquier navegador web basado en Chrome, como Brave

¿Cómo utilizar el selector de color de Chrome con Google Slides?

Puede navegar para acceder a la herramienta de selección de color si realiza un clic con el botón derecho del ratón en la sección de cabecera de la página web de Google Slides. Aunque Google Slides no ofrece una herramienta de selección de color incorporada, esto debería ser suficiente

Si no se siente cómodo utilizando las DevTools con Google Slides, también puede probar algunas extensiones de Chrome para el trabajo

Extensiones de Chrome como alternativa al selector de color

Aunque las extensiones pueden resultar útiles, hay que tener en cuenta que no se actualizan ni se mantienen de forma activa. Teniendo en cuenta que requieren acceso a los datos de su navegador, debe tener cuidado al instalar cualquier extensión, incluso las recomendadas aquí

Sin embargo, hay dos extensiones populares que quizá le interese probar

#1. ColorZilla

La extensión ColorZilla ofrece todas las funciones esenciales que obtiene con el selector de colores incorporado en Chrome. Como extra, también obtiene la posibilidad de comprobar el historial del último color elegido

Por lo tanto, esto debería ser útil para todos los casos de uso, no sólo con Google Slides

#2. Cuentagotas ColorPick

Si tiene problemas con la herramienta cuentagotas utilizando DevTools, puede probar ColorPick Cuentagotas para obtener un cuentagotas sin acceder a las herramientas web

Cuando seleccione un color, le mostrará el valor RGB y la opción de generar paletas de colores. De forma similar a la extensión anterior, también podrá comprobar el historial de los colores que elija

Palabras finales 🎨

Chrome DevTools Color Picker es una herramienta útil. No necesita una herramienta profesional que le ayude a identificar los colores y el código o valores asociados. La herramienta integrada de Chrome se lo pone fácil sin necesidad de una extensión de terceros

Desde diseñadores gráficos hasta desarrolladores web que crean una plantilla para un sitio web, todo el mundo debería encontrarla útil

Por supuesto, también puede optar por utilizar extensiones de terceros disponibles. Pero, a menos que lo necesite, le sugerimos que explore todas las funciones con DevTools.