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

Google Chrome viene integrado con Chrome DevTools, que es una colección de herramientas de desarrollo web. Entre todas las herramientas accesibles, el selector de color disponible en Chrome es útil.

Pero, ¿cómo accedes a él? ¿Como lo usas? ¿Cuáles son las funciones que se ofrecen junto con 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 mediante un atajo de teclado o GUI (interfaz gráfica de usuario).

Prensa Ctrl + Shift + I al usar el teclado para obtener DevTools y luego diríjase al selector de color. Si está utilizando una mac, debe presionar, Comando + Opción + I.

Con el mouse, debe realizar un clic derecho y luego hacer clic en "Inspeccionar”Para navegar por DevTools.

herramientas de desarrollo de cromo

También puedes configurar DevTools de Chrome para abrir automáticamente con cada pestaña nueva. Por lo tanto, puede acceder rápidamente al selector de color para cada pestaña de su navegador.

Para lograrlo, debe iniciar una nueva instancia de Chrome usando la línea de comando mientras pasa la siguiente bandera:

--auto-open-devtools-for-tabs

Así es como se ve al iniciar Chrome con DevTools de apertura automática a través de la terminal en Linux:

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

Cómo usar el color Selector en Chrome?

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

De forma predeterminada, debería poder ver el "Estilos”Sección activa en la parte inferior de DevTools, como se muestra en la captura de pantalla.

estilo devtools

Si ha seleccionado algo más, asegúrese de hacer clic en "Estilos”Para acceder al código CSS de la página web.

Aquí, debe desplazarse hacia abajo a través del código CSS disponible y buscar un cuadro de color etiquetado como fondo o color debajo de la sección del cuerpo. Este es el selector de color que estabas buscando.

Simplemente haga clic en el cuadro de color; debería ofrecerle más opciones, como se muestra en la captura de pantalla a continuación.

selector de color

¡Eso es todo! Voilà, tienes el selector de color en tu navegador listo para ayudarte.

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

Features in Color Picker on Chrome

El selector de color incorporado de Chrome le brinda una 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 recorrer varios tonos de color, obtiene algunas paletas de colores predefinidas para aplicar algunas selecciones rápidamente.

paleta de colores selector de color

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

formato de color

cuentagotas: Cuando accede al selector de color, puede 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.

selector de color de cuentagotas

Obtiene más opciones para modificar los colores y obtener el color preciso de su elección. Aquí están:

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

How to Use the Chrome Color Picker with Google Slides?

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

selector de color de diapositivas de Google

Si no se siente cómodo usando DevTools con Google Slides, también puede probar algunas extensiones de cromo para el trabajo.

Chrome Extensions as an Alternative to Color Picker

Si bien las extensiones pueden resultar útiles, debe tenerse en cuenta que no se actualizan o 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 puede interesarle probar:

#1. ColorZilla

extensión colorzilla

ColorZilla La extensión ofrece todas las funciones esenciales que obtienes con el selector de color integrado de Chrome. Como beneficio adicional, también puede consultar el historial del último color elegido.

Por lo tanto, esto debería ser útil para cada caso de uso, no solo con Google Slides.

#2. Cuentagotas ColorPick

cuentagotas selector de color

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

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

Palabras finales 🎨

El selector de color de Chrome DevTools 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 incorporada de Chrome lo hace fácil sin la necesidad de una extensión de terceros.

Desde diseñadores gráficos hasta desarrolladores web que crean un plantilla de sitio web, todo el mundo debería encontrarlo ú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.