Element Picker
Click any element on any web page. Instantly see its HTML, CSS selector, computed styles, colors, fonts, and spacing — all in one panel.
HTMLPicker lets you pick any web page element to extract HTML, CSS, screenshots, colors, fonts, and layout signals — then generate AI implementation prompts for Cursor, Copilot, Claude Code, and Codex.
One click to extract colors, CSS, fonts, HTML, screenshots, and component styles — then generate AI prompts to recreate any web page style.
Click any element on any web page. Instantly see its HTML, CSS selector, computed styles, colors, fonts, and spacing — all in one panel.
Pick any color from any element. Get HEX, RGB, and HSL values with one-click copy. Scan the whole page to extract the complete color palette.
See computed styles, generated CSS selectors, and clean CSS code for any element. Copy CSS with one click — no DevTools digging needed.
Capture visible viewport or full-page scrolling screenshots. Element-level screenshots included. All saved as high-quality PNG.
Export colors, typography, spacing, border radius, and shadows as structured design data in JSON or Markdown format — ready for your design system or AI workflow.
Reverse-engineer any page's design style into detailed AI implementation prompts. Generate prompts for Cursor, Copilot, Claude Code, Codex, v0, and Lovable.
No setup required. Install, pick, and export — it's that simple.
Click the Pick button in the toolbar, then hover and click any element on any web page. HTMLPicker instantly extracts all design information.
View colors, CSS, HTML, fonts, spacing, and screenshots in the sidebar. Scan the whole page palette or let AI analyze the design style.
Copy CSS, export design data, or generate AI implementation prompts. Feed the extracted data directly into Cursor, Copilot, Claude Code, or Codex.
| Feature | ColorZilla | CSS Peeper | HTMLPicker |
|---|---|---|---|
| Color Picker | ✓ | — | ✓ |
| CSS Inspector | — | ✓ | ✓ |
| Page Palette Analysis | — | — | ✓ |
| Screenshot Capture | — | — | ✓ |
| Design Token Export | — | — | ✓ |
| AI Prompt Generation | — | — | ✓ |
| Style Reverse Engineering | — | — | ✓ |
| Live Style Modification | — | — | ✓ |
| Free to Use | ✓ | Paid | ✓ |
HTMLPicker supports Chrome, Firefox, and Edge with full feature parity across all platforms.
Install HTMLPicker for free and start extracting design data from any web page in seconds.