Encuentra el color hex de cualquier elemento de una web
Inspecciona los colores de una web en cualquier página en vivo. Señala el elemento y su sección Colors muestra los colores del texto, del fondo y del borde. Un clic copia el código hex.
Actualizado el
Ag
- Ink
- Amber
- Paper
Quieres inspeccionar los colores de una web: el color exacto del texto o del fondo de un botón o un encabezado en un sitio en vivo. No hace falta adivinarlo a partir de una captura de pantalla. SuperchargeInspect es un inspector de colores para webs creado justo para eso. Señala el elemento y la sección Colores muestra sus colores de texto, fondo y borde. Con un clic copias el código hex al portapapeles.
Qué muestra la sección Colores
La sección Colores muestra los recuadros de color del elemento que señalas.
Texto. El color del texto del elemento, el valor color que usó el navegador para dibujarlo.
Fondo. El color de fondo del elemento, el valor background-color.
Borde. El color del borde, que solo aparece cuando el elemento tiene borde de verdad.
Al hacer clic en un recuadro se copia solo ese valor, así que puedes copiar los valores de color CSS de uno en uno y pegarlos en tu propia hoja de estilos. Son los colores calculados de ese único elemento, no los colores de toda la página.
Colores de una web: hex, RGBA y transparencia
El formato del color copiado depende de lo transparente que sea. Los colores opacos salen en hex, la forma compacta #rrggbb que pegas directamente en CSS. La tabla muestra lo que obtienes en cada lugar para los tres casos.
| Color | Clic en el panel | Copiar texto de referencia | Pie del PNG de referencia |
|---|---|---|---|
| Opaco | #rrggbb en hex | valor rgb() sin procesar | hex |
| Parcialmente transparente | valor rgba() sin procesar | valor rgba() sin procesar | hex de 8 dígitos |
| Totalmente transparente | transparent | rgba() con alfa cero | transparent |
La opción Copiar texto de referencia enumera los valores sin procesar que devolvió el navegador, para que veas exactamente lo que se calculó. El pie del PNG los muestra en hex para tener una referencia limpia y breve. SuperchargeInspect no usa HSL.
Qué lee y qué no
Solo funciona con valores de color CSS. Un color dentro de una foto, o un degradado o una imagen de fondo, no es un valor de color CSS, así que no aparecerá como recuadro.
Un caso que conviene conocer: si el color de fondo aparece como transparent, el color que ves en realidad viene de un elemento que está detrás. Sube al elemento padre con Ctrl+Up (Option+Up en macOS) y lee el color ahí.
Navegación con el teclado
Puedes controlar todo el proceso con el teclado. Pulsa Alt+Shift+E para empezar a inspeccionar. Las flechas pasan al elemento anterior o siguiente. Mantén pulsado Ctrl y pulsa Up o Down para ir al elemento padre o a un hijo. En macOS es Option en lugar de Ctrl.
Pulsa Enter para fijar el elemento en el que estás. Pulsa Esc para volver a seleccionar o cerrar el panel.
Todo se queda en tu dispositivo
SuperchargeInspect se ejecuta localmente en tu dispositivo y no hace ninguna conexión de red. No hay cuenta ni analíticas en segundo plano.
Consulta también fuentes y espaciado con el inspector para copiar CSS de una web.
Preguntas frecuentes
¿Cómo encuentro el color hex de un elemento en una web?
¿Puede encontrar el color de fondo de un elemento?
¿Qué pasa con los colores transparentes o semitransparentes?
¿Puede tomar un color de una imagen?
¿Envía datos de la página a alguna parte?
Funciones relacionadas
Muestra a tu herramienta de IA para programar el elemento exacto que quieres cambiar
Señala el elemento, añade una nota y copia una referencia con una captura de pantalla anotada y los estilos observados; luego pégala en la herramienta de IA para programar que ya usas.
Inspector CSS para cualquier elemento: consulta y copia los valores CSS
Un inspector de CSS que te permite ver el CSS de cualquier elemento de una web. Consulta la fuente, los colores, el espaciado y el modelo de caja, y copia los valores CSS a tu portapapeles.
Fuentes de una web: consulta la pila de fuentes declarada
SuperchargeInspect identifica las fuentes de una web a partir de su texto. Muestra la pila font-family declarada, el tamaño, el peso y la altura de línea, y los copia con un clic.