Inspección y extracción en el navegador

Extractor gratis de paleta de colores web.

Colores usados con sus funciones y elementos de origen.

Recoge colores de la página que examinas y relaciona cada valor con un elemento visible y su función.

Requiere extensión de Chrome y cuenta.
25 tareas de automatización gratis al mes, compartidas entre herramientas. Se aplican los límites del proveedor en el navegador.

QUÉ DEBES TENER PREPARADO

Estilos visibles de la página seleccionada.

TU PUNTO DE PARTIDA

Una tarea que puedes adaptar.

Cópialo aquí. Pégalo en WebAct cuando quieras.

Esta página prepara tu prompt. La tarea se ejecuta en WebAct.

01

Adapta la tarea a ti.

Revisa el prompt de arriba. Añade tu objetivo y los requisitos que importen.

02

Llévala a WebAct.

Abre la página de origen, activa WebAct y selecciona el contenido legible pertinente. Pega la tarea y proporciona cualquier material de origen adicional que solicite.

03

Comprueba la parte útil.

El resultado cubre el contenido legible que proporciones o selecciones. Expande primero las secciones pertinentes y comprueba que incluya los registros previstos.

GUÍA PRÁCTICA

Cómo extraer colores de una página sin asumir una paleta oficial.

Extrae colores de los estilos realmente representados e indica su función. Un acento visible no es necesariamente el único color de marca aprobado.

Adapta el flujo de trabajo a tu tarea.

Inspecciona los elementos seleccionados y registra los colores con su función visible, como texto, borde o fondo. Distingue valores CSS calculados de colores muestreados de una imagen. Conserva referencias a los elementos e indica qué estado o tema de la página se examinó.

Qué aportas
Estilos visibles de la página seleccionada.
Qué obtienes
Colores usados con sus funciones y elementos de origen.

Mira la entrada y el resultado.

Entrada y salida ilustrativas · ejemplo didáctico, no una ejecución de WebAct en directo

Ejemplo campo

Supplied style inspection: .card background #ffffff; button.primary background #d97736. These are inspected values, not official brand guidelines.

Ejemplo completo

.card — role: card background — color: #ffffff
button.primary — role: primary-button background — color: #d97736
Scope: two supplied element styles. Hover states, theme variants and brand approval are not established by this sample.
Descargar este ejemplo

Carga esta entrada en el prompt y cópialo en WebAct para probar la tarea. Tu resultado puede diferir del ejemplo.

Decisiones y solución de problemas.

¿Los colores de una sola página constituyen la paleta oficial de la marca?

Describen la página examinada. Las normas de marca, las combinaciones accesibles y las variantes aprobadas requieren documentación independiente.

¿Por qué cambia el color de un botón al pasar el puntero?

Los estados interactivos pueden sustituir el estilo predeterminado. Registra el estado junto al valor al reunir una paleta útil.

Pruébalo con tu propia fuente.

Sustituye el ejemplo por tu material en el prompt. Conserva los requisitos que necesites y copia la tarea en WebAct.

Personalizar y copiar la tarea ↑
ANTES DE EMPEZAR

Uso de WebAct.

Aquí tienes el prompt y el ejemplo. Ejecuta tu tarea en la extensión WebAct para Chrome.

¿Esta herramienta es gratis?

Puedes copiar y editar el prompt aquí gratis. Para usarlo con WebAct, instala la extensión de Chrome, crea y verifica tu cuenta y conecta una sesión disponible de ChatGPT en el navegador. El plan Free incluye 25 tareas de automatización iniciadas por el usuario por mes natural, compartidas entre herramientas. El Chat habitual del navegador es independiente; se aplican los límites del proveedor.

Aprende sobre el contexto compartido en nuestra política de privacidad y cómo elegir entre Chat o Task.

DE UN PROMPT A TU PROPIO TRABAJO

Lleva la tarea a tu página.

Instala WebAct, añade tu material de origen y adapta el resultado.

Instalar WebAct