DesignPicker - Color, Font & CSS Inspector

Inspect webpage colors, fonts and CSS. Copy computed styles and save design snippets locally.

DesignPicker — Color Picker, Font Detector & CSS Inspector Inspect the visual details of a webpage without interrupting your design workflow. Pick colors, identify typography and explore computed CSS in one browser extension. NEW: CSS Inspector • Hover to preview an element, then click to lock it for inspection. • Explore the box model, layout, Flex/Grid, spacing, typography, colors, borders, shadows and other computed properties. • Copy a property value, declaration, group or selected CSS. Preview the code and use manual copy when the clipboard is unavailable. • Save named CSS snippets locally without signing in. Search, rename, copy, delete and undo in Favorites. • Move or collapse the panel, inspect parent elements, refresh a snapshot and use Esc to unlock or exit. Color picking • Extract webpage colors and browse them in grouped or grid layouts. • Use the eyedropper when supported, with a screenshot-based webpage fallback. • Copy color codes in your preferred format and keep recent colors for reuse. Font detection • Inspect text to see its font family, size, weight and line height. • Save and manage recent font records for your design references. • Switch between font detection, CSS inspection and color picking with clean tool handoff. Optional account sync Sign in to synchronize saved colors, font records and supported preferences. Account collections are kept separate, and Settings provides an explicit import for colors and fonts saved while signed out. The auto-sync switch is local to each browser. CSS snippets remain local and do not join cloud sync. Get started 1. Pin DesignPicker in your toolbar and open a regular HTTP or HTTPS webpage. 2. Open the extension and select Colors, Fonts or CSS. 3. Start CSS inspection, click an element, then copy styles or save a snippet. CSS inspection shows the browser's current computed values. It is not an export of original author stylesheets or every responsive/pseudo-class state. Restricted browser pages, iframe targets and nested Shadow DOM targets are outside the current CSS inspection scope. Saved CSS snippets omit webpage HTML, input content, original element IDs/classes and resource URLs. No payment or subscription is required for the local tools. Website: https://design-picker.yisi.app Support: hi@yisi.app