How to use the Webpage Color Palette Extractor.
Extract colors from the actual rendered styles and label their roles. A visible accent is not necessarily the brand's only approved color.
Make the workflow fit your task.
Inspect selected elements and record colors with their visible roles, such as text, border or background. Distinguish computed CSS values from colors sampled from an image. Retain element references and state which page state or theme was inspected.
- What you provide
- Selected page's visible styles.
- What you get
- Used colors with roles and source elements.
See the input and the result.
Illustrative input and output · a teaching example, not a live WebAct run
Example input
Supplied style inspection: .card background #ffffff; button.primary background #d97736. These are inspected values, not official brand guidelines.
Completed example
.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.
Load this input into the prompt, then copy it to WebAct to try the task. Your result may differ from the illustration.
Decisions and troubleshooting.
Can colors extracted from one page be treated as an official brand palette?
They describe the inspected page. Brand rules, accessibility pairings and approved variants need separate documentation.
Why does a button show a different color when hovered?
Interactive states can override the default style. Record the state alongside the value when collecting a usable palette.
Try it with your own source.
Replace the example with your material in the task prompt. Keep the requirements you need, then copy the task into WebAct.
Customize and copy the task ↑