¿Cómo utilizar el selector de color (cuentagotas)?

Hay una herramienta muy útil integrada en la herramienta de desarrollo de Chrome, que acabo de descubrir. Ni siquiera sé su nombre y no puedo encontrarlo en Google. Diría que es una herramienta de inspección de píxeles.

Encuentro el siguiente método de cómo usarlo:

1a. Inspeccione un elemento html con color de fondo.

1b. Defina el color de fondo de un elemento.

Haga clic en el selector de color.
Mueva el mouse sobre cualquier elemento de la página (no en la herramienta de desarrollo)

Ver: http://skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif

Mis preguntas: ¿Cuál es el nombre de esta herramienta? ¿Cómo usarlo fácilmente? La mayoría de las veces no me importa el color, pero quiero inspeccionar los píxeles de un icono. ¿Existe una tecla de acceso rápido de esta herramienta?

google-chrome-devtools

— Skalár Wag
fuente

Este es útil para copiar y vistas de nivel superior: chrome.google.com/webstore/detail/eyedropper-color-pick/…

— austin_ce

Respondido en los comentarios a continuación también; puede encontrarlo en las herramientas de desarrollo (en la pestaña Elementos, debajo de la pestaña "Estilos", haga clic en cualquier regla de "color", hay un selector de color en la ventana emergente) Lo que estoy buscando es una forma sin necesidad de un color regla, como imagina que quieres elegir un color solo de una imagen.

— mdikici

Respuestas:

106

Para abrir el cuentagotas simplemente:

Abrir DevTools F12
Ir a la pestaña Elementos
En la barra lateral de Estilos, haga clic en cualquier cuadro de vista previa de color

Su funcionalidad principal es inspeccionar los valores de color de los píxeles haciendo clic en ellos, aunque con sus nuevas funciones también puede ver la paleta de colores existente de su página o la paleta de diseño de materiales haciendo clic en el icono de dos flechas en la parte inferior. Puede resultar bastante útil al diseñar su página.

— Jaqen H'ghar
fuente

Actualmente estoy usando la versión 68.0.3440.106. Ya no puede usar la paleta de colores para seleccionar un color

— caras

Chrome v72 aquí, funciona tal como se describe en la respuesta.

— Dinei

Estoy en v78 y no puedo hacer que esto funcione; Incluso vine aquí para averiguar si me estaba olvidando algún detalle.

— Herbert Van-Vliet

Se llama simplemente la herramienta Cuentagotas. No hay ninguna tecla de método abreviado que yo sepa. La única forma en que puede usarlo ahora es haciendo clic en el cuadro selector de color en la barra lateral de estilos y luego haciendo clic en la página como ya lo ha estado haciendo.

— jaredwilli
fuente

tiene que haber una manera más fácil

— SuperUberDuper

@SuperUberDuper Bueno, ahora sí. Mi respuesta tiene un par de años. Hoy en día, puede simplemente hacer clic en el pequeño cuadro de muestra de color junto a los valores de color en la barra lateral de estilos y luego mover el mouse sobre la página para ver la herramienta de selección de color. Ahora es mucho más fácil.

— jaredwilli

pero primero

— debes

@SuperUberDuper o use una var ... --c: red, la forma más fácil de obtener una propiedad de color en su panel de devtools.

— Brandito

¿Puede explicar más

— SuperUberDuper

Actualmente, la herramienta de cuentagotas no funciona en mi versión de Chrome (como se describe arriba), aunque funcionó para mí en el pasado. Escuché que se está actualizando en la última versión de Chrome.

Sin embargo, puedo tomar colores fácilmente en Firefox.

Abrir página en Firefox
Menú Hamburguesa -> Desarrollador web -> Cuentagotas
Arrastre la herramienta Cuentagotas sobre la imagen ... Haga clic .
El color se copia en el portapapeles y la herramienta Cuentagotas desaparece.
Pegar código de color

En caso de que no pueda hacer que la herramienta Cuentagotas funcione en Chrome, esta es una buena solución.
También me resulta más fácil acceder :-)

— SherylHohman
fuente

Pensé que tampoco funcionaba para mí, pero aparentemente hay una limitación para que funcione solo cuando las herramientas de desarrollo están acopladas en la ventana del navegador.

— zopilote