Google Chrome viene integrado con Chrome DevTools, que es una colección de herramientas para desarrolladores web. Entre todas las herramientas disponibles, el selector de color disponible en Chrome resulta útil.
Pero, ¿cómo se accede a él? ¿Como lo usas? ¿Cuáles son las características que se ofrecen junto con la herramienta?
En este artículo, exploraremos esta herramienta y sus características.
¿Cómo iniciar Chrome Color Picker?
Puede acceder a la herramienta cromada del 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 a través de DevTools.
También puede configurar Chrome DevTools para que se abra automáticamente con cada pestaña nueva. Por lo tanto, puede acceder rápidamente al selector de color para cada pestaña en 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 selector de color 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 “Estilo” sección activa en la parte inferior de DevTools, como se muestra en la captura de pantalla.
Si tiene algo más seleccionado, asegúrese de hacer clic en “Estilo” para acceder al código CSS de la página web.
Aquí, debe desplazarse hacia abajo por el 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 darle más opciones, como se muestra en la captura de pantalla a continuación.
¡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 poder seleccionar otros elementos CSS para explorar e inspeccionar el diseño en la página web.
Funciones en Color Picker en 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 alternar entre muchos tonos de color, obtiene algunas paletas de colores predefinidas para aplicar algunas selecciones rápidamente.
formato de color: Tiene la posibilidad de cambiar de código hexadecimal a valores RGBA y valores de color HSLA también.
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 habilitarlo o deshabilitarlo.
Obtiene 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 a su portapapeles.
Gradiente de color: Puede modificar el tono del color y alternar entre las posibilidades de una combinación de colores de su agrado.
control de opacidad: puede ajustar el nivel de transparencia para que parezca sólido o mínimo.
Selector de color de fondo: Para elegir un color de fondo adecuado para 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, pero se puede usar en cualquier navegador web basado en Chrome como Brave.
¿Cómo usar el selector de color de Chrome con 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.
Si no se siente cómodo usando DevTools con Google Slides, también puede probar algunas extensiones de Chrome para el trabajo.
Extensiones de Chrome como alternativa al selector de color
Si bien las extensiones pueden ser útiles, debe tenerse en cuenta que no se actualizan ni mantienen activamente. 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
La extensión ColorZilla ofrece todas las funciones esenciales que obtiene con el selector de color incorporado de Chrome. Como beneficio adicional, también tiene la posibilidad de verificar 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
Si tiene problemas con la herramienta cuentagotas con DevTools, puede probar ColorPick Eyedropper para obtener un cuentagotas sin acceder a las herramientas web.
Cuando seleccione un color, mostrará el valor RGB y la opción para generar paletas de colores. Similar a la extensión anterior, también puede verificar el historial de los colores que elige.
Palabras finales 🎨
Chrome DevTools Color Picker es una herramienta útil. No necesita una herramienta profesional que lo ayude a identificar los colores y el código o los valores asociados. La herramienta integrada de Chrome lo hace fácil sin necesidad de una extensión de terceros.
Desde diseñadores gráficos hasta desarrolladores web que crean una plantilla de sitio web, todos deberían 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.
