Browserinspectie en extractie

Gratis kleurenpalet uit webpagina halen.

Gebruikte kleuren met rollen en bronelementen.

Verzamel kleuren van de pagina die je bekijkt en koppel elke waarde aan een zichtbaar element en doel.

Chrome-extensie en account vereist.
25 gratis automatiseringstaken per maand, gedeeld door alle tools. Limieten van de browseraanbieder gelden.

WAT JE KLAAR MOET HEBBEN

Zichtbare stijlen van de gekozen pagina.

JE STARTPUNT

Een taak die je kunt aanpassen.

Kopieer hem hier. Plak hem in WebAct wanneer je klaar bent.

Deze pagina bereidt je prompt voor. De taak draait in WebAct.

01

Maak de taak passend voor jou.

Bekijk de prompt hierboven. Voeg je doel en belangrijke eisen toe.

02

Neem hem mee naar WebAct.

Open de bronpagina, activeer WebAct en selecteer de relevante leesbare inhoud. Plak de taak en lever eventueel gevraagd aanvullend bronmateriaal aan.

03

Controleer het bruikbare deel.

Het resultaat omvat de leesbare inhoud die je aanlevert of selecteert. Klap relevante paginaonderdelen eerst open en controleer of de uitvoer de bedoelde records bevat.

PRAKTISCHE GIDS

Zo haal je kleuren uit een pagina zonder een officieel merkpalet te veronderstellen.

Haal kleuren uit daadwerkelijk weergegeven stijlen en benoem hun rollen. Een zichtbare accentkleur is niet vanzelf de enige goedgekeurde merkkleur.

Stem de werkwijze af op je taak.

Inspecteer gekozen elementen en noteer kleuren met hun zichtbare rol, zoals tekst, rand of achtergrond. Onderscheid berekende CSS-waarden van kleuren die uit een afbeelding zijn gehaald. Bewaar elementverwijzingen en geef aan welke paginastand of welk thema je bekeek.

Wat je aanlevert
Zichtbare stijlen van de gekozen pagina.
Wat je krijgt
Gebruikte kleuren met rollen en bronelementen.

Bekijk de invoer en het resultaat.

Illustratieve invoer en uitvoer · een leervoorbeeld, geen live uitvoering van WebAct

Voorbeeld invoerveld

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

Uitgewerkt voorbeeld

.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.
Dit voorbeeld downloaden

Laad deze invoer in de prompt en kopieer deze naar WebAct om de taak te proberen. Je resultaat kan afwijken van het voorbeeld.

Keuzes en probleemoplossing.

Mag je kleuren van één pagina een officieel merkpalet noemen?

Ze beschrijven de onderzochte pagina. Merkrichtlijnen, toegankelijke combinaties en goedgekeurde varianten vereisen aparte documentatie.

Waarom krijgt een knop een andere kleur bij aanwijzen?

Interactieve toestanden kunnen de standaardstijl overschrijven. Noteer de toestand samen met de kleur voor een bruikbaar palet.

Probeer het met je eigen bron.

Vervang het voorbeeld door je eigen materiaal in de taakprompt. Behoud de eisen die je nodig hebt en kopieer de taak naar WebAct.

De taak aanpassen en kopiëren ↑
VOORDAT JE BEGINT

WebAct gebruiken.

De prompt en het voorbeeld staan hier. Voer je taak uit in de WebAct-extensie voor Chrome.

Is deze tool gratis?

Je kunt de prompt hier gratis kopiëren en bewerken. Installeer voor gebruik met WebAct de Chrome-extensie, maak en verifieer je account en verbind een beschikbare ChatGPT-sessie in de browser. Het Free-abonnement bevat 25 door de gebruiker gestarte automatiseringstaken per kalendermaand, gedeeld door alle tools. Gewone browser-Chat staat hier los van; limieten van de aanbieder gelden.

Lees over gedeelde context in onze privacybeleid en over kiezen tussen Chat of Task.

VAN PROMPT NAAR JE EIGEN WERK

Neem de taak mee naar je pagina.

Installeer WebAct, voeg je bronmateriaal toe en maak het resultaat passend.

WebAct installeren