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.
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-tabsAsí 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-tabsCó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.
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.
¡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.
Formato de color: Tiene la posibilidad de cambiar de código hexadecimal a valores RGBA y también valores de color HSLA.
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.
Obtiene más opciones para modificar los colores y obtener el color preciso de su elección. Aquí están:
- Copiar al portapapeles: Puede copiar el código del color identificado rápidamente a su portapapeles.
- Degradado de color: Puedes modificar el tono del color y recorrer las posibilidades de una combinación de colores de tu 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, 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.
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
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
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.
