SISTEMAS

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

Google Chrome viene con Chrome DevTools, una colección de herramientas para desarrolladores web. De todas las herramientas accesibles, el selector de color disponible en Chrome resulta útil.

Pero, ¿cómo se accede a él? ¿Como lo usas? ¿Qué características ofrece esta herramienta?

En este artículo, exploraremos esta herramienta y sus capacidades.

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

Puede acceder a la herramienta cromada del selector de color mediante métodos abreviados de teclado o GUI (interfaz gráfica de usuario).

de acuerdo a Ctrl + Shift + I al usar el teclado Obtenga DevTools y vaya al selector de color. Si está utilizando una Mac, debe presionar, comando+opciones+i.

Con un mouse, debe hacer clic con el botón derecho y luego hacer clic en «una examinacion» para navegar por DevTools.

También puede configurar Chrome DevTools para que se abra automáticamente con cada pestaña nueva. Para que pueda acceder rápidamente al selector de color para cada pestaña en su navegador.

Para hacer esto, debe iniciar una nueva instancia de Chrome usando la línea de comando mientras pasa las siguientes banderas:

--auto-open-devtools-for-tabs

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

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

como usar el color ¿Selectores en Chrome?

1644624293 129 ¿Como usar el selector de color de Google Chrome

Después de iniciar DevTools, debe navegar para acceder a las herramientas necesarias para identificar los colores de una página web o el diseño en el que desea trabajar.

De forma predeterminada, debería poder ver «estiloLa sección ” está activa en la parte inferior de DevTools, como se muestra en la captura de pantalla.

Estilo de herramienta de desarrollo

Si seleccionó otra cosa, asegúrese de hacer clic enestilo» para acceder al código CSS de la página web.

Aquí, debe desplazarse hacia abajo en el código CSS disponible y buscar el cuadro de color etiquetado como Fondo o Color debajo de la sección del cuerpo. Este es el selector de color que estás buscando.

1644624293 578 ¿Como usar el selector de color de Google Chrome

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.

selector de color

¡Eso es! Listo, el selector de color en su navegador está listo para ayudarlo.

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.

Características del Selector de color en Chrome

Además de los códigos hexadecimales que se utilizan para identificar los colores, el selector de color integrado de Chrome le proporciona una variedad de información.

Esto es lo que puede esperar. Algunas características clave incluyen:

Paleta: En lugar de recorrer varios colores, obtiene algunas paletas predefinidas para aplicar rápidamente algunas selecciones.

selector de paleta de colores

formato de color: También puede cambiar de códigos hexadecimales a valores RGBA y valores de color HSLA.

formato de color

Paja: cuando accede al selector de color, puede navegar por la web y seleccionar cualquier elemento para obtener el código hexadecimal de ese color. Puede hacer clic en el selector de color para activarlo o desactivarlo.

Selector de color cuentagotas

Obtiene más opciones para ajustar el color y obtener el color exacto de su elección. Aquí vienen:

  • copiar al portapapeles: puede copiar el código de color para una identificación rápida en el portapapeles.
  • gradiente de color: Puede ajustar los tonos de los colores y alternar entre sus combinaciones de colores favoritas.
  • Control de opacidad: puede ajustar el nivel de transparencia para que parezca estable o mínimo.
  • selector de color de fondo: Elija un color de fondo adecuado para un contraste perfecto.
  • Contraste: Ajuste el contraste o corríjalo para que el texto/elemento sea visible.

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

¿Cómo usar el selector de color Chrome en Google Slides?

Si hace clic derecho en la sección de encabezado de una página web de Presentaciones de Google, puede navegar para acceder a la herramienta de selección de color. Aunque Google Slides no ofrece una herramienta de selección de color integrada, esto debería ser suficiente.

selector de color de diapositivas de google

Si no está acostumbrado a usar DevTools con Google Slides, también puede probar algunas extensiones de Chrome para hacer el trabajo.

Extensión 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. Debe tener cuidado al instalar cualquier extensión, incluso las recomendadas aquí, ya que requieren acceso a los datos de su navegador.

Sin embargo, es posible que le interese probar dos extensiones populares:

#1. ColorZilla

extensión colorzilla

ColorZilla La extensión proporciona toda la funcionalidad básica que obtienes con el selector de color integrado de Chrome. Como beneficio adicional, también puede consultar el historial del último color seleccionado.

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

#2. Cuentagotas ColorPick

pajitas selectoras de color

Si tiene problemas con la herramienta cuentagotas cuando usa DevTools, puede probar Cuentagotas ColorPick No es necesario acceder a las herramientas web para obtener el cuentagotas.

Cuando seleccione un color, mostrará los valores RGB y las opciones para generar una paleta. Similar a la extensión anterior, también puede consultar el historial de los colores que elija.

Últimas palabras 🎨

El selector de color de Chrome DevTools es una herramienta útil. No necesita herramientas profesionales que lo ayuden a identificar colores y códigos o valores asociados. Las herramientas integradas de Chrome lo hacen fácil sin extensiones de terceros.

Todos, desde diseñadores gráficos hasta desarrolladores web que crean plantillas de sitios web, deberían encontrarlo útil.

Por supuesto, también puede optar por utilizar las extensiones de terceros disponibles. Sin embargo, a menos que lo necesite, le recomendamos que utilice DevTools para explorar todas las funciones.

Artículo Recomendado:  Recuperar archivos borrados de la papelera de reciclaje después de vaciar en Windows y Mac

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *